CSS display:table で目次の領域を文字列の長さに応じた横幅で表示する

更新:

CSS の display:table を使い、目次の領域を文字の長さに応じた横幅で表示する方法。

目次について

スマホでは、ページが長いと探しているものがページのどこに書かれているのか、上から順番にスクロールしていくのが大変だ。 目次を先に提示することで、どの辺りに知りたいことが書かれているか予測できる。 今まで自サイトに目次を設置していなかったが、文章が長いページに目次を設置してみることにした。

とりあえず、目次のリストを ol 要素で書き、それを div 要素で囲む。 ちなみに Wikipedia では ol 要素ではなく、ul 要素を使っている。

<div style="margin:1em 0;padding:6px;border:solid #aaa 1px;background:#f5f8ff;">
目次
<ol>
<li>見出し</li>
<li>サンプル</li>
</ol>
</div>

表示例

目次
  1. 見出し
  2. サンプル

特に何も指定しなければ、div 要素にしても ol 要素にしても通常はページ幅いっぱいに領域が表示されてしまう。

width で横幅を指定できるが、それだと目次の文字数が少ないときは余白が気になり、文字数が多い場合は途中で改行されて表示される。 例では画面幅に合わせて縮まるように max-width を記述した。

<div style="margin:1em 0;padding:6px;border:solid #aaa 1px;background:#f5f8ff;max-width:300px;">
目次
<ol>
<li>見出し</li>
<li>サンプル</li>
</ol>
</div>

表示例

目次
  1. 見出し
  2. サンプル
目次
  1. 見出し
  2. サンプルサンプルサンプルサンプルサンプル

まあ改行されても良いが、Wikipedia の目次は中身の長さに合わせた横幅になっている。 Wikipedia の CSS を見てみると、div 要素に display:table を使っていた。 display で block、inline、inline-block、none 辺りは使ったことがあるが、table は今まで使ったことがないかもしれない。

display:table を使う

display:table を指定すると table 要素のように中身の文字数に応じた横幅で表示されるようになる。

上記の例に display:table を追加してみる。

<div style="display:table;margin:1em 0;padding:6px;border:solid #aaa 1px;background:#f5f8ff;">
目次
<ol>
<li>見出し</li>
<li>サンプル</li>
</ol>
</div>

表示例

目次
  1. 見出し
  2. サンプル

以上で目次の出来上がり。

nav 要素

MDN(Mozilla)の nav 要素の説明を見ると、nav 要素は他のページへのナビゲーションリンクだけでなく、同一ページ内のリンクも想定しているようなので、上記例の div を nav に置き換えても良い。

nav 要素も display:table を指定することで、目次の項目の文字数に合わせた横幅で表示できる。

<nav style="display:table;margin:1em 0;padding:6px;border:solid #aaa 1px;background:#f5f8ff;">
目次
<ol>
<li>見出し</li>
<li>サンプル</li>
</ol>
</nav>

ただし、nav 要素は HTML5 から追加された要素なので、対応ブラウザには注意する必要がある。 2018年現在、ほとんどのブラウザは問題ないが、Internet Explorer は 9 から対応していて、8 までは非対応。

目次は必要か?

ここまで目次の話をしておいて言うのも変だが、目次を設置する際は注意したい。

目次はページのキーワードをページ上部に並べることになる可能性が高く、これが検索エンジンに嫌われる可能性もある。 また、本来ユーザーの利便性を考えて目次を設置しているが、分かりやすいほど目的の話題にたどり着きやすく、ページの滞在時間が減る可能性もある。 検索エンジンのことを意識しすぎるのは良くないが、いろいろ考えさせられる。

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