【HTML&CSS】パンくずリストの作り方を順を追って解説

CSS

この記事では「HTMLとCSSでパンくずリストを作る方法」について、1つずつ順を追って解説します。

スポンサーリンク

パンくずリストのリンクを作成する

まずはパンくずリストで表示するリンクを用意します。

<div class="bread">
  <ul>
    <li><a href="#">トップ</a></li>
    <li><a href="#">アウトドア</a></li>
    <li><a href="#">登山</a></li>
  </ul>
</div>

See the Pen
パンくずリスト Part1 by aiiro (@aiiro29)
on CodePen.

リンクのリストを横一列に並べる

ulタグに「display: flex」を適用して、li要素を横一列に並べます。

.bread ul {
  display: flex; /* 子要素(li)を横一列に並べる */
  list-style-type: none; /* リスト要素に表示されている"・"を非表示 */
}

See the Pen
パンくずリスト Part2 by aiiro (@aiiro29)
on CodePen.

リンクのスタイルを調整する

メニューリンク同士の間隔や文字、背景色等を調整します。

「a:hover」でカーソルをメニューのリンクに乗せたときに背景色を変更しています。

.bread ul {
  display: flex;
  list-style-type: none;
}

.bread li a {
  padding: 5px; /* リンク間の間隔を調整 */
  color: #000000; /* リンクの文字色を調整 */
  font-size: 16px; /* リンクの文字サイズを調整 */
  text-decoration: none; /* リンクの下線を非表示 */
}

.bread li a:hover {
  background-color: #EEEEEE; /* カーソルをリンクの上に乗せたときの背景色 */
}

See the Pen
パンくずリスト Part3 by aiiro (@aiiro29)
on CodePen.

区切り文字を表示する

リンクの間に区切り文字を表示します。「li:after」で「content」

これでパンくずリストらしくなりました。

今のままだと最後の要素の後ろにも区切り文字が表示されていますが、これを表示しないようにする方法は後述します。

区切り文字の文字コードは下記のサイトを参考にしました。
https://brajeshwar.github.io/entities/

.bread ul {
  display: flex;
  list-style-type: none;
}

.bread li a {
  padding: 5px;
  color: #000000;
  font-size: 16px;
  text-decoration: none;
}

.bread li a:hover {
  background-color: #EEEEEE;
}

.bread li:after {
  content: '\003e'; /* 「>」を要素間の区切り文字として表示 */
  margin-left: 10px; /* 区切り文字と要素の間隔を調整 */
  margin-right: 10px; /* 区切り文字と要素の間隔を調整 */
  color: #888888; /* 区切り文字の文字色 */
}

See the Pen
パンくずリスト Part4 by aiiro (@aiiro29)
on CodePen.

リストの最後の要素の後ろに区切り文字を表示しないようにする

liタグの最後の要素を指定するには、擬似クラスの「:last-child」を使用します。

「li:last-child:after」の「content」をブランクにすることで、最後のリンクの後ろには区切り文字を表示しないようにします。

.bread ul {
  display: flex;
  list-style-type: none;
}

.bread li a {
  padding: 5px;
  color: #000000;
  font-size: 16px;
  text-decoration: none;
}

.bread li a:hover {
  background-color: #EEEEEE;
}

.bread li:after {
  content: '\003e';
  margin-left: 10px;
  margin-right: 10px;
  color: #888888;
}

.bread li:last-child:after {
  content: ""; /* 最後のliの後ろには区切り文字を表示しない */
}

See the Pen
パンくずリスト Part5 by aiiro (@aiiro29)
on CodePen.

スポンサーリンク