Topスタイルシートの基本基本ルール > ブロックレベル要素とインライン要素

ブロックレベル要素とインライン要素

HTMLの要素には大きくわけて、ブロックレベル要素とインライン要素の2種類があります。

■ブロックレベル要素
文字単位ではなく、ある大きな範囲(ブロック)に大して構造や意味を付加する要素です。
「ブロックレベル要素」に分類されている要素は、一般的には要素の直後で自動的に改行されます。
たとえば、見出しや段落の後には必ず改行されます。

■インライン要素
文字単位で構造や意味を付加する要素です。
「インライン要素」に分類されている要素は、特に要素の直後に改行はされません。
インライン要素は主に、ブロックレベル要素の中に含まれます。
インライン要素の中にインライン要素を含むことは出来ますが、ブロックレベル要素を含むことは出来ません。


■DIV(ブロックレベル要素)とspan(インライン要素)の違い

同じ「くくる」要素、DIV(ブロックレベル要素)でspan(インライン要素)、ブロックレベルとインラインの違いを確認してみましょう。

■DIV(ブロックレベル要素)

DIV(ブロックレベル要素)の場合は、このようにブロックごとの設定が出来ます。

ブロックレベル要素なので、タグが終了すると改行されます。
文字の下に引かれるラインもその一行全てに色がついています。


■span(インライン要素)
ちなみにspan(インライン要素)の場合は、このように文章の特定の設定が出来ます。インライン要素なので、タグが終了しても改行されません。
文字の下に引かれるラインもspanタグで囲ってある場所のみに色がついています。

※主なブロックレベル要素、インライン要素
■ブロックレベル要素

 要素名 意味 デザイン
h1見出し文字サイズが大きく、太字に。前後に空行ができる
p段落前後に空行ができる
ulリストの範囲前後に空行ができる
liリストの項目文字の前に黒丸を付ける、行末で改行する
hr区切り領域を区切るための横罫線を引く
blockquote引用前後左右空行ができる
div汎用ブロック複数の要素を一まとめにくくる
■インライン要素
 要素名 意味 デザイン
strong強調太字にする
aリンク文字色を青色にし、下線を引く
img画像画像を表示する
br改行改行する
span汎用インライン文章内の特定の箇所をくくる

「ブロックレベル要素とインライン要素」関連本

Akasa Rira
みつけたきせき