この記事は翻訳が完了していません。 この記事の翻訳にご協力ください
パンくず（Breadcrumb）ナビゲーションは、来た道をたどって開始ページまで戻ることができるパンくずリストを提供することによって、ユーザーがウェブサイト内の自分の位置を理解するのに役立ちます。
要件
項目は通常、個々のページ間の階層を示すために、区切り文字を付けてインラインで表示されます。
レシピ
行った選択
このパターンは単純なフレックスレイアウトを使用してレイアウトされており、CSS の1行でナビゲーションがどのように行われるかを示しています。 区切り文字は CSS 生成コンテンツを使用して追加されます。 区切り文字は好きなものに変更することができます。
アクセシビリティへの懸念
aria-label 属性および aria-current 属性を使用して、このナビゲーションが何であるか、そして現在のページが構造のどこにあるのかをユーザーが理解できるようにしています。 詳細については関連リンクを参照してください。
ブラウザー実装状況
さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。
フレックスボックス
Update compatibility data on GitHub | デスクトップ | モバイル |
|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Android 版 Chrome | Android 版 Firefox | Android 版 Opera | iOSのSafari | Samsung Internet |
|---|
flex | Chrome
完全対応
29-
完全対応
29
-
完全対応
21
- 接頭辞付き -webkit- のベンダー接頭辞が必要
| Edge
完全対応
12-
完全対応
12
-
完全対応
12
- 接頭辞付き -webkit- のベンダー接頭辞が必要
| Firefox
完全対応
20-
完全対応
20
- 補足 Since Firefox 28, multi-line flexbox is supported.
- 補足 Before Firefox 32, Firefox wasn't able to animate values starting or stopping at
0. - 補足 Until Firefox 61, flex items that are sized according to their content are sized using
fit-content, not max-content. -
未対応
18 — 28
- 無効 From version 18 until version 28 (exclusive): this feature is behind the
layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config. -
完全対応
49
- 接頭辞付き -webkit- のベンダー接頭辞が必要
-
完全対応
48
- 接頭辞付き -webkit- のベンダー接頭辞が必要
- 無効 From version 48: this feature is behind the
layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
| IE
完全対応
11-
完全対応
11
- 補足 Internet Explorer 11 ignores uses of
calc() in the flex-basis part of the flex syntax. This can be worked around by using the longhand properties instead of the shorthand. See Flexbug #8 for more info. - 補足 Internet Explorer 11 considers a unitless value in the
flex-basis part to be syntactically invalid (and will thus be ignored). A workaround is to always include a unit in the flex-basis part of the flex shorthand value. See Flexbug #4 for more info. -
完全対応
10
- 接頭辞付き -ms- のベンダー接頭辞が必要
- 補足 Internet Explorer 10 and 11 ignore uses of
calc() in the flex-basis part of the flex syntax. This can be worked around by using the longhand properties instead of the shorthand. See Flexbug #8 for more info. - 補足 Internet Explorer 10 and 11 consider a unitless value in the
flex-basis part to be syntactically invalid (and will thus be ignored). A workaround is to always include a unit in the flex-basis part of the flex shorthand value. See Flexbug #4 for more info.
| Opera
完全対応
12.1 | Safari
完全対応
9-
完全対応
9
-
完全対応
6.1
- 接頭辞付き -webkit- のベンダー接頭辞が必要
| WebView Android
完全対応
4.4-
完全対応
4.4
-
完全対応
≤37
- 接頭辞付き -webkit- のベンダー接頭辞が必要
| Chrome Android
完全対応
29-
完全対応
29
-
完全対応
25
- 接頭辞付き -webkit- のベンダー接頭辞が必要
| Firefox Android
完全対応
20-
完全対応
20
- 補足 Since Firefox 28, multi-line flexbox is supported.
- 補足 Before Firefox 32, Firefox wasn't able to animate values starting or stopping at
0. - 補足 Until Firefox 61, flex items that are sized according to their content are sized using fit-content, not max-content.
-
未対応
18 — 28
- 無効 From version 18 until version 28 (exclusive): this feature is behind the
layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config. -
完全対応
49
- 接頭辞付き -webkit- のベンダー接頭辞が必要
-
完全対応
48
- 接頭辞付き -webkit- のベンダー接頭辞が必要
- 無効 From version 48: this feature is behind the
layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
| Opera Android
完全対応
12.1 | Safari iOS
完全対応
9-
完全対応
9
-
完全対応
7
- 接頭辞付き -webkit- のベンダー接頭辞が必要
| Samsung Internet Android
完全対応
2.0-
完全対応
2.0
-
完全対応
1.5
- 接頭辞付き -webkit- のベンダー接頭辞が必要
|
|---|
凡例
-
完全対応
- 完全対応
- 実装ノートを参照してください。
- 実装ノートを参照してください。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
関連情報