レスポンシブデザインに対応したパンくずリスト

レスポンシブデザインに対応したパンくずリストは、画面の大きさに合わせて形を変える「道しるべ」です。
大きなパソコン画面では横にすっと並んで見やすく、小さなスマホ画面では折り返して窮屈にならないように工夫されています。
だから、どんな端末を使っていても「いま自分がサイトのどこにいるのか」「次にどこへ進めばいいのか」が迷わず分かるんです。
まるで地図が自動で縮んだり広がったりして、常に見やすい形で道案内してくれるようなものですね。

モバイルでもレイアウトが整うパンくずリスト

これがまた難しいんですよね。
パンくずリストそのものはさほどでもないのですが、レスポンシブデザインに対応したものとなると、改行位置とか＞の形をした記号の位置とか。
意外にも作らない人が多いから、パンくずリストの意義についても説明したい…
ちょっと優しい言葉で、どなたにでも分かるように、このページの解説文について考え直してみました。
では、ソースコードを見ていきましょう。

パンくずリストを作るfainpan.css


/* ●パンくずリスト */
.breadcrumb {
 display: flex;
 flex-wrap: wrap;
 list-style: none;
 padding: 10px 2%;
 width: 95%;
 background-color: #f8f9fa;
 border-radius: 5px;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 font-size: 0.7em;
}

.breadcrumb-item {
 display: flex;
 align-items: center;
}

.breadcrumb-item+.breadcrumb-item::before {
 content: "›";
 color: #6c757d;
 margin: 0 6px;
 flex-shrink: 0;
}

.breadcrumb-item a {
 text-decoration: none;
 color: #1A73E8;
 transition: color 0.3s ease;
}

.breadcrumb-item a:hover {
 color: #0078D4;
 text-decoration: underline;
}

.breadcrumb-item.active {
 font-weight: bold;
 color: #6c757d;
}

全体のコードを見やすくするためにセレクターごとに分け、各プロパティを説明しますね。

.breadcrumb（パンくず全体の箱）


.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 10px 2%;
  width: 95%;
  background-color: #f8f9fa;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-size: 0.7em;
}

display: flex: 子要素（.breadcrumb-item）を横並びにし、柔軟に配置できる「フレックスレイアウト」を使います。
flex-wrap: wrap: 横幅に収まりきらないときに、次の行に折り返します。スマホでも崩れにくくなります。
list-style: none: ul/olの先頭の「・」「数字」などの箇条書きマーカーを消します。
padding: 10px 2%: 内側の余白を上・下10px、左右は親幅に対する2%にします。窮屈さを防ぎます。
width: 95%: 親コンテナに対して横幅を95%に設定。両端に少し余白を残す設計です。
background-color: #f8f9fa: 薄いグレーの背景色で、コンテンツとの境界をやさしく見せます。
border-radius: 5px: 角を5pxだけ丸くします。カード風の柔らかい印象になります。
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1): 下方向にほんのり影をつけ、浮いて見える立体感を出します。
font-size: 0.7em: 親要素に対して70%の文字サイズに。パンくずは補助情報なので少し小さめにします。

.breadcrumb-item（各項目の並び方）


.breadcrumb-item {
  display: flex;
  align-items: center;
}

display: flex: 各項目の内部もフレックスにして、中のテキストや区切り記号との整列を安定させます。
align-items: center: 垂直方向の中央揃え。高さがズレても文字が真ん中に揃います。

区切り記号（›）の挿入


.breadcrumb-item+.breadcrumb-item::before {
  content: "›";
  color: #6c757d;
  margin: 0 6px;
  flex-shrink: 0;
}

.breadcrumb-item+.breadcrumb-item::before: 直前に別の .breadcrumb-item がある項目の「前」に、装飾（擬似要素）を追加します。つまり項目間の区切りだけに記号を入れます。
content: "›": 区切り記号として「›」を表示します。CSSだけで文字を挿入できます。
color: #6c757d: 区切り記号の色を落ち着いたグレーに。主役ではないため控えめにします。
margin: 0 6px: 区切り記号の左右に6pxの余白。文字が詰まらず読みやすくなります。
flex-shrink: 0: 狭い幅でもこの記号が潰れて小さくならないように固定します。

リンクの見た目とホバー時の演出


.breadcrumb-item a {
  text-decoration: none;
  color: #1A73E8;
  transition: color 0.3s ease;
}

.breadcrumb-item a:hover {
  color: #0078D4;
  text-decoration: underline;
}

text-decoration: none: デフォルトの下線を消します。パンくずの静的表示をスッキリさせます。
color: #1A73E8: 通常時のリンク色。視認性が良く、クリックできることが伝わります。
transition: color 0.3s ease: 色の変化を0.3秒でなめらかに。急な切り替えによる違和感を減らします。
a:hover color: #0078D4: マウスを載せた時に少し濃いブルーへ。インタラクションの手応えを演出します。
a:hover text-decoration: underline: ホバー時だけ下線を出して「今ここに注目している」ことをわかりやすくします。

現在のページ（アクティブ項目）


.breadcrumb-item.active {
  font-weight: bold;
  color: #6c757d;
}

font-weight: bold: 現在地（最後の項目）を太字で強調します。
color: #6c757d: クリック不可の「現在位置」はグレーで控えめに。リンクと差別化します。

このコードは「パンくずリスト」という道案内を見やすく整えるための工夫です。
文字は横に並んでいて、もし幅が足りなくなったら自然に次の行へ移動します。
背景は淡いグレーで、角を丸めて影を落とすことでカードのようにふわっと浮かんで見えるんです。
項目の間には「›」という矢印が自動で入り、進む道筋がひと目で理解できます。
リンクは青色で表示され、マウスを重ねると濃いブルーに変わり下線も現れるので、クリックできることが直感的に伝わります。
最後の項目は太字でグレーにしてあり、「ここが今いる場所だよ」と静かに示してくれる仕掛けになっています。

パンくずリストの概要

これは賛否両論なんですが、私は付けるようにしています。
私が閲覧者として他のサイトに行くときもパンくずリストを頼りにするからね。

パンくずリストを作るhtmlコード


<div>
   <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/">Home（グラスタの場所一覧表〜入手範囲別〜）</a></li>
    <li class="breadcrumb-item"><a href="site_create.html">個人サイト制作：サイトマップ</a></li>
    <li class="breadcrumb-item active" aria-current="page">ナビゲーションメニューをCSS・JavaScriptで用意する</li>
   </ol>
</div>

パンくずリストを付けるメリットは、キリがないけどまとめるなら次のようになりますね。

セマンティクスの向上: リストタグを使用することで、パンくずリストがリスト状のナビゲーション要素であることを明示的に示すことができます。
検索エンジンやスクリーンリーダーなどがコンテンツの意味を正しく理解しやすくなります。
アクセシビリティの向上: スクリーンリーダーなどの補助技術は、リストタグを使って構造化された情報を正確に読み上げることができます。
視覚障害者にとって使いやすいWebサイトを作成することができます。
アクセシビリティは注意した方が良いですよ？
後回しにしないほうが良いと思う。
スタイルの一貫性: リストタグを使用することで、CSSを用いて統一されたスタイルを簡単に適用できます。
例えば、リストアイテム間のスペースや区切り線などのスタイリングが容易になります。
私のサイトにあるパンくずリストも、もうちょい工夫してみようかな？
でもあんまりゴテゴテしてるデザインは好きじゃないんですよね…
やはり自分で見てて満足できるクオリティーじゃないと。
モバイルフレンドリー: リストタグを使ったパンくずリストは、レスポンシブデザインにも適しています。
異なる画面サイズに応じて、リストの表示を柔軟に調整することができます。
コードのシンプル化: リストタグを使うことで、コードがシンプルで読みやすくなり、メンテナンスや更新がしやすくなります。

次はパンくずリストのCSSですね。
これは上記のような理由からリストタグを使いますが、表示の仕方をCSSでコントロールする必要があります。

パンくずリストを作るCSS

※ここにあるコードは一昔前のやつです。最新版はこのページの上にあるコードですよ。
大差ないんだけどね。気になる方はファンサイト制作のためのアトリエからジャンプできるコードが最新版です。

パンくずリストを作るfainpan.css


/* パンくずリスト全体のスタイル */
.breadcrumb {
    display: flex; /* フレックスボックスで横並びに配置 */
    list-style: none; /* リストのスタイルをなしにする */
    padding: 10px 15px; /* 内側の余白を調整 */
    margin: 0; /* 外側の余白をなしにする */
    background-color: #f8f9fa; /* 背景色を追加 */
    border-radius: 5px; /* 角を丸くする */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 影を追加 */
    font-size: 0.7em; /* フォントサイズを調整 */
}

/* 各パンくずリストアイテムの間に区切りを追加 */
.breadcrumb-item+.breadcrumb-item::before {
    content: ">"; /* 区切り文字を設定 */
    padding: 0 10px; /* 区切り文字の左右に余白を追加 */
    color: #6c757d; /* 区切り文字の色を設定 */
}

/* パンくずリスト内のリンクのスタイル */
.breadcrumb-item a {
    text-decoration: none; /* リンクの下線をなしにする */
    color: #1A73E8; /* リンクの文字色を設定 (Google blue) */
    transition: color 0.3s ease; /* ホバー時の色変化にアニメーションを追加 */
}

/* リンクをホバーしたときのスタイル */
.breadcrumb-item a:hover {
    color: #0078D4; /* リンクの文字色を変更 (Microsoft blue) */
    text-decoration: underline; /* リンクに下線を追加 */
}

/* 現在のページのパンくずリストアイテムのスタイル */
.breadcrumb-item.active {
    font-weight: bold; /* 文字を太字にする */
    color: #6c757d; /* 文字色を設定 */
}

リストと言うと、箇条書きを連想しますよね？
ここで list-style: none; を使うと、リストアイテムのデフォルトの箇条書きスタイル（通常はディスクや数字のようなマーカー）が取り除かれます。
こういうのリストアイテムとか言ったりするけど、パンくずリストでは箇条書きのマーカーなしで表示するのが良いと思います。

とはいえ、このプロパティはリストアイテムの配置方法には影響しません。
そのままではリストのアイテム自体は箇条書き風の縦並びのままです。
パンくずリストはアイテムを横並びに配置したいので、追加のCSSスタイルを使用する必要があります。
例えば、次のようにフレックスボックスを使ってアイテムを横並びに配置できます。


.breadcrumb {
display: flex; /* フレックスボックスで横並びに配置 */
list-style: none; /* リストのスタイルをなしにする */
padding: 10px 15px;
margin: 0;
background-color: #f8f9fa;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
font-size: 0.7em;
}

この場合、display: flex; がリストアイテムを横並びに配置する役割を果たします。

サイトマップ

全ページをリスト化したサイトマップも用意していますが、けっこうなページ数があります。
下記の「カテゴリー分けサイトマップ」のほうが使いやすいでしょう。

アナザーエデン関連ページ・サイトマップ
アナザーエデンの強敵戦やストーリーコンテンツのリスト、お勧めバッジなどを掲載したコーナーです。
期間限定のない普通のRPGですので、初心者でも安心して続けていけるゲームとなっています。
もっとも重要なグラスタについては、場所別に網羅した表があります。

個人サイトのホスティングとコンテンツ作成
個人でウェブサイトを作るなら時間をかけて。
HTML・CSS・JavaScriptの書き方はもちろん、無料かつ広告なしでホームページを作る方法を掲載したコーナーです。
Webデザインやレイアウトについても書いてあります。

魚釣りなどアウトドアのエリア
ゲームとパソコンだけじゃなく、アウトドアも趣味なんです。
このコーナーでは魚釣りの記録とか、魚料理のレシピ、はたまたサイクリングなどなど。
アウトドアに関連するコンテンツが詰め込まれています。