CSS

【コピペで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

CSSは疑似要素 :after を活用

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

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

IE対応を忘れずに

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

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

  • このエントリーをはてなブックマークに追加