はじめまして、福島英児と申します。『実践Web Standards Design』刊行に合わせた著者3人による短期集中リレー連載ということで、この第5回を担当させていただくことになりました。 『実践Web Standards Design』の刊行にあたり、可能であれば追加したかったTipsがあったのですが、結局そのまま載せなかったネタを今回ご紹介したいと思います。 良く見かける横並びメニュー ウェブサイトのヘッダ部分やフッタ部分で、横並びになっている縦線で区切られたナビゲーションメニューを見かけることがあるかと思います。 今ご覧頂いているこのgihyo.jpのヘッダ部分にも、画像を使った横並びのナビゲーションが配置されているのが分かります。 図1 画像を使った横並びのナビゲーション(gihyo.jp) gihyo.jpでは画像を使っていますが、画像を使わずにテキストのみでマークアップした
![第5回 横並びメニューの区切り線をCSSで表現しよう:実践Web Standards Designのススメ|gihyo.jp … 技術評論社](https://cdn-ak-scissors.b.st-hatena.com/image/square/40c004b748567dad793630ee1223515c400862ba/height=288;version=1;width=512/https%3A%2F%2Fgihyo.jp%2Fassets%2Fimages%2FICON%2F2008%2F286_wsd.png)