はじめまして、福島英児と申します。『実践Web Standards Design』刊行に合わせた著者3人による短期集中リレー連載ということで、この第5回を担当させていただくことになりました。
『実践Web Standards Design』の刊行にあたり、可能であれば追加したかったTipsがあったのですが、結局そのまま載せなかったネタを今回ご紹介したいと思います。
良く見かける横並びメニュー
ウェブサイトのヘッダ部分やフッタ部分で、横並びになっている縦線で区切られたナビゲーションメニューを見かけることがあるかと思います。
今ご覧頂いているこのgihyo.jpのヘッダ部分にも、画像を使った横並びのナビゲーションが配置されているのが分かります。
gihyo.jpでは画像を使っていますが、画像を使わずにテキストのみでマークアップした際、各メニューの縦の区切り線はどのように実現すれば良いのでしょうか。
HTMLに直接書いてしまうのは避けよう
時々見かけるのが、HTMLに直接区切り線を書いてしまっているパターンです。
確かにお手軽ではあるのですが、装飾に関する視覚的な表現を直接HTML側に記述してしまうことは、できれば避けたいところです。もし、リデザインでこのメニューが横並びで無くなった場合には、区切り線が意味不明になってしまうのでHTMLにも手を入れなければいけません。その場合、HTML文書が100ページあれば、100ページ全て修正しなければいけませんので、効率も良くありません。
区切り線をCSSのボーダーで
装飾に関することであれば、CSSで実現させるのがベストな選択です。CSSのborderプロパティを使ってこの区切り線を実現してみましょう。
HTMLはシンプルにマークアップしておき、CSSでli要素の右側にボーダーを表示するように指定します。
ただし、このままでは一番左側にもボーダーが表示されてしまいます。あくまで、各メニュー間の区切り線としたいので、一番左側のボーダーは無くす必要があります。
そこで、ul要素に対して負のマージン(ネガティブマージン)を指定し、親要素であるdiv要素のoverflow:hiddenによって一番左側のボーダーが隠れて非表示となる仕組みです。
ネガティブマージンを使わない方法
IE6に対応させなくても良いのであれば、:first-child擬似クラスを使った方法も考えられます。
親要素から見て一番目のli要素のみボーダーを無しとする指定です。こちらの方がコードとしてはスマートかもしれません。
そのウェブサイトのターゲットユーザーを見極めた上で、どの方法を選択すれば良いのか決めると良いでしょう。