HTMLのブロック要素とインライン要素を解説

2021.12.18

HTMLを作成する時、様々なタグとともにルールがあり、複雑と感じることも多いと思います。
その中でも混乱しがちな「ブロック要素」と「インライン要素」について解説したいと思います。

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

ブロック要素

ブロック要素は、その要素をブロック(かたまり)として認識する要素です。
ブロック要素は、主に次のような特徴を持ちます。

  • 横幅を自由に設定可能
  • ブロック要素の前後は必ず改行される

ブロック要素の例

・ヘッダ要素(h1〜h6)
・div
・p

インライン要素

インライン要素は、ブロック要素の中に配置する要素を指します。
インライン要素は次のような特徴を持ちます。

  • 横幅は子要素に応じて決まる(CSSが効かない)
  • インライン要素の前後で改行されない

インライン要素の例

・span
・label
・a

HTML5での変更点

ここまで 「ブロック要素」と「インライン要素」 について基本的な説明をしましたが、実はHTML5の策定に伴い、この「ブロック要素」 「インライン要素」 の概念は廃止されました。

それならなぜ説明したのかというと、これまで紹介してきた「ブロック要素」と「インライン要素」の挙動は今も残っており、特に CSSでデザインを考える上で非常に重要なのです。
廃止されたから不要、ということではありませんので、覚えておきましょう。

HTML4までで禁止されていたルール

例として、HTML4では以下のようなルールがありました。

  • インライン要素とブロック要素は並べて記載してはいけない
  • インライン要素の中にブロック要素を入れ子にしてはいけない

HTML5ではこの制限はなくなりましたので、例えば以下のような記述も可能です。

<a>
    <div>
        <img src="./image.jpg">
        <div>こんにちは。</div>
    </div>
</a>

HTML5におけるブロック要素とインライン要素の取り扱い

HTML5では、すべての要素をブロック要素またはインライン要素として扱うことが可能です。
指定するためにはCSSのdisplayプロパティを利用することで、ブロック要素かインライン要素であるかを変更できます。

ブロック要素をインライン要素として扱う方法

例として、div要素をインライン要素として扱うサンプルを紹介します。

CSS

div.inline {
  display: inline;
}

HTML

<div>
  This is a
  <div class="inline">inline div</div>
  .
</div>

これを表示すると、「inline」を指定したdivがインライン要素として扱われ、「.」部分が改行されていないのがわかります。

インライン要素をブロックとして取り扱う方法

逆にインライン要素をブロック要素として取り扱うためには、「display:block;」を使用します。

CSS

span.block {
  height: 2em;
  display: block;
}

HTML

<span class="block">This</span>
<span class="block">is a</span>
<span class="block">block.</span>

ブロック要素としたおかげで、高さの指定が可能になりました。

インラインブロック要素の紹介

最後に、ブロック要素とインライン要素のいいところを組み合わせたインラインブロック要素を紹介します。
CSSで「display:inline-block;」を指定することでインラインブロック要素として扱うことができます。

インラインブロック要素は、外側に対してはインライン要素と同等の動きをし、内部に対してはブロック要素としての動きをします。

インラインブロックの例

次のようなHTMLを作成したとします。

<div class="container">
  <span>This is a</span>
  <span class="inline">Inline Block</span>
<span>.</span>
</div>

インライン要素である「span」に対してCSSで「padding(余白)」を指定した場合、次のようにはみ出してしまいます。

div.container {
  border: solid 1px gray;
  width: 20em;
  
}
span.inline {
  height: 4em;
  padding-top: 1em;
  padding-bottom: 1em;
  background-color: gray;
}

インライン要素は高さを指定できない(無視される)という特性を持つため、paddingを指定すると親要素をはみ出してしまいます。
この「span」要素をインラインブロックとすることで、paddingを加味した指定ができます。

div.container {
  border: solid 1px gray;
  width: 20em;
}
span.inline {
  display: inline-block;/** インラインブロックへ変更 */
  height: 4em;
  padding-top: 1em;
  padding-bottom: 1em;
  background-color: gray;
}

インラインブロック要素に変更することで、効いていなかった高さが反映されるだけでなく、親要素をはみ出さないようにpaddingが指定できます。

このように、横幅や高さの指定ができるインライン要素として扱うことができるため、直感的なデザインが可能です。

まとめ

ブロック要素とインライン要素、インラインブロック要素の違いをまとめました。

説明ブロック要素インライン要素インラインブロック要素
CSSによる横幅指定可能不可能可能
CSSによる高さ指定可能不可能可能
高さの初期値子要素に準じる子要素に準じる子要素に準じる
前後の要素との並び改行される改行されない改行されない

ブロック要素とインライン要素を使い分けることで、より洗練したデザインを作ることが可能です。
是非使いこなしてみてください。

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2022 WEBCAMP MEDIA Powered by AFFINGER5