スキップしてメイン コンテンツに移動

サイトにジャンプリンク付きの目次を角丸の枠線や透過の背景色のデザインで設けるためにはどうするか

インターネットでジャンプリンク付きの目次を設けたサイトをブログの記事などで良く見かけていた。


僕もブログに長文の記事を載せる際に見出しで細かく区切られているとそれぞれへ向けてジャンプリンク付きの目次を冒頭に設けておくのが素早く移動できて便利だし、訪問者にも好まれそうだとやってみたら気に入ってしまった。


コンテンツが上下に長いほどにジャンプリンク付きの目次がサイトに必要になって来る。




一つのページ内で移動するのも他のページへのリンクと同じで、リンクのaタグを使う。


リンク元のサンプルコード


<a href="#heading1">ジャンプリンク</a>

ジャンプリンクはaタグのhref属性にURLではなくてidを入れる。cssで使うのと同じだ。するとページで共通の指定は一回しか出て来てはならない。クラス/classならば何回でも構わないけれどもジャンプリンクはidを使うからリンク先は全て別々に切り離して記載しなくてはちゃんと動かない。リンク元は複数で同じidへ向けても構わない。


リンクのaタグを記載する注意点としてはidを示す#(シャープ)から英字で始めなくてはならない。使える文字は半角の英数字と幾つかの記号(-と_と:と./ハイフンとアンダーバーとコロンとピリオド)になっているけれども最初の一文字は英字しか受け付けない。そして英字については大文字と小文字が別物として扱われる。幾つかのidに入れる英字は同じでも大文字と小文字を分けて記載すれば大丈夫なんだ。


リンク先のサンプルコード


<h3 id="heading1">見出し<h3>

これもcssと同じで、効果を与えるところ、htmlの要素に半角スペースに挟んでidを記載しておく。どんなところでも構わないし、html要素ならば何にでも記載しておける。


ジャンプリンクとしてはサイトの上から下への移動だけではなくて下から上に付けるのも便利で良いと思う。前者と同じように後者もインターネットで良く見かけるけれどもサイト全体での最下段から最上段へのジャンプリンクが設定してあると一気に戻るから手動でスクロールしなくて済むんだ。


両方とも相互に入れておくこともできる。ただしリンク元はaタグでなくてはジャンプのhref属性が利かないからリンク先も同じにしなくてはならない。つまりaタグ同士で設定すれば上下に反復的に移動できるわけだ。


<a id="back1" href="#heading1">ジャンプリンク</a>

<h3><a id="heading1" href="#back1">見出し</a></h3>

リンク先がaタグでなければジャンプリンクのためにaタグを追加すると両方から交互に移動できるようになる。


ジャンプリンクのhtmlに戻る(リンク先を押すと又戻って来る)



サイトの目次というと項目が多いのを纏めたり、本文と識別できるように枠線のデザインを付けたくなる。



.contents {border:2px #87cefa solid;}

枠線はcssからborder属性で太さと色とスタイルを半角スペースで区切って記載するとhtmlで受け取れば反映する。


枠線のhtmlのサンプルコード


<h3>目次</h3>
<ol><li><a href="#heading1">項目</a></li><li><a href="#heading2">項目</a></li><ol>


目次


  1. 項目
  2. 項目


目次のhtmlでは表題に見出しタグ、項目にリストタグを使うと正確だと思う。


サイトのマークアップがhtml5の場合には目次の全体をnavタグで囲ってコンテンツのナビゲーションと指定することもできる。


ところで僕はブログの記事で目次は殆ど使わないからインラインスタイルで、htmlにstyle属性で単発に記載するのが簡単だと思うので、好んで使っている。


<div style="border:2px #87cefa solid;">
<h3>目次</h3>
<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属性を使う。



.contents {border:2px #87cefa solid;border-radius:10px;}


目次


  1. 項目
  2. 項目


border-radiusの値は枠線の縦横に対して割合か長さで指定する。どちらも値が大きいほどに丸くなる。割合で指定すると枠線が正方形でなければ角は楕円形の弧になる。長さで指定すると角は常に真ん丸の弧になっている。


border-radius属性は四つの角を個別に変えられて左上から右回りで順番に半角スペースで区切りながら左下まで記載する。


.contents {border:2px #87cefa solid;border-radius:25px 80px 80px 25px;}


目次


  1. 項目
  2. 項目


逆に省略も可能で、すると一つずつ左下から記載されてないとなるけど、その際には消えた部分は下側の二つまでは対角と同じ丸みで表示される。一つ減らすと左下が右上と同じで、二つ減らすとさらに右下が左上と同じになるんだ。三つ減らすと一つしか記載してないのと変わらないけれども右上が左上と同じになるので、四つの角は全て同じ丸みで表示される。


もう一つ丸みの形も変えられる。枠線が正方形でなければ値を割合で入力すると角は楕円形になるけど、角を縦横の比率に分割して指定することもできる。角の横の分の値を記載して半角スペースを取って半角スラッシュで区切りながら角の縦の分を記載する。


.contents {border:2px #87cefa solid;border-radius:100px / 25px;}


目次


  1. 項目
  2. 項目



目次を全面的に際立たせるには背景色を置くと良いけれども文字色とバランスを取らないとサイトの閲覧に支障を来すから注意を要する。



.contents {background-color:#e6e6fa;}

背景色のhtmlのサンプルコード


<h3>目次</h3>
<ol><li><a href="#heading1">項目</a></li><li><a href="#heading2">項目</a></li><ol>


目次


  1. 項目
  2. 項目


背景色は透過すると見易くなるので、その場合には値をrgbaで入れる。


僕は色コードは原色大事典で調べることが多い。色毎のページにrgbの値も載っているので、直ぐに分かる。



.contents {background-color:rgba(230,230,250,0.3);}


目次


  1. 項目
  2. 項目


cssのrgbaは半角の括弧に四つの値を半角のコンマで区切って入れるけれども右端のaの値は色の表示される割合になっていて、70%、透過するならば逆に「0.3」と30%だけ出すようにする。



リンクジャンプと枠線と背景色を全て纏めて表示する



目次


  1. 項目
  2. 項目


完成版のcssのサンプルコード


.contents {text-align:center;border:2px #87cefa solid;border-radius:10px;background-color:rgba(230,230,250,0.30);}
.contents ol {list-style:none;padding-left:0;}

完成版のhtmlのサンプルコード


<h3>目次</h3>
<ol><li><b><a href="#heading1">項目</a></b></li><li><b><a href="#heading2">項目</a></b></li><ol>

目次の全体はcssのtext-align属性のcenterで中寄せに配置して項目の先頭のマークをlist-style属性のnoneで消しながら残ってしまう左端の内側の余白をpadding-left属性の0で消している。そして一番目の項目をhtmlのbタグで太字に変えた。リンク先の見出しの大きさが同じとはかぎらないし、区別するために文字のデザインも合わせて変えておくと分かり易いと思う。


目次のデザインは枠線と背景色の他にも色々とできると思うけれどもジャンプリンク付きの目次ならばページ内で本文よりも目立たせる必要はないし、枠線と背景色から本文と切り離すだけだと考えるとデザインを追加するにしても角丸と透過が相応しい。


参考:同じページ内にリンクする border-style border-radius background-color rgba()

コメント

些細な日常の人気の投稿

PlayストアでAndroidアプリのダウンロードが非常に遅い場合の打開策

ジョナサン・モフェットのドラムの8ビートの切れ味の鋭いグルーヴ

Imgurで画像URLと埋め込みコードを取得する方法