実践Web Standards Designのススメ

第5回　横並びメニューの区切り線をCSSで表現しよう

Web Standards, Design, CSS, 横並びメニュー

この記事を読むのに必要な時間：およそ 2 分

はじめまして，福島英児と申します。『⁠実践Web Standards Design』刊行に合わせた著者3人による短期集中リレー連載ということで，この第5回を担当させていただくことになりました。

『実践Web Standards Design』の刊行にあたり，可能であれば追加したかったTipsがあったのですが，結局そのまま載せなかったネタを今回ご紹介したいと思います。

良く見かける横並びメニュー

ウェブサイトのヘッダ部分やフッタ部分で，横並びになっている縦線で区切られたナビゲーションメニューを見かけることがあるかと思います。

今ご覧頂いているこのgihyo.jpのヘッダ部分にも，画像を使った横並びのナビゲーションが配置されているのが分かります。

図1　画像を使った横並びのナビゲーション（gihyo.jp）

図1　画像を使った横並びのナビゲーション（gihyo.jp）

gihyo.jpでは画像を使っていますが，画像を使わずにテキストのみでマークアップした際，各メニューの縦の区切り線はどのように実現すれば良いのでしょうか。

HTMLに直接書いてしまうのは避けよう

時々見かけるのが，HTMLに直接区切り線を書いてしまっているパターンです。

HTMLソース

<div id="nav">
  <ul>
    <li><a href="http://example.com/contact/">お問い合わせ</a> |</li>
    <li><a href="http://example.com/recruit/">採用情報</a> |</li>
    <li><a href="http://example.com/profile/">会社情報</a> |</li>
    <li><a href="http://example.com/sitemap/">サイトマップ</a> |</li>
    <li><a href="http://example.com/sitepolicy/">サイトポリシー</a></li>
  </ul>
</div>

図2　HTMLに直接区切り線を書いてしまっている

図2　HTMLに直接区切り線を書いてしまっている

確かにお手軽ではあるのですが，装飾に関する視覚的な表現を直接HTML側に記述してしまうことは，できれば避けたいところです。もし，リデザインでこのメニューが横並びで無くなった場合には，区切り線が意味不明になってしまうのでHTMLにも手を入れなければいけません。その場合，HTML文書が100ページあれば，100ページ全て修正しなければいけませんので，効率も良くありません。

区切り線をCSSのボーダーで

装飾に関することであれば，CSSで実現させるのがベストな選択です。CSSのborderプロパティを使ってこの区切り線を実現してみましょう。

HTMLソース（サンプル：inline-list.html）

<ul>
  <li><a href="http://example.com/contact/">お問い合わせ</a></li>
  <li><a href="http://example.com/recruit/">採用情報</a></li>
  <li><a href="http://example.com/sitemap/">会社情報</a></li>
  <li><a href="http://example.com/sitepolicy/">サイトマップ</a></li>
  <li><a href="http://example.com/privacypolicy/">サイトポリシー</a></li>
</ul>

CSSソース（サンプル：inline-list.html）

div#nav {
  overflow: hidden; /* はみ出したものは隠す */
  _height: 1.5em; /* IE6用。祖先要素に幅や高さが指定していれば必要ないので，今回のサンプルではなくても問題なし。*/
}

ul {
  margin-left: -1px; /* 一番左のボーダー幅と同じ値の負のマージン */
}

li {
  padding: 0 10px;
  display: inline; /* 横並びにさせる */
  border-left: 1px solid #fff; /* 区切り線 */
}

HTMLはシンプルにマークアップしておき，CSSでli要素の右側にボーダーを表示するように指定します。

ただし，このままでは一番左側にもボーダーが表示されてしまいます。あくまで，各メニュー間の区切り線としたいので，一番左側のボーダーは無くす必要があります。

そこで，ul要素に対して負のマージン（ネガティブマージン）を指定し，親要素であるdiv要素のoverflow:hiddenによって一番左側のボーダーが隠れて非表示となる仕組みです。

ネガティブマージンを使わない方法

IE6に対応させなくても良いのであれば，:first-child擬似クラスを使った方法も考えられます。

CSSソース（サンプル：inline-list2.html）

li {
  padding: 0 10px;
  display: inline; /* 横並びにさせる */
  border-left: 1px solid #fff; /* 区切り線 */
}

li:first-child {
  border: none; /* 親要素から見て一番目のli要素のボーダーを無しに */
}

親要素から見て一番目のli要素のみボーダーを無しとする指定です。こちらの方がコードとしてはスマートかもしれません。

そのウェブサイトのターゲットユーザーを見極めた上で，どの方法を選択すれば良いのか決めると良いでしょう。

Web Standards, Design, CSS, 横並びメニュー

著者プロフィール

福島英児（ふくしまえいじ）

DTPおよびウェブ制作に携わる。2003年末頃から(X)HTML+CSSによる制作へ興味を持ち，spacer.gifからの脱却に目覚める。現在は主にディレクション業務に関わる傍ら，CSS関連などの記事を雑誌へ寄稿。著書に『Web標準テキスト（2）CSS』（技術評論社）がある。