【コピペで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期事業報告、連結計算書類及び計算書類の内容並びにその監査結果報告の件
  
決議事項
  
第1号議案 剰余金の処分の件     
第2号議案  定款一部変更の件     
第3号議案 取締役3名選任の件     
第4号議案 監査役2名選任の件

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です。

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