HTMLタグのブロックレベル要素とインライン要素とは?

HTML

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

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タグで部分的に文字色変更。

 あいうえおかきくけこ
 文字文字文字文字


実際このように表示されます。

これで、ブロックレベル要素インライン要素との違い
がわかったのではないでしょうか。

コメント

タイトルとURLをコピーしました