[CSS]パンくずの実装はどのようにするのがよいかの考察
パンくずは何要素で実装していますか？ ul要素？ ol要素？ p要素？ パンくずをどのように実装するのがよいかの考察を紹介します。 Exploring Markup for Breadcrumbs [ad#ad-2] 先日紹介したCSS-Tricksの「画像を使用しないでApple風のパンくずを作成するチュートリアル」に寄せられたコメントから考察されたもので、各ポイントを意訳したものです。 パンくずのマークアップの考察のきっかけ -ul要素で同列配置 パンくずのマークアップの考察 -ul要素で親子 パンくずのマークアップの考察 -ol要素で順序づけ パンくずのマークアップの考察 -セパレーターの使用 パンくずのマークアップの考察 -Googleを参考に パンくずのマークアップの考察 -HTML5の使用 パンくずのマークアップの考察 -おわりに パンくずのマークアップの考察のきっかけ -ul
[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></
パンくずリストのマークアップを色々考えてみる
久々普通のエントリーだ。 なんか、デジパの中の人が、Web標準の日々に出ちゃうらしいです。 この人→ネットのサラダボウル: Web標準の日々に参加します。 皆色々やってるなぁ～、ボクも負けてられんなぁ～ ソレとは関係ないけど、デジパの社員は半分くらいの人がブログ書いてるんすけど、Ｂ to Ａ 赤坂で働くWebコンサルタントの日記とかのエントリーで逆立ちって。。。。 皆色々やってるなぁ～、ボクも負けてられんなぁ～ さて、そろそろ本題に。 以前のエントリーでパンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種ってのを書いたんだけど、その後色んなサイトで書かれてたパンくずリストのエントリーや、コーディングコンテストのソース覗いてたりして、今後どうやってマークアップしてこうかなぁ～って悩んでた今日この頃。 そんな訳で、良いか悪いかは別として色々考えてみた。 ul要素でやってみ
hxxk.jp - アーカイブテンプレートとパンくずリスト
アーカイブテンプレートにパンくずリストを配置する これは weblog に限ったことではありませんが、現在表示されているページが、そのサイトのどの位置にあたるものなのかよく分からなくなるということがあります。 それを防ぐために、サイトのトップページから現在表示されているページへの経路のリンクを並べるという手法があります。 これは一般的にパンくずリストと呼ばれ、大抵はページ上部などの見易い位置に配置されます。 実は HTML / XHTML には link 要素というものが用意されていて、これを適切に記述すればこのようなパンくずリストは不要……というか蛇足となるのですが、現状では大部分のブラウザが対応しているわけではないというところです。 今回はそのパンくずリストについての論議はともかく、どういった形式のリストを作るか、それをどうテンプレートに組み込むかを解説しようと思います。 また、この部
パンくず詳解 | コリス
パンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイント、クラシックなものや進化したパンくずのショーケースなどをSmashing Magazineから紹介します。 Breadcrumbs In Web Design 以下、その意訳です。 パンくず ナビゲーションは、大量のページを保持するウェブサイトで、ナビゲーション機能を拡張することができます。 パンくずの大きな有用性は、ウェブサイトの訪問者が上の階層に移動する際、少ないアクションで実現させることです。 このことはウェブサイトのセクションやページのファインダビリティ（見つけやすさ）を改善するものとなります。 また、ランディングページ（検索などから訪れた最初のページ）にも非常に効果的で、ユーザーの現在の場所を明示するだけでなく、文脈のヒントとなるインフォメーションも提供します。 What is a bre
【CSS】CSSで実装するちょっと凝ったパンくずリスト | バシャログ。
地味なパーツながら実は便利。そのためコーディングをする機会も多いと思われるのが「パンくずリスト」です。 シンプルなコーディングでちょっと気の利いた「パンくずリスト」を実現する方法をご紹介します。 パンくずリストの XHTML のサンプルは以下です。とてもシンプルです。 <ol id="topicPath"> <li class="home"><a href="hoge">ホーム</a></li> <li><a href="hoge">アニメ</a></li> <li><a href="hoge">ガンバの冒険</a></li> <li><em>ボーボ</em></li> </ol> サンプル1 とてもシンプルなパンくずリスト とてもシンプルなパンくずリストのサンプルです。 ホーム アニメ ガンバの冒険 ボーボ CSS はこちら ol#topicPath { margin: 20px 0;
[CSS]シンプルでクールなデザインのパンくずを実装するスタイルシート
グラデーションを使用したアローでデザインされた、シンプルでクールなパンくずのスタイルシートをVeerle's blogから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <ul id="crumbs"> <li><a href="#">Home</a></li> <li><a href="#">Main section</a></li> <li><a href="#">Sub section</a></li> <li><a href="#">Sub sub section</a></li> <li>The page you are on right now</li> </ul> </textarea>
パンくずリストがベストとは限らない | WWW WATCH
最近ウチの会社の中の人も書いていました、Web サイトのナビゲーションとしてよく使われる 「パンくずリスト」 （Topic Path なんて言い方もしますね） ... 最近ウチの会社の中の人も書いていました、Web サイトのナビゲーションとしてよく使われる 「パンくずリスト」 （Topic Path なんて言い方もしますね） ですが、マークアップの仕方はどういう方法がいいとか、そもそもパンくずリストって必要なの？ なんて話まで、最近よく目にする気がします。 個人的にパンくずリストはサイト ID （ロゴなどですね） に対するトップページへのリンク設定同様の慣習みたいな感覚で、すべての人とは言わないまでも一定の認知はされていると考えていますので、サイト構築の際は基本的に要件に含めるようにしています。 で、今回はパンくずリストが必要か？ とか、パンくずリストのマークアップはどのような方法が妥当か
Simple scalable CSS based breadcrumbs | Veerle's blog
You are looking at archived content. The hot new stuff is happening at Veerle's blog 3.0. You should check it out! A few days ago I was implementing breadcrumbs in a website I’m working on. Not that I sincerely believe every site needs this, but on some occasions and to some users breadcrumbs are practical. Anyhow, it gave me the idea to write an article about it because it’s been a while since I
我的春秋: パンくずリストのマークアップ
ちょっと前に パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種（CSS HappyLife）というエントリーが盛況でしたが、今日はパンくずナビゲーションの論理構造面を補強する意味も込めて、(X)HTML マークアップの例を、サイト構造やサイトの目的に応じて、いくつか挙げてみました。CSS の話まで入れると長くなるので、今回は（も？）(X)HTML マークアップに話を絞ります。CSS については、特にセレクタまわりが結構 変わってしまいますが、ひとまず、HirasaWa さんのエントリーなどを参照してください。（気が向いたら、別エントリーを立てますけど、実際に書くかどうかは未定。） 階層型構造（tree structure） ［2006-02-11 追記］ 石川一靖さんより、「セマンティクスを重視するならa要素にrel/rev属性を加えてリンクの関係性を明示するのが
パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種｜CSS HappyLife
普通のエントリー久々な気がする今日この頃。 今回はトピックパスとかパンくずリストなんて呼ばれてる、ちょっと規模の大きいサイトでは日常茶飯事で見かけるアレのサンプル色々です。 サンプルの前に #main .entryBody #topicPath_01 とかってなってますけど、#main .entryBody はウチのサイトの都合で優先順位上げの為にやってるんで、コピったりする場合はいらない感じです。 #main .entryBody #topicPath_01 { margin:10px 0; } #main .entryBody #topicPath_01 li { display:inline; line-height:110%; list-style-type:none; } #main .entryBody #topicPath_01 li a { padding-right:10
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Breadcrumb CSS - Appleに習うパンくずデザインCSS - youmos
http://youmos.com/news/css_step_menu
Apple風のクールなパンくずリストをクールに実装するサンプル:phpspot開発日誌