Loading...
HTMLにおけるインライン要素とブロックレベル要素

HTMLにおけるインライン要素とブロックレベル要素

公開
2018.08.08
更新
2018.10.29
  • 講座

  • HTML

本講座ではHTMLにおけるインライン要素とブロックレベル要素を見ていきましょう。

見分け方

HTMLにおけるインライン要素とブロックレベル要素の見分け方は「自動で改行するかどうか」です。

インライン要素

インライン要素となるHTMLタグをいくつか挙げてみます。

  • a
  • em
  • input

では、これらのタグを使って自動で改行するか確認してみましょう。

これは<a href="#">aタグ</a>です。
これは<em>emタグ</em>です。
これは<input type="text" value="">inputタグです。

インライン要素

自動で改行していませんね。
これでインライン要素であることが確認できました。

インライン要素の前後で改行させる場合は、文章と同様にbrタグを使います。

これは<a href="#">aタグ</a>です。<br>
これは<em>emタグ</em>です。<br>
これは<br>
<input type="text" value=""><br>
inputタグです。<br>

ブロックレベル要素

ブロックレベル要素

ブロックレベル要素となるHTMLタグをいくつか挙げてみます。

  • h
  • p
  • li

では、これらのタグを使って自動で改行するか確認してみましょう。

<h1>これはh1タグです。</h1>
<p>これはpタグです。</p>
<ul>
  <li>これは</li>
  <li>liタグ</li>
  <li>です</li>
</ul>

インライン要素改行

全て自動で改行されていますね。
これでブロックレベル要素であることが確認できました。

そのbrタグは必要?

文章を改行するのにはbrタグを使います。
文章の段落を表すために、brタグを連続して使って空行を入れることもできます。
しかし、この方法は適切ではありません。

文章の段落を表すのにはpタグが最適です。
pタグはParagraphs(段落)の頭文字、まさに段落を表すためのタグです。

pタグはブロックレベル要素のため、改行が自動で入ります。
これに加えて、CSSで余白を追加するmarginを設定することで、brタグを連続して使うのと同じように空行を入れることができます。

これで不要なbrタグはなくすことができます。

装飾に適したHTMLタグ

インライン要素とブロックレベル要素で、それぞれ装飾に適したHTMLタグが存在します。

インライン要素はspanタグ、 ブロックレベル要素のdivタグです。

pタグのようにHTMLタグはそれぞれ意味を持ち、それに適した場所で使うことが望ましいのですが、このspanタグとdivタグに限っては意味を持たず、装飾のためだけに使用することができます。

まとめ

本講座では

  • インライン要素とブロックレベル要素の見分け方
  • brタグの連続使用に代わる方法
  • 装飾に適したインライン要素タグとブロックレベル要素タグ

について学びました。

HTMLにおけるインライン要素とブロックレベル要素の違いは「自動で改行するかどうか」、たったこれだけですが、これを知っていないと思うようにコーディングをすることは出来ません。

しっかりとマスターしましょう!

次の記事

これまでの記事

  • ふむふむ・・・

イア

イア(er)
独学する美少女エンジニア

当サイトのナビゲーターであり、あなたと一緒に勉強する同志でもあります。
今はナビゲーターとして未熟のため、ひたすら勉強をさせています。

隠します!