今回は、CSSでパンくずリストを作る方法について紹介します。
パンくずリストとは？
パンくずリストとは、現在見ているページがWEBサイト全体でどの位置にあるのか示す印のことです。
例えば下記の画像だと、「HOMEの中のCSSのページ」を指していることが分かります。
パンくずリストがあることで、ユーザー自身が今どこのページにいるのか知ることが出来るのです。
【CSS】パンくずリストの作り方について
パンくずリストの完成形はこちらです。
それでは実際にHTMLとCSSを使ってパンくずリストを作っていきます。
HTML
<!-- パンくずリスト -->
<div class="bread">
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
親要素のdivタグの中に、ulタグでリストを作りました。
CSS
.bread ul {
display: flex;
}
.bread li a {
padding: 5px;
color: #444;
font-size: 16px;
text-decoration: none;
}
.bread li a:hover {
opacity: 0.7;
}
.bread li:after {
content: '\f054';
font-family: "Font Awesome 5 Free";
font-weight: bold;
margin-left: 10px;
margin-right: 10px;
color: #444;
}
.bread li:last-child:after {
content: none;
}
◎1行目〜3行目
リストを横並びにします。
◎4行目〜9行目
aタグの余白とフォントサイズを指定します。
◎10行目〜12行目
aタグをhoverすると、「opacity: 0.7;」になるようにします。
◎13行目〜20行目
liタグの後ろに「>」のアイコンを表示させます。
今回はFont Awesomeを使いました。
◎21行目〜23行目
liタグの最後のafterだけ「>」のアイコンが表示されないようにするために、「content: none;」を指定しました。
まとめ
以上が、パンくずリストの作り方でした。
