ブロックレベル要素とインライン要素
HTMLの要素には大きくわけて、ブロックレベル要素とインライン要素の2種類があります。
■ブロックレベル要素
文字単位ではなく、ある大きな範囲(ブロック)に大して構造や意味を付加する要素です。
「ブロックレベル要素」に分類されている要素は、一般的には要素の直後で自動的に改行されます。
たとえば、見出しや段落の後には必ず改行されます。
■インライン要素
文字単位で構造や意味を付加する要素です。
「インライン要素」に分類されている要素は、特に要素の直後に改行はされません。
インライン要素は主に、ブロックレベル要素の中に含まれます。
インライン要素の中にインライン要素を含むことは出来ますが、ブロックレベル要素を含むことは出来ません。
■DIV(ブロックレベル要素)とspan(インライン要素)の違い
ブロックレベル要素なので、タグが終了すると改行されます。
文字の下に引かれるラインもその一行全てに色がついています。
同じ「くくる」要素、DIV(ブロックレベル要素)でspan(インライン要素)、ブロックレベルとインラインの違いを確認してみましょう。
■DIV(ブロックレベル要素)
DIV(ブロックレベル要素)の場合は、このようにブロックごとの設定が出来ます。
ブロックレベル要素なので、タグが終了すると改行されます。
文字の下に引かれるラインもその一行全てに色がついています。
■span(インライン要素)
ちなみにspan(インライン要素)の場合は、このように文章の特定の設定が出来ます。インライン要素なので、タグが終了しても改行されません。
文字の下に引かれるラインもspanタグで囲ってある場所のみに色がついています。
※主なブロックレベル要素、インライン要素
■ブロックレベル要素
要素名 | 意味 | デザイン |
h1 | 見出し | 文字サイズが大きく、太字に。前後に空行ができる |
p | 段落 | 前後に空行ができる |
ul | リストの範囲 | 前後に空行ができる |
li | リストの項目 | 文字の前に黒丸を付ける、行末で改行する |
hr | 区切り | 領域を区切るための横罫線を引く |
blockquote | 引用 | 前後左右空行ができる |
div | 汎用ブロック | 複数の要素を一まとめにくくる |
要素名 | 意味 | デザイン |
strong | 強調 | 太字にする |
a | リンク | 文字色を青色にし、下線を引く |
img | 画像 | 画像を表示する |
br | 改行 | 改行する |
span | 汎用インライン | 文章内の特定の箇所をくくる |