【 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にも効果ありの機能です。

スマホサイトでは表示しないことが多いので、この辺りも注意しましょう！！