ナビゲーション実装 ②

CSS3を使ってもっと便利にスタイリング

HTML5の勧告とともに、CSS3も登場しさらに豊かなスタイルの実現が豊富になりました。紹介仕切れないほどのプロパティがありますが、便利でよく使う手法のみをピックアップしてみたいと思います。

最後の子要素

• 採用情報
• 利用規約
• 個人情報について
• 資料請求

よくフッターの下にちょこっと小さくある横並びのアレです。仕切り線を入れてみます。
(わかりやすく太めボーダーにしています)

• 採用情報
• 利用規約
• 個人情報について
• 資料請求

[code]
[css padlinenumbers="15px" [/css]
li{display:inline;border-left:5px solid #ccc;
padding-left:10px;padding-right:5px;}
[/code]
左側へボーダーを入れると、最後の「資料請求」へは、ボーダーが入らないことになります。そこで、便利なプロパティを使用します。

最初の要素、最後の要素だけにスタイルを当てるものです。child＝子を命名しているところが、面白いですね。資料請求(最後のli要素)だけに特別に右側へボーダーを入れてあげます。
[code]
li:last-child{border-right:5px solid #ccc;}
[/code]

• 採用情報
• 利用規約
• 個人情報について
• 資料請求

その他にも、順番を指定できるプロパティも存在します。E:nth-child(n)

【参考】CSS3リファレンス：http://www.htmq.com/selector/nth-child.shtml

テーブルセルが便利になりました

ナビゲーションは、主にリストタグを使用した方がよいと考えます。Webサイトは、ナビゲーション以外の部分でも、横に並べる仕様が非常に多く、floatプロパティを多様化する傾向にあります。また、必然的にその度にクリアフィックスを充てる必要があり、その部分がコーディングの際の混乱を伴うものかもしれません。

▶続きを見る(作成中)