パンくずリスト CSSデザインサンプル 2選

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

特徴

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

前提

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


<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="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="2" />
    </li>
    <li class="breadcrumb-item">
        ページ
    </li>
</ul>

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.

おすすめ書籍

  • このエントリーをはてなブックマークに追加

デザイナーのUIメモ帳

レイアウト

Google Map

ヒーローエリア

画像

CSSデザインサンプル