「要素」って何？ブロック要素とインライン要素を一発で見分ける方法！

2025年4月26日

ブロック要素とインライン要素の違いを、例え話や図で超簡単に解説します！

タグと要素のちがい

「タグ」と「要素」は、どう違うのだろうか？正確には
・タグとは → <p> , <h1> , <span> , <a> , <br> などの記号をいいます。
・要素とは → <p> 内容 </p> , <h1> 内容 </h1> , <span> 内容 </span> などのように、開始タグ＋内容＋閉じタグ全体をいいます

ブロック要素とインライン要素のちがい

結論から言うと…
ブロック要素→勝手に改行されるやつ！
・改行され、下に並んで表示される
インライン要素→改行されずに横に並ぶやつ！
・文章の途中に自然に表示される

ブロック要素とは

ブロック要素とは、改行され、下に表示される、勝手に改行されるヤツです！
では、実際にコード見て確認してみましょう！
以前作成した「絶品カレーレシピの作り方」というhtmlコードで説明します。
・htmlコード参照記事はこちらから→実践！初めてのHTMLで「絶品カレーのレシピ」作ってみよう！

<body> の中に文字だけを書いても

縦に並べた文字でも、タグを使った要素が無いと、文字は横並びになります。

では次に、<h1>タグ、<img>タグ、<p>タグ、<ol>タグを使って要素を作ります

横並びだった文字が改行されて見やすくなりました。

勝手に改行してくれる要素がブロック要素です！

ここに使われている要素全てがブロック要素のように思えますが、実は１つだけインライン要素があります！
それは赤い点線で囲った<img>タグを使った要素はインライン要素です。
ここでは、<img>タグ以外は全てブロック要素となります。

インライン要素とは

インライン要素とは、文章の途中に自然に表示される、改行されずに横に並ぶヤツです！
・先ほど紹介したインライン要素の<img>タグですが、見た目は改行されているように見えるだけで、実際には改行されていません！

<img>タグはインライン要素

<img>タグを使って、大きサイズの写真を２枚並べてみました。写真は改行されて縦に並んでいます。が、ルール上では改行されていません。

では、同じように<img>タグ使って、小さいサイズの写真を２枚並べてみました。写真が改行されずに横並びに並んでいます。このように、写真はサイズによって改行されているように見えますが、<img>タグはインライン要素です

他のインライン要素

インライン要素とは、文章の途中に自然に表示される、改行されずに横に並ぶヤツです！
他のインライン要素をご紹介しましょう！
たとえば、作り方のところで、「火を止めて」のところを強調させます。

<span>タグを使って要素を作ります。
CSSデザインは、インラインCSSを使ってstyleを適用します。

Web表示させると、改行されずに、文章の途中に自然に表示されています。これがインライン要素です。
なので<span>タグはインライン要素になります。

・今回は文字を太字にするために、CSSの<style>タグで太字にする　font-weigh ; bold ; を使いましたが、文字を太字にするための、<strong>タグも、インライン要素になります。
・他にも、リンクを設定する<a>タグも改行されないので、インライン要素になります。