【コピペでCSS】Webサイトでもスペースキーを使わずにタイトルを揃える方法

こんな本が今話題？

「スペースキーで見た目を整えるのはやめなさい」という目を引く見出しの書籍が今、売れているのをご存知でしょうか？

いわゆるワードで、このように見出しや本文を「スペースキー」でそろえる方法ですが、
今日はWebサイトで見出しをそろえるには？ということを考えてみたいと思います。

最終動作デモページはこちら

中央寄せの場合、落ち着かない

見出しは「text-align: center;」で「中央寄せ」することがあるかと思います。

上の例のような、左に見出しのある表の場合は、中央寄せをすると
各項目のスタート位置と終了位置がそろいません。

▼「text-align: center;」で見出しを中央寄せした場合

これはこれで「日時」と「会場」の左右が空いて落ち着かない感じがあります。

ここはやはり均等割り付け

CSSで均等割り付けを表現するにはどうしたらよいでしょう？

text-alignプロパティには、均等割り付けの値「justify」があります。

下図のように、要素の大きさの左右を埋めるようにテキストが配置されるのですが、
問題はこのjustifyに対応できるブラウザが現時点で少ないことです。

※2020年7月時点で対応可能なブラウザは、FireFox程度でした。

https://developer.mozilla.orgより引用

ただ、これを利用して、うまく均等割り付けできるCSSに改良したいと思います。

まずはHTML

今回はdl, dt, ddタグを使って書いていきます。
※divでもtableでもどうぞ。

▼HTML

　　
日時
　　
2020年7月30日（木）13:00



　　
会場
　　
杉並ドームホテル 20F 桜の間



　　
報告事項
　　
第15期事業報告、連結計算書類及び計算書類の内容並びにその監査結果報告の件



　　
決議事項
　　
第１号議案　剰余金の処分の件
　　　　
第２号議案　 定款一部変更の件
　　　　
第３号議案　取締役３名選任の件
　　　　
第４号議案　監査役２名選任の件

CSSは疑似要素 :after を活用

dl {
　　display: flex;
}
        
dt {
　　width: 100px;
　　text-align: justify;
　　text-justify: inter-ideograph;
}

dt::after {
　　content: "";
　　display: inline-block;
　　width: 100%;
}

dlはdisplay: flex;で横並びにします。

見出しのdt部分にはtext-align:justify;を設定、そしてafterを設定します。

IE対応を忘れずに

dtには「text-justify: inter-ideograph;」という値も設定しています。
justityがIEは日本語が効かないので、IE独自の値も設定してあげるとIEユーザーでもOKです。

最終動作デモページはこちら