[CSS]画像を使用しないでApple風のパンくずを作成するチュートリアル

階層を区切る三角のデザインが特徴的なApple風のパンくずを同一の色相でカラーリングしたものを実装するチュートリアルを紹介します。 三角の箇所は画像を使用しないで、CSSで実装されています。 Breadcrumb Navigation with CSS Triangles デモページ [ad#ad-2] HTML -マークアップ パンくずはリスト要素で実装します。 シンプルでクリーンに実装するために、各アイテムにはclassを使用しません。 HTML <ul class="breadcrumb"> <li><a href="#">トップページ</a></li> <li><a href="#">第二階層</a></li> <li><a href="#">第三階層</a></li> <li><a href="#">第四階層</a></li> <li><a href="#">現在位置</a></

[hinashiki]

これは良い

[sippo_des]

かわいい

[Miyakey]

今時なので、できればNo画像でFinishしたいもんです。QT:[CSS]画像を使用しないでApple風のパンくずを作成するチュートリアル | コリス

[vitaminsii]

使ってみたい！

[yuta0121]

パン屑リストデザイン

[drumsco]

擬似要素 nth-child って知らなかったわ。 CSS3なのかな？

[hat2da]

三角のパンくずの作り方。

[diveintounlimit]

Opera、Safari、Firefox、Chromeで表示確認（最新のみ）IEは9を含めてNG。つまり一般サイトには利用不可。または別のスタイルシートを噛ませるなどの分岐が必要。

[o_hiroyuki]

cssのみでパン屑を作る

[hp-seo]

こういうのいい！

[Chisei]

画期的

[XIAORING]

apple breadscrumbs topic path

[nakanushi]

パンくず

[michael-unltd]

ぱんくず

[fumix-hat]

これは良いなー。今度どこかで使おう。

[celestialstar]

CSS

[dbfireball]

こりゃ便利。

[syanbi]

これはありがたい

[propsA]

パンくず

[adsty]

同一の色相でカラーリングしたものを実装するチュートリアル。

[thyself2005]

コリスにしては珍しく日本語による解説、これはブクマせざるを得ない。（使わないとしても）

[takkecy]

パンくず

[uk-ar]

階層を区切る三角のデザインが特徴的なApple風のパンくずを同一の色相でカラーリングしたものを実装するチュートリアルを紹介します。 三角の箇所は画像を使用しないで、CSSで実装されています。

[hatakazu93]

技術

[machupicchubeta]

css design ui

[pistaro]

Apple風パンくず

[k_static]

あとで読もう

[yukisachiko]

画像を使わずに矢印のような三角形を描画する方法

[yukimi1977]

これは便利。

[htn_50koma]

三角をcssで作ってる