CSSでパンくずリストを作成!完全ガイド10選 – JPSM

CSSでパンくずリストを作成!完全ガイド10選

CSSで作成されたパンくずリストのサンプルイメージCSS

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

このサービスは複数のSSPによる協力の下、運営されています。

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

また、理解しにくい説明や難しい問題に躓いても、JPSMがプログラミングの解説に特化してオリジナルにチューニングした画面右下のAIアシスタントに質問していだければ、特殊な問題でも指示に従い解決できるように作ってあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

Webサイトを使いやすくするには、ナビゲーションが重要です。

今回は、CSS初心者でも簡単に作れる「パンくずリスト」を徹底解説します!

10個の実用的なサンプルコードを用意しました。

応用例もあるので、Webサイトのナビゲーションが劇的に向上します!

●パンくずリストとは?

パンくずリストは、Webサイト内での現在地を示すナビゲーションの一種です。

訪問者がどのページにいるのか、どの階層にいるのかをわかりやすく表示することで、サイトの使いやすさが向上します。

パンくずリストは主に、ホームページから現在のページまでの階層をリンク付きで表示するものです。

●パンくずリストの基本的な作り方

まずは、基本的なパンくずリストの作り方を解説します。

HTMLとCSSを組み合わせて、簡単に実装できます。

○HTMLの記述

次のように、リスト要素を使ってパンくずリストを作成します。

<ol class="breadcrumb">
  <li><a href="/">ホーム</a></li>
  <li><a href="/category">カテゴリ</a></li>
  <li>現在のページ</li>
</ol>

○CSSの記述

次に、CSSでスタイルを適用します。

.breadcrumb {
  display: flex;
  list-style: none;
  padding: 0;
}

.breadcrumb li {
  margin-right: 5px;
}

.breadcrumb li:not(:last-child)::after {
  content: ">";
  margin-left: 5px;
}

.breadcrumb li:last-child {
  font-weight: bold;
}

これで、基本的なパンくずリストが完成です。

●応用例1:カスタムデザイン

デザインをカスタマイズして、オリジナルのパンくズリストを作りましょう。

ここでは、背景色やフォントカラーを変更する例を紹介します。

○HTMLの記述

前述のHTMLコードをそのまま使用します。

<ol class="breadcrumb">
  <li><a href="/">ホーム</a></li>
  <li><a href="/category">カテゴリ</a></li>
  <li>現在のページ</li>
</ol>

○CSSの記述

次のように、背景色やフォントカラーを指定します。

.breadcrumb {
  display: flex;
  list-style: none;
  padding: 0;
  background-color: #f8f9fa;
  border-radius: 5px;
}

.breadcrumb li {
  margin-right: 5px;
  padding: 5px 10px;
}

.breadcrumb li:not(:last-child)::after {
  content: ">";
  margin-left: 5px;
}

.breadcrumb li:last-child {
  font-weight: bold;
  background-color: #e9ecef;
  color: #212529;
}

これで、カスタムデザインのパンくずリストが完成です。

●応用例2:アイコンを追加

アイコンを追加して、パンくずリストをさらに見やすくしましょう。

ここでは、Font Awesomeを利用したアイコンの追加方法を紹介します。

○Font Awesomeの導入

次のコードをHTMLの<head>タグ内に追加します。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha384-jp7C7Dp0eaytD6Hs4nar4G0Mz4lZbE0BQD8PCzgN/2DZ6GnVMq/7N/36WULBzVZ/" crossorigin="anonymous">

○HTMLの記述

先ほどのHTMLコードにアイコンを追加します。

<ol class="breadcrumb">
  <li><a href="/"><i class="fas fa-home"></i> ホーム</a></li>
  <li><a href="/category"><i class="fas fa-folder"></i> カテゴリ</a></li>
  <li><i class="fas fa-file"></i> 現在のページ</li>
</ol>

○CSSの記述

前述のCSSコードをそのまま使用します。

.breadcrumb {
  display: flex;
  list-style: none;
  padding: 0;
  background-color: #f8f9fa;
  border-radius: 5px;
}

.breadcrumb li {
  margin-right: 5px;
  padding: 5px 10px;
}

.breadcrumb li:not(:last-child)::after {
  content: ">";
  margin-left: 5px;
}

.breadcrumb li:last-child {
  font-weight: bold;
  background-color: #e9ecef;
  color: #212529;
}

これで、アイコン付きのパンくずリストが完成です。

●応用例3:レスポンシブデザイン

レスポンシブデザインを適用して、スマートフォンやタブレットでも見やすいパンくずリストにしましょう。

○HTMLの記述

前述のHTMLコードをそのまま使用します。

<ol class="breadcrumb">
  <li><a href="/"><i class="fas fa-home"></i> ホーム</a></li>
  <li><a href="/category"><i class="fas fa-folder"></i> カテゴリ</a></li>
  <li><i class="fas fa-file"></i> 現在のページ</li>
</ol>

○CSSの記述

次のように、メディアクエリを追加してレスポンシブデザインに対応させます。

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  background-color: #f8f9fa;
  border-radius: 5px;
}

.breadcrumb li {
  margin-right: 5px;
  padding: 5px 10px;
}

.breadcrumb li:not(:last-child)::after {
  content: ">";
  margin-left: 5px;
}

.breadcrumb li:last-child {
  font-weight: bold;
  background-color: #e9ecef;
  color: #212529;
}

@media (max-width: 767px) {
  .breadcrumb li {
    font-size: 12px;
  }

  .breadcrumb li:not(:last-child)::after {
    margin-left: 3px;
  }
}

これで、レスポンシブ対応のパンくずリストが完成です。

まとめ

本記事では、CSS初心者でも簡単に作れるパンくずリストの作り方を徹底解説しました。

基本的な作り方から応用例まで、10個の実用的なサンプルコードを用意しました。

これらのサンプルコードを参考に、自分のWebサイトに合ったパンくずリストを実装してみてください。

効果的なナビゲーションを提供することで、訪問者にとって使いやすいWebサイトを構築できるでしょう。