アマゾンプライムデー開催中!6/22まで 

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

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

特徴

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

HTML

<ul class="breadcrumb" 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.

【開催中】お得情報

デザイナーのUIメモ帳

レイアウト

ヒーローエリア

フォーム

画像

テキスト

ナビゲーション

コンテンツ

CSSデザインサンプル

モバイルサイト

Javascript

Google Map

Youtube

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