当サイトのブログコンテンツに目次を設置するにあたり、番号付きリストの文字レイアウトについて考えたことや検証したことなどをメモしておきます。
項目番号(連番)が自動で表示されるリストです。HTMLタグのol要素が該当し、ol要素の子要素にあたるli要素が番号付きリストの各項目です。
以下が主なメリットです。
文字レイアウトの調整難易度が高いことです。1桁で表現できる9項目以下のリストのレイアウトでは問題ありません。問題となるのは項目数が10個もしくは100個を越える場合です。なぜなら数字の桁数が増えることでレイアウトが崩れる場合があるためです。以下は具体例です。
※数字を含めたリスト全体を左端に揃える方法もありますが、リスト番号以降の項目の行頭がずれるという別の課題があるため採用しませんでした。
文字のレイアウト問題を解決するために、後述する方法で文字レイアウトを調整します。まずは改善前の状態がこちらです。
青い縦線がコンテンツ幅の左端を表していますが、リスト項目の10番目と11番目の文字が基準線をはみ出しています。これが番号付きリストのレイアウトの課題であり、改善が必要です。
CSSのmarginやpaddingの調整で数字の左側にあらかじめ数字2〜3桁分の余白を設けることで対応可能ですが、項目数が9個以下(数字が1桁)の場合に不要な余白が生まれてしまうというデメリットがあります。そこで上記のデメリットも含めて解決したのが以下の状態です。
数字部分が数字の桁数に合わせて自動的に調整されたレイアウトを実現できるようになりました。コンテンツ幅をはみ出してしまうことはなく、項目名の行頭も揃っています。
Flush Left Aligned ListsとしてCodePenに掲載されている方法を参考に実装しました。実装方法を掲載してくださったJeremy Churchさんに感謝します。
例として当サイトのコーディングも載せておきますが、実装方法はリンク先のCodePenの内容を参照されることをおすすめします。
// コンパイル後のCSS(実際はSassでコーディングしています)
// 親要素を起点としたCSSの継承は通常はおこないませんが、WordPressの記事ブロックに用いるスタイルのため以下のようなセレクタ指定を用いています
.post-detail-content ol {
display: table;
margin: 0;
padding: 0;
}
// リストスタイルを数字として指定
.post-detail-content ol li {
list-style-type: decimal;
margin: 0;
padding: 0;
display: table-row;
counter-increment: table-ol;
}
// リストスタイルのカウンター項目を指定(table-olは任意の文字列)
.post-detail-content ol li:before {
content: counter(table-ol) ".";
display: table-cell;
padding-right: 0.4em;
text-align: right;
font-weight: 700;
}
// リストアイテムの下部余白を指定
.post-detail-content ol li:after {
content: "";
display: block;
margin-bottom: 1em;
}
// 最後のリストアイテム下部の不要な余白を無くす指定
.post-detail-content ol li:last-of-type:after {
margin-bottom: 0;
}
この方法の特徴は、olタグにdisplay: table;を指定し、olの子要素のliタグにdisplay: table-row;を指定することです。リスト項目ごとの余白はliタグの:after擬似要素のmargin-bottomで調整しています。
※CodePenには番号付きリストではない通常のリスト(ul要素)にFlush Left Aligned Listsを適用する方法も掲載されていますが、当サイトでは番号付きリスト(ol要素)に限定して適用しました。
2019年1月21日時点において以下のブラウザで安定して表示されていたので、まずはこのまま運用していくことに決めました。
リスト要素に対してdisplay: table;やdisplay: table-cell;を指定するという独特な(トリッキーな)実装方法のため、今後Webサイトを運用していく上での懸念はあります。
できればトリッキーな実装方法は避けたいのですが、理想的な文字レイアウト実現のためにこの方法を採用しました。各ブラウザで安定表示されているので、まずは自分のサイトで運用してみて気付いた点を調整していきます。