パンくずリストの作り方【コピペ可】

パンくずリスト完成イメージとコード

• ホーム
• 大カテゴリ
• 中カテゴリ
• 小カテゴリ
• ページタイトルページタイトルページタイトルページタイトルページタイトルページタイトル

html

<ul id="breadcrumb">
    <li><a href="#">ホーム</a></li>
    <li><a href="#">カテゴリ</a></li>
    <li>ページタイトル</li>
</ul>

CSS

#breadcrumb{
    letter-spacing: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    white-space: nowrap;
}
#breadcrumb li{
    display: inline-block;
    font-size: 75%;
    opacity: 0.7;
}
#breadcrumb li::after{
    content: ">";
    display: inline-block;
    margin: 0 0.5em;
}
#breadcrumb li:last-child::after{
    content: none;
}

パンくず特徴

パンくずは必要ではあっても重要ではないものです。

よってデザインを簡素にし、文字サイズを小さくし、色も薄くしています。

また、数行も幅を取るようなものでもありません。

特にスマホで重要なファーストビューをパンくずに数行も取られるわけにはいきません。

よってパンくずが一行に収まらないときは横スクロールを発生させ、おさめています。

html解説

htmlは単純にul liの関係です。

カテゴリが増えればliを追加するだけです。

リンクが必要ならaタグで囲います。

「＞」はCSSで追加するため記述は不要です。

CSS解説

ulの「overflow-x: auto」は はみ出た部分を横スクロールさせます。

「white-space: nowrap」は自動改行させないようにさせます。「overflow-x: auto」とあわせて、文字数が多いときは横スクロールされるようになります。

横スクロールさせたいない場合はこの2つを外しましょう。

スマホの時だけ横スクロールさせたいときはメディアクエリを利用しましょう。

例

#breadcrumb{
    letter-spacing: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media(max-width:750px){
    #breadcrumb{
        overflow-x: auto;
        white-space: nowrap;
    }
}

この場合PC版では、はみ出たときli単位で改行されます。

ページタイトルが長いとき、1行目は各カテゴリが並び、2行目がページタイトルになる、といった具合です。

liには「display: inline-block」を指定し横並びにしています。

「＞」はafterを使っています。beforeとafterは要素に文字や要素を追加できるセレクタです。

ただし、最後のliの後ろの「＞」は不要です。「:last-child」で最後のliを指定し、「content: none」で消しています。

【まとめ】パンくずリストの作り方

html

<ul id="breadcrumb">
    <li><a href="#">ホーム</a></li>
    <li><a href="#">カテゴリ</a></li>
    <li>ページタイトル</li>
</ul>

CSS

#breadcrumb{
    letter-spacing: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    white-space: nowrap;
}
#breadcrumb li{
    display: inline-block;
    font-size: 75%;
    opacity: 0.7;
}
#breadcrumb li::after{
    content: ">";
    display: inline-block;
    margin: 0 0.5em;
}
#breadcrumb li:last-child::after{
    content: none;
}

以上、パンくずリストの作り方でした。