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

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

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

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

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

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

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>

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

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

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

<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>

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擬似クラスを使った方法も考えられます。

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

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

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

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