実践Web Standards Designのススメ

第5回 横並びメニューの区切り線を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要素のみボーダーを無しとする指定です。こちらの方がコードとしてはスマートかもしれません。

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

著者プロフィール

福島英児(ふくしまえいじ)

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

コメント

コメントの記入