HTML5 CSS3 クラスセレクタを使って「保険」をかける

nav, headerのようなHTML5の新要素をcssで装飾する際は、

header nav{ padding:10px; }

のように要素名をセレクタにするのが普通のやり方だが、これではマークアップするタグを変更する時(nav→div)や、新要素が廃止になってしまった時に、HTMLとCSSの双方を修正する必要がある。

そこで、nav要素にクラスをつけておいて(例:<nav class=”nav-topicpath”>)、

.nav-topicpath{ padding:10px; }

と指定してやると、nav→divと変更するような時にHTMLを変更するだけで済む。

参考書籍:HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応
HTML5+CSS3で作る 魅せるiPhoneサイト

コメントを残す