CSSとタグ要素（IMGタグの特異性）【CSS関連】 / Studio Rikiy

HTMLタグは、若干の例外はあるもののそのほとんどがブロック要素(block element)、インライン要素(inline element)と呼ばれる要素のどちらかに分類される。
一般的にはブラウザ表示時に前後に改行がはいるものがブロック要素、いらないものがインライン要素と区別されるが、CSSを使いこなす上ではこの両者の違いをもう少し具体的に掘り下げて学ぶ必要があるだろう。

まずは両者ついてRikiyなりにまとめてみた。

ブロック要素 (block element)

概要

ボックス要素とも呼ばれる。
高さと幅を持ち、ほぼ全てのスタイルプロパティが使用できる最上位要素。

特長

ほぼ全てのプロパティが有効
width,height,margin,paddingを持ち、タグ前後に改行が入る
witdhとheightを指定がない場合、widthは親要素に、heightは子要素に依存する

該当タグ

P / H1 / H2 / H3 / H4 / H5 / H6 / UL / OL / DIR / MENU / PRE / DL / DIV / CENTER / NOSCRIPT / NOFRAMES / BLOCKQUOTE / FORM / ISINDEX / HR / TABLE / FIELDSET / ADDRESS / MULTICOL

インライン要素 (block element)

概要

ライン（行）の中で使用できることからこの名称が来たのではないかと推測され、テキスト自体もインライン要素にあたる。
高さ、幅、マージンを持たず、対応するプロパティがブロック要素よりも少ない。HTMLの原則としてインライン要素はインライン要素しか囲むことができないため、ブロック要素の親要素になることはなく、常にソース構造の最小単位を形成に使用される。

特長

CSSプロパティwidth,height,margin,floatの指定が無効
CSSプロパティpaddingは左右のみ指定が有効
widthとheightは子要素に依存するが、数値としては持たない

該当タグ

文字列 / TT / I / B / U / S / STRIKE / BIG / SMALL / EM / STRONG / DFN / CODE / SAMP / KBD / VAR / CITE / ABBR / ACRONYM / A / APPLET / OBJECT / FONT / BASEFONT / BR / SCRIPT / MAP / Q / SUB / SUP / SPAN / BDO / IFRAME / INPUT / SELECT / TEXTAREA / LABEL / BUTTON / BLINK / EMBED / LAYER / ILAYER / NOLAYER / NOBR / WBR / RUBY / RB / RP / RT / SPACER

イメージ要素 (image element)

概要

正しくはインライン要素に属するが、wightとheightを固定値で持つという他の同要素と異なる特性があるため、CSSの観点からはインライン要素とは別物として扱われる。

特長

インライン要素でありながらCSSプロパティwidth,height,margin,floatの指定が有効
インライン要素でありながらCSSプロパティpaddingの指定が無効
witdhとheightを指定がない場合、widthとheightはその画像自身のサイズに依存する
CSSプロパティdisplayの指定が無効

該当タグ

IMG

CSSの観点から考えるタグ要素の大きなポイントは、IMGタグの存在である。
IMGタグ基本的にはインライン要素に該当するわけだが、もちろんそれはそれで正しい。「ライン（行）の中で使用でき」「前後に改行を作らない」、inline要素としての条件は満たしているのだから。しかし同時に、全タグの中で唯一width、heightを固定値で持つという、他のタグにはない特性を持ち合わせた存在でもある。この特性がCSSにおいてIMGが従来のインラインと一線を画す存在たらしめている原因なのだ。

前述のまとめの通りインライン要素は基本的に高さと幅を持たない。
だがインライン要素がそれらを持つとどうなるのか？本来インライン要素では無効なCSSプロパティ、width,height,margin,floatが使えるようになるのである。paddingもIEでは無効だがその他のブラウザでは上下左右全て有効（外に広がるようにかかっていく）というバグじみた挙動を示す。言い例えるならばインライン要素とブロック要素の中間のような存在になっており、もはや完全に他のインライン要素とは別物であると言わざるを得ない。
この認識を持っているか否かはスタイルの構築に大きな影響を及ぼすことだろう。

各要素の特性についてご説明したところでもうひとつ、タグ要素と密接に関わりのあるスタイルプロパティ「display」に関するお話もしておく。
displayは対象の要素を指定することができるプロパティで、これを使うと例えばブロック要素をインライン要素に、インライン要素をブロック要素として扱うことができるようになるのだがこれもイメージ要素に対しては無効となる。特性上イメージ要素はイメージ要素以外のものになれないということらしい。

ちなみにHTMLのルール上インライン要素はブロック要素を内包することができないわけだが、このdisplayプロパティを活用することでその状況を擬似的に再現することができる。これもまたやり方如何でスタイル構築の幅を広げる可能性を持つので、いろいろと使い道を模索してみるのもよいだろう。

(2007年02月20日)