Home > P.311

P.311

  • Last Modified: 2008年11月29日 22:29

このページは、株式会社技術評論社より刊行されている実践 Web Standards Design に記載しているソースコードのサンプルを呈示しています。 書籍該当部分と照合しやすいように前後の解説文も掲載していますが、あくまで照合用のため、適宜前後を省いたり内容を省略したりしています。 書籍を読みながら実際にサンプルを表示する際の補助資料として活用してください。

また、 XHTML ソースと CSS ソース、関連画像を含めた全サンプルの ZIP アーカイブ (3,104,743 Bytes) もダウンロードできます。 ( ZIP アーカイブには解説文は含まれていません。)

解説 (1)

トピックパスのマークアップをどうするかは作成者によって意見が分かれますが、ここではトップページからの経路を順に辿る、すなわち序列リストであるとみなして ol 要素でマークアップする例を紹介します。

Download(1)

XHTML

<body>
  <ol class="topic-path">
    <li><a href="/">合同会社LH3 Studio</a></li>
    <li><a href="/info/">企業概要</a></li>
    <li>マップページ</li>
  </ol>
  <h1>合同会社LH3 Studio</h1>
  <ul class="menu">
    <li><a href="/info/">企業概要</a></li>
    <li><a href="/news/">新着情報</a></li>
    <li><a href="/business/">業務内容</a></li>
    <li><a href="/works/">制作実績</a></li>
  </ul>
  <div class="section">
    <h2>マップページ</h2>
      <div class="section" id="access">
        <h3>交通アクセス</h3>
        <p><img src="access.jpg" width="400" height="300" alt="東京メトロ有楽町線○○方面から6番出口を出て△△通りを◇◇方面へ進みます。" /></p>
      </div>
      <div class="section" id="map">
        <h3>周辺図</h3>
        <p><img src="map.jpg" width="400" height="300" alt="濃い茶色の○○ビルの手前を右へ坂を上がり右正面の円形ガラス張りのビルです。" /></p>
      </div>
      
  </div>
  <dl>
    <dt>お問い合わせ・ユーザサポート</dt>
    <dd>東京都新宿区市谷左内町00-00 合同会社LH3 Studio</dd>
    <dd><address>Tel : 03-****-****</address></dd>
    <dd><address>Fax : 03-****-****</address></dd>
    <dd><address>Mail : <a href="mailto:info@lh3.jp">info@lh3.jp</a></address></dd>
  </dl>
</body>

解説 (2)

序列リストでマークアップして CSS で横並びにすることで、視覚的にも論理的にもトップページからの経路がわかりやすくなります。

CSS(1)

/* トピックパスのリストを横並びにする */
ol.topic-path li {
  display: inline;
}

/* 各リスト項目の前に > を挿入する。Safari対策でcontentプロパティの値はエスケープしておく。75ページ参照。 */
ol.topic-path li:before {
  content: "\000020\00003e\000020";
}

/* 先頭のリスト項目の前には何も挿入しない */
ol.topic-path li:first-child:before {
  content: normal;
}

解説 (3)

この手法はトピックパスに限らず、メニューリンクの横並びなど応用が利くので、いろいろな場面に活用できます。

CSS(2)

/* メニューリンクのリストを横並びにする */
ul.menu li {
  display: inline;
}

ul.menu li a {
  padding: 5px;
  color: #fff;
  background-color: #000;
  text-decoration: none;
}

ul.menu li a:hover { 
  color: #000;
  background-color: #ccf;
}

Download(2)

Comments:0

Comment Form

コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。

Trackbacks:0

TrackBack URL for this entry
http://lh3.jp/files/system/mtos/mt-tb.cgi/119
Listed below are links to weblogs that reference
P.311 from lh3.jp

Home > P.311

Tag Cloud
Categories
Archives
Search
Feeds
  • Feed by feedburner.jp

Return to page top