CSS パンくずリスト デザインテンプレート 2選

サイトのどこにいるのかを示してくれるパンくずリストのCSSデザインサンプルです。

特徴

• レスポンシブ対応
• SEO対応

HTML

<ul class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
    <li class="breadcrumb-home" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <a href="" itemprop="item"><span itemprop="name">ホーム</span></a>
        <meta itemprop="position" content="1" />
    </li>
    <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <a href="" itemprop="item"><span itemprop="name">カテゴリ</span></a>
        <meta itemprop="position" content="2" />
    </li>
    <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <a href="" itemprop="item"><span itemprop="name">サブカテゴリ</span></a>
        <meta itemprop="position" content="3" />
    </li>
    <li class="breadcrumb-item">
        ページ
    </li>
</ul>

使用しているHTMLは下記です。タイプによってCSSだけ変わります。

• itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"
  パンくずのアイテムに指定
• itemprop="item"
  パンくずのリンクに指定
• itemprop="name"
  パンくずの名前に指定

1.　折り返しタイプ

See the Pen
breadcrumb by Aquarium (@aquarium)
on CodePen.

パンくずアイテムが横幅を超えると、アイテムが下の行に折り返すパンくずリストです。

CSS

See the Pen
breadcrumb by Aquarium (@aquarium)
on CodePen.

2.　スクロール

See the Pen
breadcrumb – scroll by Aquarium (@aquarium)
on CodePen.

パンくずアイテムが横幅を超えると、スクロールできるようになるパンくずリスト。

CSS

See the Pen
breadcrumb – scroll by Aquarium (@aquarium)
on CodePen.

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選