CSSを勉強し始めた人はまずこの概念を覚えなくてはいけません。 また、CSSのみならず、HTMLでの要素の親子関係を覚える上でもこの概念を知っておくと理解しやすいと思います。 Webページ作成において基本的な考え方であるこれらをこの記事で少し詳しく紹介します。
これは段落です。これは段落です。これは段落です。これは段落です。これは段落です。これは段落です。
これは段落です。これは段落です。ここは強調されています。これは段落です。これは段落です。これは段落です。
これは段落です。これは段落です。これは段落です。これは段落です。これは段落です。これは段落です。
これは段落です。これは段落です。ブロックレベル要素中での
改行です。これは段落です。インライン要素中での
改行です。これは段落です。
ブロックレベル要素には青いボーダーが、インライン要素には赤いボーダーを付けています。 Mozillaはこれを正しく表示できています。以下がその結果です。
ブロックレベル要素とは昔風の解説で言うなら、改行を伴う要素です。 上記の例では青いボーダーの要素です。
HTML4.01 Strictでは次の要素がこれにあたります。
ブロックレベル要素の特徴は、親要素の内容幅全体に広がって配置されます(上記の例では黒い二重のボーダーが親要素のボーダーです)。 つまり、ブロックレベル要素の横に他の要素は(通常フローなら)並べることができません。 このような特徴からボーダーが(見えて)ない時の様子から「改行を伴う」と言われています。
CSS2ではブロックレベル要素は矩形(四角形)で表現されると考えると簡単に理解できるかと思います。
ブロックレベル要素に対し、文中の一部分にだけ意味づけや、 書式設定を行うものをインライン要素と言います。 上記の例では赤いボーダーの要素のことです。
例として以下のものがあります。
上記の例にあるように、要素中に改行が混じるとやや複雑な形で表示されます。 これはインライン要素によって生成されるボックスは改行によって複数に分割されることがあるためです。 この分割された面にはborder, margin, paddingはその表示が行われません。
また、インライン要素は(原則として)ブロックレベル要素をその子孫要素として持つことができない、と覚えておいてください。 この件に関しては別の記事で詳しく説明します。
インライン要素のように改行は伴わないのですが、幅(width)や高さ(height)を持つ、 インラインブロック要素と呼ばれるものもあります。 見た目に関する決まり事はブロックレベル要素、文法上はインライン要素、といったイメージが近いと思います。
具体的には次の要素です。
| ブロックレベル要素 | インライン要素 | |
|---|---|---|
| 高さ(height) | 指定可 | 指定不可 |
| 幅(width) | 指定可 | 指定不可 |
| 左右のマージン(margin) | 要素の左右に存在 | 最初の文字の左側と、最後の文字の右側に存在 |
| 左右のパディング(padding) | 要素の左右に存在 | 最初の文字の左側と、最後の文字の右側に存在 |
| 左右のボーダー(border) | 要素の左右に存在 | 最初の文字の左側と、最後の文字の右側に存在 |
| 上下のマージン(margin) | 要素の上下に存在 | 無視され、レイアウトに影響は無い |
| 上下のパディング(padding) | 要素の上下に存在 | 全ての行に存在し、ボーダーの位置に影響が出る |
| 上下のボーダー(border) | 要素の上下に存在 | 各行に存在するが、他の行に重なる場合がある |
このようにCSSデザインにおいて重要なこれらのプロパティで、これだけの差があります。 特に、古いWindows版IEではwidthとheightがインライン要素に適用できてしまったり、 IE6の標準準拠モードであっても、インライン要素のボーダーが仕様と食い違って分割面にも表示されているので注意が必要です。
<p>
インライン要素より先に<br>出現するテキスト。
<span style="margin:2.5em;border:1px solid red;padding:1em;color:green;">
インライン要素に対するborder,<br>margin,<br>paddingの適用例
</span>
インライン要素より後に<br>出現するテキスト。
</p>
インライン要素より先に
出現するテキスト。
インライン要素に対するborder,
margin,
paddingの適用例
インライン要素より後に
出現するテキスト。
これらはCSS2でdisplayプロパティを使えば変更できます。
display: inline;, display: block;とすれば、
それぞれインライン要素、ブロックレベル要素として表示され、
マージンの適用方法等もdisplayプロパティに合わせられます。
ただし、当然のことながら、これによってHTMLでの親子関係に影響があるわけではありません。 インライン要素であるspan要素の子にブロックレベル要素のdiv要素を記述できるわけではありません。 あくまで見た目の定義を変更できるのみで、要素の性格はCSSの仕様ではなく、HTMLの仕様によって定義されています。
