トップページ | HTML5編・目次

●新要素をブロック要素としてブラウザに読み込ませる


 HTML4.01やXHTMLのように、それまでは要素を大別するとブロック要素、インライン要素の2つに分類されてきましたが、HTML5では対象となるコンテンツごとに分類するコンテンツモデル(カテゴリー)という概念に変わりました。

 HTML5で新しく追加された要素は、その新要素に未対応のブラウザの場合、インライン要素のように表示されます。通常、HTML文書にインライン要素を並べて記述していくと横並びに表示されますがブロック要素を記述していくとブロック要素ごとに前後が改行され、縦列に表示されます。すべてのブラウザが同じ解釈をして同じ表示をすれば問題ないのですがHTML5の新要素に未対応のブラウザもあります。つまり、状況によってはブラウザによってレイアウトくずれが生じる可能性があるということです。ブラウザごとのスタイルのレイアウトくずれを防ぐためには新要素の表示形式をCSSでブロック要素として表示させます。それにはCSSのdisplayプロパティを使います。displayプロパティは要素の表示形式を変えるプロパティです。初期値は“inline”ですが、“block”の値でインライン要素をブロック要素のように表示させることが可能です。

【CSS】
header, footer, nav, section, article, aside {
display:block;
}

 手元にあるブラウザでheader要素とfooter要素のみですが確認してみると、Internet Explore(v8)、Firefox(v3.6)、Opera(v11)、Google chrome(v12)の中ではOpera、Google chromeのブラウザがheader要素、footer要素をブロック要素として認識しましたがIE(v8)とFirefoxがheader要素とfooter要素をインライン要素として認識しました。しかし、この設定をすることにより、いずれのブラウザでもheader要素とfooter要素をブロック要素のように表示しました。Safariは確認していませんがHTML5にもっとも対応しているブラウザはSafariですから問題ないでしょう。

 ただし、v8以下のIEは新要素に対応していないのでCSSの設定より先に新要素を読み込ませるJavaScriptのライブラリの設定が指定されている必要があります。CSSの指定はあとから指定したものが優先されるのでこの設定は実際にはhead要素内で、かつ、JavaScriptのライブラリの後に記述する必要があります。

【HTML5】○
<head>
 ・・・
<!--[if lt IE 9]>
<script src="任意のディレクトリ名/html5shiv.js"></script>
<![endif]-->
<style>
header, footer, nav, section, article, aside {
display:block;
}
</style>
</head>

 指定するにあたっては適用させたい新要素分だけ追加してください。いずれにしろ、新要素にスタイルを適用させたい場合、CSSの設定よりJavaScriptライブラリの設定を先に読み込ませることを頭に入れておきましょう。

■参考

サイト・目次 | HTML5編・目次

Copyright (C) 2011 http://www.xml.vc/ All Rights Reserved.