HTML文書の両端揃えと、均等割り付け CSS

均等割り付けを行うCSSプロパティには、text-align: justify;等を使いますが、このプロパティは、ブラウザのサポートもばらばらで、うまく使うには苦労が多いプロパティの一つです。

均等割り付けが実際に必要になる場面は、文字数が一行に満たない場合に、項目の幅などをそろえて、配置したいケースが多いのではないかと思います。

このような場合、最もシンプルなのは、table要素を使う方法です。

このような表現をCSSで行う場合は、table要素を使うと便利です。

企画と執筆
原稿編集
造本設計
構成
原価と定価
用紙材料の準備

HTML

CSS

しかし、この方法ではedgeブラウザでは、スタイルが適用されません。これらのブラウザもサポートする場合は、flexを使うと実現できそうです。

以下は、table要素を使っていますが、以下の方法だと必ずしもtableを使う必要はありません。

見た目の調整は、これで出来るのですが、見た目のためにこのような調整を行うことは、均等割り付けに限らず、大きな問題がありそうなので、追記します。

一つ目の問題は、WordPressの検索で支障が出てしまうという事

「企画と執筆」をキーワードに検索をした場合に、以下のようにspan要素で囲まれた文字列は、検索できなくなるという点。
均等割り付け文字を選択して、コピぺした検索文字は、「企+画+と+執+筆」となってしまう事が多く、数文字程度であれば検索は可能ですが、必ずしも「企画と執筆」が結果に表れないので、user-selectプロパティなどで、選択なしにするなど割り切りが必要かもしれません。

以下のように、aria-label="企画と執筆"といった属性をつけておけば、WordPressは、「企画と執筆」を検索できます。

二つ目の問題は、NVDA等WEBページの読み上げ機能を使って読み上げを行う場合の支障

要素で囲まれた部分を指定しても、一文字づつしか読み上げできなくなる問題。

文字は、意味を持っている言葉の単位で要素で囲まないと、意味が失われることになってしまいます。

以下のように、aria-labelを使うなどして、検索 読み上げに対応する必要がありそうです。

企画

稿

HTML

CSS

その他の方法

letter-spacingプロパティを使う

あいうえお
あいうえお
あいうえお
あいうえお

HTML

CSS

Note

均等割り付けをtable要素で行う場合、td要素の幅を整える必要が生じます。

table-layout:fixed;を使う場合には、該当のセルの幅だけでなく、行内のすべてのtd要素と、table要素に幅を指定する必要があります。

レスポンシブデザインを行う場合は、領域からはみ出す場合にスクロール表示する等のテーブルのレスポンシブ設定も併せて検討する事をお勧めします。

列ごとのスタイルを指定する場合のサンプル

CSS

colgroup col要素を使わないで列のスタイルを指定する場合は、

忘れちゃだめ

ゴミ出しは、水曜日ですよ

生きてるだけで、丸儲け

I am happy just to go.

  • 日時 2100年3月1日
  • 場所 仙台市
  • 参加費用 無料

Photo by Federico Bottos on Unsplash

Photo by Joshua Jordan on Unsplash


新着記事

コメントは受け付けていません