【 WEBデザイン 】 コードハッピーセット 「パンくずリスト」 FirE♯526
WEBサイトに必要な基本的な機能をセットにしてご紹介します。
本日は、「パンくずリスト」です。
【 パンくずリスト 】
ユーザーが今どのページにいるのかの、道案内役がパンくずリストです。
HTMLとCSSのみでシンプルに設計します。
■ HTML
<div class="bread-crumb">
<ol>
<li><a href="index.html">top</a></li>
<li>profile</li>
</ol>
</div>
パンくずリストは、リストタグの、<ol>タグで作ります。
リセットCSSをリンクさせていない場合は、番号が文頭に入ります。
その場合は、list-style: none; を<ol>のスタイルに指定しましょう。
このコードを階層ページの、パンくずリストを設置したい場所に書きます。
ページの名前に応じて、<li>タグの中身は書き換えましょう。
■ SCSS
/*=============================
パンくずリスト
===============================*/
.bread-crumb {
padding: 2%;
ol {
display: flex;
li:first-child::after {
content: ">";
padding: 0 5px;
}
}
}
SCSSでの記述です。
ol に対して、display: flex; を指定し、横並びを実装します。
パンくずリストの「 > 」この記号は、::after で、擬似要素を作って、表示しています。
■ CSS
/*=============================
パンくずリスト
===============================*/
.bread-crumb {
padding: 2%;
}
.bread-crumb ol {
display: flex;
}
.bread-crumb ol li:first-child::after {
content: ">";
padding: 0 5px;
}
コンパイル後のCSSです。
CSCCを使用しない場合は、こちらをコピペです。
【 完成 】
たったこれだけで、パンくずリスト完成です。
WordPressなどで、動的サイトを作る場合には、プログラミングにて、もう少しシステマチックに実装できます。
または、便利なプラグインもあるので、
プラグインインストールして、コードを1行で完了しちゃいます。
【 まとめ 】
パンくずリストのコードセットでした。
簡単な実装ですが、SEOにも効果ありの機能です。
スマホサイトでは表示しないことが多いので、この辺りも注意しましょう!!
この記事が気に入ったらサポートをしてみませんか?