WordPress テーマ 自作のススメ

CSSでデザインする際に、HTMLタグ要素が
ブロックレベル要素であるかインライン要素であるかを認識しておかないと、
どツボにハマります。

※以下解説はCSSで明示的にスタイルを与えていない場合の挙動になります
※かなり誤解を伴う表現になっているかもしれませんが、
　 分かりやすさを優先していますので、ご了承ください
 

【ブロックレベル要素】
ブロックレベル要素は、改行を伴うタグ要素です。
この要素に属するタグを書くと自動的に改行され、要素が縦に並びます。
以下のようなタグがブロックレベル要素に属します。

ブロックレベル要素は、width を指定しないと (親要素の) 幅いっぱいに表示されます。
ブロックレベル要素は基本改行を伴い、他の要素が横に並ばないので、
目一杯の幅をとってしまっても問題ないからこうなっているではないかと
私は理解しています。(※すごく誤解のある表現で、あくまで私なりの理解です)
名前の通り、「ブロック」として要素の大外に対してCSSプロパティが効きますので、
margin, padding, width, height, border, background 等の指定がしやすいです。
 

【インライン要素】
逆に、インライン要素は改行を伴わないタグ要素です。
文中の一部分にだけ意味を付けたり、強調したりするために
書式設定を行うための要素です。
以下のようなタグがインライン要素に属します。

これらの要素は、途中で改行が入ると意図せぬ表示になってしまうかもしれません。
要素の外枠として認識されるのは、それぞれの文の上下、始点である文の左端、
終点である文の右端となります。
途中で改行が入ると、要素そのものが分割されますので、
分割された継ぎ目に対しては border, margin, padding プロパティは効きません。
 

【ブロックレベル要素とインライン要素の違い】
以下にそれぞれの要素に border を指定して違いを見てみます。

<div style="margin: 5px; padding: 5px; border: 1px solid #3300ff;">これはブロックです。改行はありません。</div>
<div style="margin: 5px; padding: 5px; border: 1px solid #3300ff;">これはブロックです。<br />
改行があります。</div>
<div style="margin: 5px; padding: 5px; border: 1px solid #3300ff;">これはブロックです。<span style="margin: 3px; padding: 3px; border: 1px solid #ff0000;">これはインラインです。改行はありません。</span></div>
<div style="margin: 5px; padding: 5px; border: 1px solid #3300ff;">これはブロックです。<span style="margin: 5px; padding: 3px; border: 1px solid #ff0000;">これはインラインです。<br />
改行があります。</span></div>

インライン要素の改行で分割された面には、border, margin, padding が適用されません。
また、インライン要素に指定した padding は、行の高さには影響しません。
 

【インラインブロック要素】
インライン要素と同様、改行を伴わないタグ要素ですが、
幅 (width) や高さ (height) 指定することができる要素です。
見た目に関する指定がブロックレベル要素と同様にできるインライン要素
といったところでしょうか。
以下のようなタグがインラインブロック要素に属します。

【displayプロパティ】
HTMLでデザインを構成していく際には、
ブロックレベル要素とインライン要素 (＋インラインブロック要素) の
CSSプロパティ「width, height, border, margin, padding」等の
表示の違いに気をつけてコーディングしていく必要がありますが、
CSSでdisplayプロパティを使えばこれらの挙動を変更することができます。
display: block; / display: inline; / display: inline-block; とすれば、
それぞれブロックレベル要素、インライン要素、インラインブロック要素
と同様に表示の指定を行うことができるようになります。
 

これらの違いを理解すれば、デザインを構成していくのにかなり役立つと思います。