ブロック要素、インライン要素の違いを理解しよう

HTMLの要素(h1タグやstrongタグ等）は、大きく分けてブロック要素とインライン要素という2つのグループに分けることができます。各グループの違いがわかなければ、paddingを設定したけど反映されないなどの問題が発生し、イメージ通りのレイアウトを作成することができません。しっかりと2つの違いを理解して、入門者からもう一つ上のレベルにステップアップしましょう。

ブロック要素

ブロック要素は、親要素の幅一杯まで広がる要素で、特別な処理を行わなければ、ブロック要素の後は必ず自動改行され、次のブロック要素が横に並ぶことはありません。

下の図の左側では、bodyタグの親要素の中にあるh1タグ, pタグはブロック要素なので、親要素の幅いっぱいに広がり、自動で改行されています。初期設定では、下の図の右側のようにブロック要素が横並びになることはありません。

インライン要素

一方インライン要素は、ブロック要素とは異なり、親要素の幅一杯に広がることはなく、要素に含まれるコンテンツの大きさによってその幅が決まります。また、インライン要素は、通常ブロック要素の中に記述し、インライン要素の横にインライン要素が並ぶことができます。

下記のようにブロック要素のpタグの中で、横並びでも存在することができるのがインライン要素です。aタグ、bタグ、strongタグ、buttonタグすべてインライン要素です。

実際にHTMLを使ってブロック要素とインライン要素を確認してみましょう。

CSSの背景色（background color)を使って、block要素とinline要素を区別できるように下記の2つのクラスを使用します。

        .block{
            background-color: #e0e0e0;
        }
        .inline{
            background-color: #CBDAF0;
        }

HTMLでは、h1, pタグのblock要素には、blockクラス、b, aタグのinline要素には、inlineクラスを設定しています。

    <h1 class="block">block要素とinline要素</h1>
    <p class="block">inline要素の中には、文字を太くする<b class="inline">bタグ</b>、
    他のサイトへのリンクを張るaタグなどがあります。
    こちらを<a href="#" class="inline">クリック</a>すると詳細がわかります。</p>
    <p class="block">ブロック要素はpタグなどがあります。</p>

ブラウザで確認するとブロック要素の背景色はブラウザの幅一杯に広がっており、ブロック要素ごとに改行が行われています。一方、インライン要素は背景色の大きさがコンテンツの長さで決まっていることがブラウザの表示を見てもはっきりとわかります。

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

ブロック要素とインライン要素の大きな違いの一つは、ブロック要素では自動で改行が行われ、インライン要素は自動で改行が行われないことでした。自動改行以外にもいくつかの違いがあるので、1つ1つみていきましょう。

その他の違いを理解するためには、padding, marginといったボックスモデルを理解していることがポイントになります。ボックスモデルがわからない人は、まずこちらからボックスモデルを確認して下記を読み進めることをお勧めしています。

高さ(height)と幅(width)の設定の違いについて

ブロック要素は、高さと幅の変更を行うことができますが、インライン要素は、変更を行うことができません。インライン要素の高さと幅はコンテンツによって決まります。

marginの設定の違いについて

ブロック要素は、marginの適用を上下左右で行うことができますが、インライン要素は、左右のみのmargin適用が可能で、上下への適用を行うことができません。

paddingの設定の違いについて

ブロック要素は、paddingの適用を上下左右で行うことができます。インライン要素は、marginとは異なり、上下左右で適用することができます。しかし、設定を行えても上下部分については、上下の要素の領域にはみ出してしまいます。

図だけではわかりにくい部分もあるので、実際のHTMLで確認してみましょう

   <p>これはブロック要素です。</p>
   <p>テキスト<span class="padding">これはインライン要素です。</span>テキスト</p>
   <p>これはブロック要素です。</p>

識別しやすいようにpaddingは背景色(background-color)の設定も行っています。

        .padding{
            padding: 40px;
            background-color: antiquewhite;
        }

paddingの左右は、左右の要素と重複しておらず、設定どおりの領域を確保していますが、上下に関しては、他の要素へ入っていることがわかります。

ブロック要素とインライン要素の違いの理由

ブロック要素とインライン要素に違いがあることがわかりました。では、この違いはどこから生じているのでしょう。

答えは、displayプロパティの設定値によって、ブロック要素として動作するかインライン要素として動作するかが決まります。

ブロック要素の代表であるhタグやpタグにはすべてdisplayプロパティにblockという値が初期値として設定され、インライン要素の代表であるaタグやstrongタグには、inlineという値が初期値として設定されています。

これらの値は、固定値ではなく、自由に変更することができます。つまり、aタグのインライン要素のdisplayプロパティをblockにすることで、ブロック要素として扱うことができます。

インライン要素をブロック要素へ

インライン要素であるaタグを利用して、インライン要素からブロック要素への変更を確認してみましょう。

    <a href="#">トップページへのリンク</a>

背景色とmarginの設定を行っています。インライン要素では、marginの設定は、左右にしか適用されません。

a{
    background-color: aqua;
    margin:30px;
}

インライン要素のため、marginの上下は適用されず、左右のみ適用されています。また、幅もコンテンツの長さに依存するので文字部分の長さだけ背景色が広がっています。

displayプロパティをCSSに追加します。値は、blockを設定します。

a{
    background-color: aqua;
    margin:30px;
    display: block;
}

ブロック要素になると親要素の幅一杯に広がり、marginもinline要素の時は左右のみでしたが、上下にもmarginが適用されていることを確認することができます。