2022.07.20
Chromeで画像やテキストがぼやけるときの対処法
コーディング
制作
2021.08.03
ユーザーが今どのページを見ているのか分かりやすくするため、パンくずリストを設置しているサイトが多いですね。今回は、そんな「パンくずリスト」についてご紹介します。
目次
弊社のサイトに設置しているパンくずリストの例です。
現在どのページを見ているのか把握でき、また、階層が上のページに戻ることができるようになっています。
実際にコードの例を見ていきたいと思います。
<ol>
<li><a herf="https://hoge.com">トップ</a></li>
<li><a herf="https://hoge.com/project/">事業内容</a></li>
<li>事業内容Aのタイトルタイトルタイトルタイトル</li>
</ol>
パンくずリストは、順番に意味があるリストですので、ul
ではなくol
を使用するのが適切です。
ul/ol/dlの使い分けについては、こちらをチェック
.pankuzu ol{
display:flex;
white-space: nowrap;
}
.pankuzu ol li{
list-style:none;
padding-right:30px;
}
.pankuzu ol li:not(:last-child) {
position:relative;
padding-right:50px;
}
.pankuzu ol li:not(:last-child) ::after{
content: ">";
display: block;
position: absolute;
width: 10px;
height: 15px;
top: 0px;
right: 20px;
}
.pankuzu ol li a{
cursor:pointer;
}
.pankuzu ol li a:hover{
opacity:.7;
}
パンくずリストは、横並びになっているものが多いので、こちらではdisplay:flex;
で横並びにしています。
忘れないように気を付けたいポイントは、white-space: nowrap;
です。
これは、文字列を折り返さないようにするための指定です。
この指定を行わずに、画面幅を狭くすると文字が折り返してしまって、格好の悪い見た目になってしまいます。
なお、画面幅が狭い時の見せ方については、下でご紹介いたします!
上記をコピペしていただくと、以下のようなパンくずリストが完成します。
パンくずリストは、下層ページでは、横に長くなりがちです。
折り返して表示したい場合は、.pankuzu ol
に flex-wrap:wrap;
の折り返し指定を追記します。
.pankuzu ol{
display:flex;
white-space: nowrap;
flex-wrap:wrap; /* << 追記 */
}
こちらに例を作成したので、右上のEDIT ON CODEPEN をクリックして、画面幅を変えてみてください!
See the Pen by spiqa design (@spiqa_design) on CodePen.
こちらは、スクロールさせる例です。
See the Pen by spiqa design (@spiqa_design) on CodePen.
スクロールの例については、こちらの記事に詳しく書いていますので、ぜひ見てみてください!
WordPressでWebサイトを作っている場合、パンくずリストが簡単に作成できるプラグインがあります。
Breadcrumb NavXT というプラグインがおすすめです。
プラグインの使い方については、こちらの記事で詳しく紹介されていますので、参考にしてみてください。
とにかく簡単にパンくずリストを作成したい!という方は、プラグインを導入しちゃいましょう。
今回は、パンくずリストについてご紹介しました。
パンくずリストの設置で、ユーザーにとって分かりやすいWebサイトにできると良いですね!
こちらもおすすめ