ブロックレベル要素とインライン要素とは？
HTMLに記述するタグなどの要素は
「ブロックレベル要素（Block-Level Elements）」と
「インライン要素（Inline Elements）」に
分類されます。
ブロックレベル要素とは？
「ブロックレベル要素」とは、
見出し、段落などのような文章を構成する骨格となる要素で
1つのブロック（かたまり）として扱われます。
ブロックレベル要素の例として、
<h1>-<h6>、<div>、<hr>、<p>
などがあります。
インライン要素とは？
「インライン要素」とは、
文章内の一部として扱われる要素のことで、
ブロックレベル要素内で、文字の修飾など一部を
変更する際に使用します。
インライン要素の例として、
<strong>、<em>、<b>、<i>、<small>、<big>、
<u>、<font>、<br>、<a>、<img>、<span>
などがあります。
インライン要素の例としてあげた<span>は、
以前、文字の背景色を指定する例で使用しました。
タグ自身は意味を持っていませんが、
部分的にスタイルを指定するためによく使用されます。
ブロックレベル要素とインライン要素の違い
ブロックレベル要素とインライン要素の違いを
例を用いて説明します。
文字の修飾をブロックレベル要素とインライン要素で
比較してみます。
以下のコードをテキストエディタで「bisample.html」(例)の
名前で保存しウェブブラウザで表示してみて下さい。
<!DOCTYPE html>
<html lang="ja">
<body style="line-height: 175%">
<br>
・ブロックレベル要素 pタグで文字色を赤に指定。<br>
<p style="color:red">
あいうえおかきくけこ<br>
文字文字文字文字<br>
</p>
<br><br>
・インライン要素 spanタグで部分的に文字色変更。<br>
<p style="color:red">
あいう<span style="color:blue">えおかき</span>くけこ<br>
文字文字<span style="color:lime">文字</span>文字<br>
</p>
<br>
</body>
</html>
＜表示例＞
・ブロックレベル要素 pタグで文字色を赤に指定。
・インライン要素 spanタグで部分的に文字色変更。
・ブロックレベル要素 pタグで文字色を赤に指定。
あいうえおかきくけこ
文字文字文字文字
・インライン要素 spanタグで部分的に文字色変更。
あいうえおかきくけこ
文字文字文字文字
実際このように表示されます。
これで、ブロックレベル要素とインライン要素との違い
がわかったのではないでしょうか。
コメント