HTMLのインライン要素とは？ブロック要素との違いを中心に解説

HTMLのインライン要素とブロック要素の違いがいまいち分からない、そんな悩みはありませんか？

インライン要素の仕組みを理解していないと、CSSでの設定が上手くいかないことがありますよね。

今回は、インライン要素のせいで無駄な時間を取られたくない、という方のために、

について、解説していきます。

この記事を読めば、HTMLのインライン要素で悩む時間が短縮できますよ。ぜひ最後まで読んでくださいね。

インライン要素とブロック要素について

HTMLには、インライン要素とブロック要素という分類があります。

この2つには、どんな特徴があるのでしょうか？

まず、ブロック要素とは、文章を構成するブロックとして扱われます。

<div>ブロック要素は<p class="highlight">まとまった文章を構成します。</p>ブロック要素では普通、改行が行われます。</div>

上記のコードでは、p要素がブロック要素であるため、p要素の前後で改行が入ります。

ブロック要素は、body要素の骨組みを構成する要素です。

対して、インライン要素は、主に文章の一部として扱われます。

<div>インライン要素は<span class="highlight">文章の一部を示します。</span>インライン要素の前後で改行は行われません。</div>

上記のコードでは、span要素がインライン要素であるため、改行は行われません。

段落を作るのではなく、段落の中で強調やリンクなど、文章の一部に意味を付けるために利用される要素です。

置換インライン要素とは

インライン要素は、一般的に横幅と高さの指定ができません。

ただし、画像や入力欄など、テキスト以外のもので構成された置換インライン要素では、これらの指定が可能になります。

HTML5ではコンテンツカテゴリという分類に

HTML5からは、インライン要素・ブロック要素という分類ではなく、文章構造によって割り当てられたコンテンツカテゴリというもので分類されています。

カテゴリによってインライン要素・ブロック要素のどちらの性質なのかが分かります

要素によっては、複数のカテゴリに所属しているので、注意が必要になります。

今回は、インライン要素の仕組みをお伝えしたいので、カテゴリではなく、インライン要素・ブロック要素を使って紹介していきますね。

インライン要素とブロック要素の性質の違い

インライン要素とブロック要素では、以下のような性質の違いがあります。

それでは、具体的に見ていきましょう。

中に入れられる要素

ブロック要素の中には、ブロック要素とインライン要素の両方を入れることができます。

対して、インライン要素に入れることができるものは、インライン要素のみでブロック要素を中に入れることはできません。

CSSのdisplayプロパティを使えば、インライン要素をブロックレベルで描画するように指定できますが、その場合でも中に入れられる要素は変わらないですよ。

横幅と高さの指定

ブロック要素が横幅と高さを指定できることに対し、インライン要素は指定できません。

ただし、置換インライン要素は横幅と高さを持っているため、サイズを指定することができます。

横幅の初期値

横幅を指定しなかった場合、ブロック要素は親要素いっぱいに横幅が広がります。

body要素が親の場合は、横幅は画面幅と同じものになります。

インライン要素の横幅は、中身で決まります。

文字数が多ければ、それだけ横幅は大きくなります。

他の要素との並び方

ブロック要素は、特に指定がなければ、他の要素と縦に並びます。

対して、インライン要素は横に並びます。

余白の付き方

ブロック要素の中には、見出しのh1要素のように、既定値で上下の余白がついている場合があります。

この余白はCSSで上書き指定することができます。

インライン要素は、左右のmargin指定ができますが、上下はできません。

要素内に余白を作る上下のpaddingは、他の要素に被ってしまうため、指定する意味がありません。

インライン要素で、余白のmarginやpaddingを指定する際には、注意が必要になりますね。

まとめ：インライン要素とブロック要素の違いを理解することが大事

今回は、HTMLのインライン要素について、ブロック要素との違いを中心に解説しました。

インライン要素・ブロック要素の仕組みは、HTMLコーディングをする上で、基本的な知識となるので、きちんと覚えておきましょう。

CSSの指定が想定通りにいかない場合は、インライン要素であるかどうかを、まずチェックすると良いかもしれませんね。

今回の記事が少しでも参考になれば幸いです。