実践Web Standards Designのススメ
第5回 横並びメニューの区切り線をCSSで表現しよう
はじめまして,
『実践Web Standards Design』
良く見かける横並びメニュー
ウェブサイトのヘッダ部分やフッタ部分で,
今ご覧頂いているこのgihyo.
gihyo.
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>
確かにお手軽ではあるのですが,
区切り線をCSSのボーダーで
装飾に関することであれば,
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ソース
div#nav {
overflow: hidden; /* はみ出したものは隠す */
_height: 1.5em; /* IE6用。祖先要素に幅や高さが指定していれば必要ないので,今回のサンプルではなくても問題なし。*/
}
ul {
margin-left: -1px; /* 一番左のボーダー幅と同じ値の負のマージン */
}
li {
padding: 0 10px;
display: inline; /* 横並びにさせる */
border-left: 1px solid #fff; /* 区切り線 */
}
HTMLはシンプルにマークアップしておき,
ただし,
そこで,
ネガティブマージンを使わない方法
IE6に対応させなくても良いのであれば,
CSSソース
li {
padding: 0 10px;
display: inline; /* 横並びにさせる */
border-left: 1px solid #fff; /* 区切り線 */
}
li:first-child {
border: none; /* 親要素から見て一番目のli要素のボーダーを無しに */
}
親要素から見て一番目のli要素のみボーダーを無しとする指定です。こちらの方がコードとしてはスマートかもしれません。
そのウェブサイトのターゲットユーザーを見極めた上で,
記事中で紹介した書籍
-
実践Web Standards Design―Web標準の基本とCSSレイアウト&Tips
Web標準(Web Standards)に準拠したWebサイトを制作するための基礎知識と,実践的なレイアウト手法を徹底的に解説した,Web標準ガイドブック。新しい仕様やブラウザに...
バックナンバー
実践Web Standards Designのススメ
- 第6回 CSS3のセレクタを使用してみよう
- 第5回 横並びメニューの区切り線をCSSで表現しよう
- 第4回 実践 floatプロパティの学習法
- 第3回 floatプロパティを学習する上での3つのポイント
- 第2回 ブラウザ毎のサイトチェック環境を構築しよう
- 第1回 ガイドブックの選び方
関連記事
- 2020年3月第3週号 1位は,新しく現代的な色のトレンド7つ,気になるネタは,Chatwork,SaaSベンダー9社によるテレワーク支援のオンライン展示会
- 2020年2月第1週号 1位は,2020年のUIトレンドまとめ,気になるネタは,友達から資金募れるアプリ「polca」,10月1日に終了 「収益性などを検討した結果」
- 2020年1月第4週号 1位は,2020年に見ておくべき7つのUIトレンド,気になるネタは,Chromeアプリ,Windows,Mac,Linux向けは2020年12月にサポート終了
- 2019年11月第2週号 1位は,Font Awesomeのアイコンを全てカバーするラインアイコンのセット,気になるネタは,アクティブノイズキャンセリング対応の「AirPods Pro」が10月30日に登場 2万7800円
- 2019年10月第4週号 1位は,均整が取れているのにUIが間違って見える例と解決法,気になるネタは,初代ウォークマン“復刻”,カセットが画面で回る限定「A100」