このページの本文へ
ナビゲーション

サンプルダウンロード

トップページ > サンプルダウンロード > 法則61 パンくずリストは階層構造を考えて作る

法則61 パンくずリストは階層構造を考えて作る

順序リストとCSSを組み合わせる

XHTMLソース

<ol id="topicPath">
 <li><a href="../">ホーム</a></li>
 <li><a href="./">製品情報</a></li>
 <li>製品名</li>
</ol>

CSSソース

ol#topicPath {
     margin: 10px 0;
}
ol#topicPath li {
     display: inline;
     line-height: 110%;
     list-style-type: none;
}
ol#topicPath li a {
     padding-right: 10px;
     background: url(img/glue.gif) no-repeat right center;
}

floatプロパティを使用する

CSSソース

ol#topicPath {
     float: left;
     width: 500px;
     margin: 10px 0;
}
ol#topicPath li {
     float: left;
     line-height: 1.1;
     list-style-type: none;
}
ol#topicPath li a {
     margin-right: 5px;
     padding-right: 10px;
     background: url(img/glue.gif) no-repeat right
     center;
}

alt属性を使用する

XHTMLソース

<p id="topicPath">
 <a href="../">ホーム</a>
 <img src="/img/entry/glue.gif" alt="の中の" />
 <a href="./">製品情報</a>
 <img src="/img/entry/glue.gif" alt="の中の" />
 製品名
</p>

CSSソース

p#topicPath {
     display: inline;
}
p#topicPath img {
     margin: 0 5px;
}

第4章 ユーザビリティを向上させるCSSデザインの法則 一覧

  1. 法則60 CSSのみでロールオーバー効果を実現する
  2. 法則61 パンくずリストは階層構造を考えて作る
  3. 法則62 文書構造が明確にわかる縦並びのメニューを作成する
  4. 法則63 CSSのみでドロップダウン型メニューを作る
  5. 法則64 クリック領域を大きくしてユーザビリティを高める
  6. 法則65 リンク先のファイルタイプを利用者に明示する
  7. 法則66 リンク先が新規ウィンドウで開くことを明示する
  8. 法則67 CSSで擬似フレームを作成する
  9. 法則68 代替スタイルシートを利用して複数のスタイルシートを切り替える
  10. 法則69 印刷に適した印刷用スタイルシートを作成する
  11. 法則70 フィードにCSSを適用してユーザビリティを向上させる

このページのトップへ


取り扱いオンラインショップ
  • インプレスダイレクト
  • Amazon
  • 楽天ブックス
  • Kinokuniya BookWeb
  • 7&Y セブンアンドワイ
  • livedoor BOOKS