はじめに
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サイトを構築できるでしょう。
