結城永人インターネットでジャンプリンク付きの目次を設けたサイトをブログの記事などで良く見かけていた。
僕もブログに長文の記事を載せる際に見出しで細かく区切られているとそれぞれへ向けてジャンプリンク付きの目次を冒頭に設けておくのが素早く移動できて便利だし、訪問者にも好まれそうだとやってみたら気に入ってしまった。
コンテンツが上下に長いほどにジャンプリンク付きの目次がサイトに必要になって来る。
ジャンプリンクのHTML
一つのページ内で移動するのも他のページへのリンクと同じで、リンクのaタグを使う。
リンク元のサンプルコード
<a href="#heading1">ジャンプリンク</a>ジャンプリンクはaタグのhref属性にURLではなくてidを入れる。CSSで使うのと同じだ。するとページで共通の指定は一回しか出て来てはならない。クラス／classならば何回でも構わないけれどもジャンプリンクはidを使うからリンク先は全て別々に切り離して記載しなくてはちゃんと動かない。リンク元は複数で同じidへ向けても構わない。
リンクのaタグを記載する注意点としてはidを示す#（シャープ）から英字で始めなくてはならない。使える文字は半角の英数字と幾つかの記号（-と_と:と.／ハイフンとアンダーバーとコロンとピリオド）になっているけれども最初の一文字は英字しか受け付けない。そして英字については大文字と小文字が別物として扱われる。幾つかのidに入れる英字は同じでも大文字と小文字を分けて記載すれば大丈夫なんだ。
リンク先のサンプルコード
<h2 id="heading1">見出し<h2>これもCSSと同じで、効果を与えるところ、HTML要素に半角スペースに挟んでidを記載しておく。どんなところでも構わないし、HTML要素ならば何にでも記載しておける。
ジャンプリンクとしてはサイトの上から下への移動だけではなくて下から上に付けるのも便利で良いと思う。前者と同じように後者もインターネットで良く見かけるけれどもサイト全体での最下段から最上段へのジャンプリンクが設定してあると一気に戻るから手動でスクロールしなくて済むんだ。
両方とも相互に入れておくこともできる。ただしリンク元はaタグでなくてはジャンプのhref属性が利かないからリンク先も同じにしなくてはならない。つまりaタグ同士で設定すれば上下に反復的に移動できるわけだ。
<a id="back1" href="#heading1">ジャンプリンク</a><h2><a id="heading1" href="#back1">見出し</a></h2>リンク先がaタグでなければジャンプリンクのためにaタグを追加すると両方から交互に移動できるようになる。
ジャンプリンクのHTMLに戻る（リンク先を押すと又戻って来る）
通常のジャンプリンクは瞬間的に移動するけれどもCSSのscroll-behavior:smoothを使うと移動中のアニメーションを付けることもできる。
枠線のデザインのCSS
サイトの目次というと項目が多いのを纏めたり、本文と識別できるように枠線のデザインを付けたくなる。
枠線のCSSのサンプルコード
.contents {border:2px #87cefa solid}枠線はCSSからborder属性で太さと色とスタイルを半角スペースで区切って記載するとHTMLで受け取れば反映する。
枠線のHTMLのサンプルコード
<div class="contents">
<p>目次</p>
<ol><li><a href="#heading1">項目</a></li><li><a href="#heading2">項目</a></li><ol>
</div>目次のHTMLでは表題に見出しタグ、項目にリストタグを使うと正確だと思う。
しかし目次の表題に見出しタグを使うと検索エンジンが余計なキーワードとして拾ってしまってSEO（検索エンジン最適化）対策に不利かも知れないので、サンプルでは敢えて段落のpタグを使っている。
その他に開閉メニューのdetailsタグのsummaryタグがコンテンツの表題を示すことができるから目次に向いていると思う。
サイトのマークアップがHTML5の場合には目次の全体をnavタグで囲ってコンテンツのナビゲーションだと示すこともできて読み上げのスクリーンリーダーなどが目次だと機械的に把握し易くなる。
全体の内側の余白を均一にするにはpaddingを追加して目次の表題のタグの上の外側の余白があればmargin-top:0で消して項目のリストタグの下の外側の余白をmargin-bottom:0で消す。
.contents {border:2px #87cefa solid;padding:1em}
.contents>p {margin-top:0}
.contents>ol {margin-bottom:0}他のマークアップでも可能だけれどもこれだと全体の背景色も均等に表示されるので、使い回しが利く。
ところで僕はブログの記事で目次は殆ど使わないからインラインスタイルで、HTMLにstyle属性で単発に記載するのが簡単だと思うので、好んで使っている。
<div style="border:2px #87cefa solid;">
<p>目次</p>
<ol><li><a href="#heading1">項目</a></li><li><a href="#heading2">項目</a></li><ol></div>結果は同じだけれどもインラインスタイルだとCSSのデザインはHTMLのマークアップに組み込まれてしまう。
枠線の十種類のスタイル
- none：なし／隣りへ優先なし（初期値）
- hidden：なし／隣りへ優先あり
- solid：実線
- double：二本の実線
- groove：窪んだ線
- ridge：盛った線
- inset：左上が暗くて右下が明るい
- outset：左上が明るくて右下が暗い
- dashed：破線
- dotted：点線
枠線の角は何もしないと尖っている。丸くする場合にはborder-radius属性を使う。
角丸のCSSのサンプルコード
.contents {border:2px #87cefa solid;border-radius:10px;padding:1em}
.contents>p {margin-top:0}
.contents>ol {margin-bottom:0}border-radiusの値は枠線の縦横に対して割合か長さで指定する。どちらも値が大きいほどに丸くなる。割合で指定すると枠線が正方形でなければ角は楕円形の弧になる。長さで指定すると角は常に真ん丸の弧になっている。
border-radius属性は四つの角を個別に変えられて左上から右回りで順番に半角スペースで区切りながら左下まで記載する。
.contents {border:2px #87cefa solid;border-radius:25px 80px 80px 25px;padding:1em}
.contents>p {margin-top:0}
.contents>ol {margin-bottom:0}逆に省略も可能で、すると一つずつ左下から記載されてないとなるけど、その際には消えた部分は下側の二つまでは対角と同じ丸みで表示される。一つ減らすと左下が右上と同じで、二つ減らすとさらに右下が左上と同じになるんだ。三つ減らすと一つしか記載してないのと変わらないけれども右上が左上と同じになるので、四つの角は全て同じ丸みで表示される。
もう一つ丸みの形も変えられる。枠線が正方形でなければ値を割合で入力すると角は楕円形になるけど、角を縦横の比率に分割して指定することもできる。角の横の分の値を記載して半角スペースを取って半角スラッシュで区切りながら角の縦の分を記載する。
.contents {border:2px #87cefa solid;border-radius:100px / 25px;padding:1em}
.contents>p {margin-top:0}
.contents>ol {margin-bottom:0}背景色のデザインのCSS
目次を全面的に際立たせるには背景色を置くと良いけれども文字色とバランスを取らないとサイトの閲覧に支障を来すから注意を要する。
背景色のCSSのサンプルコード
.contents {background-color:#e6e6fa}背景色のHTMLのサンプルコード
<div class="contents">
<p>目次</p>
<ol><li><a href="#heading1">項目</a></li><li><a href="#heading2">項目</a></li><ol>
</div>全体の内側の余白を均一にするにはpaddingを追加して目次の表題のタグの上の外側の余白があればmargin-top:0で消して項目のリストタグの下の外側の余白をmargin-bottom:0で消す。
.contents {background-color:#e6e6fa;padding:1em}
.contents>p {margin-top:0}
.contents>ol {margin-bottom:0}他のマークアップでも可能だけれども全体の背景色を均等に表示するには適している。
背景色は透過すると文字が見易くなるかも知れず、その場合には値をrgba()で入れる。
僕は色コードは原色大事典で調べることが多い。色毎のページにrgbの値も載っているので、直ぐに分かる。
透過のCSSのサンプルコード
.contents {background-color:rgba(230,230,250,0.3);padding:1em}
.contents>p {margin-top:0}
.contents>ol {margin-bottom:0}CSSのrgba()は半角の括弧に四つの値を半角のコンマで区切って入れるけれども右端のaの値は色の表示される割合になっていて、70%、透過するならば逆に「0.3」と30%だけ出すようにする。
目次の中寄せのデザイン
目次の全体を中寄せして一部の項目を太字にしてみる。
中寄せのCSSのサンプルコード
.contents {text-align:center;border:2px #87cefa solid;border-radius:10px;background-color:rgba(230,230,250,0.30);padding:1em}
.contents>p {margin-top:0}
.contents>ol {list-style-type:none;padding-left:0;margin-bottom:0}
.bold {font-weight:bold}中寄せのHTMLのサンプルコード
<div class="contents">
<p>目次</p>
<ol><li class="bold"><a href="#heading1">項目①</a></b></li><li><a href="#heading2">項目②</a></b></li><ol>
</div>目次の全体をCSSのtext-align属性のcenterで中寄せに配置して項目の先頭のマークをlist-style-type属性のnoneで消しながら残ってしまう左端の内側の余白をpadding-left属性の0で消している。
そして太字にしたい一番目の項目には個別の個別のliタグに太字のfont-weight:boldを指定したblodのclassを付けている。リンク先の見出しの大きさが同じとはかぎらないし、区別するために文字のデザインも合わせて変えておくと分かり易いと思う。
目次のデザインは枠線と背景色の他にも色々とできると思うけれどもジャンプリンク付きの目次ならばページ内で本文よりも目立たせる必要はないし、枠線と背景色から本文と切り離すだけだと考えるとデザインを追加するにしても角丸と透過が相応しい。
コメント