戻る

HTML5のデフォルトスタイルシート

Webページにはブラウザによってデフォルトスタイルシートが適用されます。たとえば、<h1>でマークアップした見出しの前後に標準で改行が入るのも、デフォルトスタイルシートによってdisplay: blockの設定が適用されるためです。

マークアップした箇所を標準でどのような形で表示するかは、CSS2.1で大まかな指針が示されています。ブラウザはこの指針に従ってデフォルトスタイルシートを用意しており、HTML4.01やXHTML1.0で定義されたブロック要素に対してはdisplay: blockなどを適用し、前後に改行を入れた形で表示します。また、インライン要素に対しては、display: inlineなどを適用し、前後を改行しない形で表示します。


<h1>森の工房</h1>
<p>森の工房では、四季を通してイベントを開催したり、さまざまな商品の開発を行っています。</p>

森の工房

森の工房では、四季を通してイベントを開催したり、さまざまな商品の開発を行っています。

ブラウザによってデフォルトスタイルシートが適用され、<h1>や<p>でマークアップしたブロック要素の前後には改行が挿入されます。


一方、HTML5においても、これまで同じように各要素をブロック要素またはインライン要素として表示する指針が示されていますが、これまでのように「特定のカテゴリーに属する要素がブロック要素として表示される」とは考えることはできません。ただし、大まかな目安として、フロー・コンテンツからフレージング・コンテンツとメタデータ・コンテンツを除いた要素がブロック要素として、フレージング・コンテンツがインライン要素として表示されると考えることはできます。

この他、カテゴリーに属さないfigcaptionなどもブロック要素として表示することになっています。

なお、HTML4.01やXHTML1.0から使用している要素にはこれまでと同じようにデフォルトスタイルシートが適用されますので、HTML5に移行したからといって要素の表示が大きく変わることはありません。

HTML4.01やXHTML1.0では、<address>でマークアップした部分はブロック要素、<small>でマークアップした部分はインライン要素として表示されます。text-alignプロパティはブロック要素に対してのみ機能するプロパティですので、インライン要素である<small>に適用しても機能しません。そこで、ここではdisplay:blockを適用し、<small>でマークアップした部分をブロック要素として表示するようにしています。

HTML5では「ブロック要素」や「インライン要素」という分類はなくなっていますが、タグでマークアップした部分はHTML4.01やXHTML1.0のときと同じようにブロック要素またはインライン要素として表示されます。詳しくはP.57を参照してください。

現在のコンテンツ・モデルが確立される前の初期のHTML5には「ブロック要素」と「インライン要素」のカテゴリーがあったり、HTML5でつかされたsectionやarticleといった要素はブロック要素に分類されていました。

inserted by FC2 system