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

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

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

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

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

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

HTML

<table class="jidori">
	<tr>
		<td>企画と執筆</td>
	</tr>
	<tr>
		<td>原稿編集</td>
	</tr>
	<tr>
		<td>造本設計</td>
	</tr>
	<tr>
		<td>構成</td>
	</tr>
	<tr>
		<td>原価と定価</td>
	</tr>
	<tr>
		<td>用紙材料の準備</td>
	</tr>
</table>

CSS

.jidori{
 width:7em;
 font-size:2em;
 table-layout:auto;
}
.jidori td{
 padding:0;
 -moz-text-align-last: justify;
 text-align-last: justify;
 text-justify:inter-ideograph;
 border:none;
}

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

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

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

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

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

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

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

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

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

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

<table class="jidori-ie">
<tr>
	<td>
		<p class="use-flex" aria-label="企画と執筆">
			<span aria-hidden="true">企画</span>
			<span aria-hidden="true">と</span>
			<span aria-hidden="true">執</span>
			<span aria-hidden="true">筆</span>
		</p>
	</td>
</tr>
....
</table>

企画

稿

HTML

<table class="jidori-ie">
<tr><td><p class="use-flex"><span>企画</span><span>と</span><span>執</span><span>筆</span></p></td></tr>
<tr><td><p class="use-flex"><span>原</span><span>稿</span><span>編</span><span>集</span></p></td></tr>
<tr><td><p class="use-flex"><span>造</span><span>本</span><span>設</span><span>計</span></p></td></tr>
<tr><td><p class="use-flex"><span>構</span><span>成</span></p></td></tr>
<tr><td><p class="use-flex"><span>原</span><span>価</span><span>と</span><span>定</span><span>価</span></p></td></tr>
<tr><td><p class="use-flex"><span>用</span><span>紙</span><span>材</span><span>料</span><span>の</span><span>準</span><span>備</span></p></td></tr>
</table>

CSS

.edge .use-flex{
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: justify;
 -ms-flex-pack: justify;
 justify-content: space-between;
}

その他の方法

letter-spacingプロパティを使う

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

HTML

<div class="letter-spacing">
<p><span>あいうえお</span><br>
<span>あいうえお</span><br>
<span>あいうえお</span><br>
<span>あいうえお</span></p>
</div>

CSS

.letter-spacing span:nth-of-type(2){
 letter-spacing:0.5em;
}
.letter-spacing span:nth-of-type(3){
 letter-spacing:1em;
}
.letter-spacing span:nth-of-type(4){
 letter-spacing:2em;
}

Note

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

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

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

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

<table class="my-table">
 <colgroup>
 <col span="1" class="my-table-col-1">
 <col class="my-table-col-2">
 <col class="my-table-col-3">
 </colgroup>
 <tr>
 <th>ISBN</th>
 <th>Title</th>
 <th>Price</th>
 </tr>
 <tr>
 <td>3476896</td>
 <td>My first HTML</td>
 <td>$53</td>
 </tr>
 <tr>
 <td>5869207</td>
 <td>My first CSS</td>
 <td>$49</td>
 </tr>
</table>

CSS

.my-table{
 width:500px;
 table-layout:fixed;
}
.my-table-col-1{
 width:100px;
}
.my-table-col-2{
 width:200px;
}
.my-table-col-3{
 width:200px;
}

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

.my-table{
 width:500px;
}
.my-table th:nth-of-type(1), 
.my-table td:nth-of-type(1){
 background-color:#ecf0f1;
 width:100px;
}
.my-table td:nth-of-type(2){
 background-color:transparent;
 width:200px;
}
.my-table td:nth-of-type(3){
 background-color:transparent;
 width:200px;
}

忘れちゃだめ

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

生きてるだけで、丸儲け

I am happy just to go.

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

Photo by Federico Bottos on Unsplash

Photo by Joshua Jordan on Unsplash


新着記事

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