実践Web Standards Designのススメ
第5回 横並びメニューの区切り線をCSSで表現しよう
はじめまして,福島英児と申します。『実践Web Standards Design』刊行に合わせた著者3人による短期集中リレー連載ということで,この第5回を担当させていただくことになりました。
『実践Web Standards Design』の刊行にあたり,可能であれば追加したかったTipsがあったのですが,結局そのまま載せなかったネタを今回ご紹介したいと思います。
良く見かける横並びメニュー
ウェブサイトのヘッダ部分やフッタ部分で,横並びになっている縦線で区切られたナビゲーションメニューを見かけることがあるかと思います。
今ご覧頂いているこの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>
確かにお手軽ではあるのですが,装飾に関する視覚的な表現を直接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のススメ
- 第6回 CSS3のセレクタを使用してみよう
- 第5回 横並びメニューの区切り線をCSSで表現しよう
- 第4回 実践 floatプロパティの学習法
- 第3回 floatプロパティを学習する上での3つのポイント
- 第2回 ブラウザ毎のサイトチェック環境を構築しよう
- 第1回 ガイドブックの選び方
-
実践Web Standards Design―Web標準の基本とCSSレイアウト&Tips
Web標準(Web Standards)に準拠したWebサイトを制作するための基礎知識と,実践的なレイアウト手法を徹底的に解説した,Web標準ガイドブック。新しい仕様やブラウザに...
-
フッターのリンクの書き方
サイトを制作する際、かなりの確率でフッター部分にメニューがついてますよね。 横並...
Tracked : #1 これからゆっくり考L (2008/12/07, 23:03)


