【基礎知識】ブロックレベル要素・インライン要素の性質と違い
デザイン・コーディング

【基礎知識】ブロックレベル要素・インライン要素の性質と違い

Share
このエントリーをはてなブックマークに追加

CSSで装飾をする際に、指定した要素を思い通りに変更できない経験をしたことはありませんか？その原因の1つとして、ブロックレベル要素とインライン要素の性質が作用しているからかもしれません。この記事では、ブロックレベル要素とインライン要素の性質と違いについて解説します。HTMLやCSSを始めて間もない方にとって最も重要なポイントの1つですので、この機会に基礎知識を身につけましょう！

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

ハイブリッド型受講を可能に。医療団体に特化した研修管理システム。

https://manaable.com/

manaable（マナブル）は、利用ユーザー数25万人を突破した医療団体向け研修管理システムです。会員や研修から決済・受講・アンケートまで、研修管理に必要な機能を網羅。あらゆる業務の一元管理を可能にしたシステムだからこそ、お客様に合わせた革新的で最適な研修体制をご提供します。

目次

  1. HTML5におけるタグ分類の考え方
    1. カテゴリの特徴
  2. ブロックレベル要素・インライン要素とは
    1. ブロックレベル要素
    2. インライン要素
  3. ブロックレベル要素とインライン要素の違い
  4. 1.横幅と高さの指定
    1. ブロックレベル要素：横幅と高さが指定できる
    2. インライン要素:横幅と高さが指定できない
  5. 2.横幅の初期値
    1. ブロックレベル要素：親要素の横幅と同じ値になる
    2. インライン要素：横幅の初期値が内容で決まる
  6. 3.他の要素との並び方
    1. ブロックレベル要素：他の要素と縦に並ぶ
    2. インライン要素：他の要素と横に並ぶ
  7. 4.余白の付き方
    1. ブロックレベル要素：デフォルトで付く場合がある
    2. インライン要素：上下に特殊な付き方をする
  8. まとめ

HTML5におけるタグ分類の考え方

いきなりですが、実は、HTML5ではブロックレベル要素とインライン要素という考え方はなくなりました。現在は正しい文章構造の表現を重視したコンテンツカテゴリという考え方でHTMLタグを分類しています。

カテゴリは、

  • メタデータ・コンテンツ
  • フロー・コンテンツ
  • セクショニング・コンテンツ
  • ヘッディング・コンテンツ
  • フレージング・コンテンツ
  • エンベディッド・コンテンツ
  • インタラクティブ・コンテンツ

の計7つです。

先述の通り、HTML5では、厳密にブロックレベル要素とインライン要素が割り当てられていることはありませんが、各HTMLタグは属するカテゴリによって、ブロックレベル要素とインライン要素のどちらの性質を持つかが分かります。

たとえば、フレージング・コンテンツに属するタグはインライン要素の性質を持ちます。タグによっては複数のカテゴリに属する場合があるため、確認する際には注意してください。

カテゴリの特徴

それぞれのカテゴリの特徴を簡潔に説明します。

参照ページ：MDN Web Docsについて

メタデータ・コンテンツ

metaタグやlinkタグなど、headタグ内で使用することの多いタグがメタデータ・コンテンツに分類されます。

メタデータ・コンテンツに属するタグ：<base>,<command>,<link>,<meta>,<noscript>,<script>,<style>,<title>

フロー・コンテンツ

コンテンツを表示するためにbodyタグ内で使用するタグの大半が、フロー・コンテンツに分類されます。

フロー・コンテンツに属するタグ：<a>,<abbr>,<address>,<article>,<aside>,<audio>,<b>,<bdo>,<bdi>,<blockquote>,<br>,<button>,<canvas>,<cite>,<code>,<data>,<datalist>,<del>,<details>,<dfn>,<div>,<dl>,<em>,<embed>,<fieldset>,<figure>,<footer>,<form>,<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,<header>,<hgroup>,<hr>,<i>,<iframe>,<img>,<input>,<ins>,<kbd>,<label>,<main>,<map>,<mark>,<math>,<menu>,<meter>,<nav>,<noscript>,<object>, <ol>,<output>,<p>,<pre>,<progress>,<q>,<ruby>,<s>,<samp>,<script>,<section>, <select>,<small>,<span>,<strong>,<sub>,<sup>,<svg>,<table>,<template>,<textarea>,<time>,<ul>,<var>,<video>,<wbr>

セクショニング・コンテンツ

articleタグやnavタグなど、セクションを区切ることが出来るタグがセクショニング・コンテンツに分類されます。

セクショニング・コンテンツに属するタグ：<article>,<aside>,<nav>,<section>,<hgroup>

ヘッディング・コンテンツ

h1~h6タグのような、見出しとなるタグがヘッディング・コンテンツに分類されます。

ヘッディング・コンテンツに属するタグ：<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,<hgroup>

フレージング・コンテンツ

brタグやspanタグなど、段落中のテキスト等に使用されるタグがフレージング・コンテンツに分類されます。HTML5以前にインライン要素と呼ばれていたタグは、基本的にフレージング・コンテンツに属します。

フレージング・コンテンツに属するタグ：<abbr>,<audio>,<b>,<bdo>,<br>,<button>,<canvas>,<cite>,<code>,<data>,<datalist>,<dfn>,<em>,<embed>,<i>,<iframe>,<img>,<input>,<kbd>,<label>,<mark>,<math>,<meter>,<noscript>,<object>,<output>,<progress>,<q>,<ruby>,<samp>,<script>,<select>,<small>,<span>,<strong>,<sub>,<sup>,<svg>,<textarea>,<time>,<var>,<video>,<wbr>

エンベディッド・コンテンツ

videoタグやcanvasタグなど、文書内に埋め込みを行うタグがエンベッディッド・コンテンツに分類されます。

エンベディッド・コンテンツに属するタグ：<audio>,<canvas>,<embed>,<iframe>,<img>,<math>,<object>,<svg>,<video>

インタラクティブ・コンテンツ

aタグやbuttonタグなど、ユーザーの操作に反応する反応するタグがインタラクティブ・コンテンツに分類されます。

インタラクティブ・コンテンツに属するタグ：<a>,<button>,<details>,<embed>,<iframe>,<label>,<select>,<textarea>

このように、HTML5ではブロック要素・インライン要素という分類の仕方はせず、HTMLタグが持つ役割に注目してカテゴライズされています。

コンテンツ・モデル

それぞれのカテゴリには、子要素として含んで良いカテゴリと、含んではいけないカテゴリが決まっています。このルールをコンテンツ・モデルと言います。 以下の図はカテゴリー同士の関係を表した図です。

たとえばフレージング・コンテンツに属する要素は、同じくフレージング・コンテンツに属する要素と、エンベディッド・コンテンツに属する要素を子要素として持つことができます。

言い換えれば、セクショニング・コンテンツやヘッディング・コンテンツ、またフレージング・コンテンツではないインタラクティブ・コンテンツに属する要素を子要素として持つことはできません。

しかしながら、子要素として持つことができるかどうかは個々の要素に依存することもあります。詳しい仕様を確認したい方は、W3CのHTML5の仕様書に目を通してみてください。下の画像のように詳細な説明が掲載されています。（日本語ページもあります）

ブロックレベル要素・インライン要素とは

HTMLタグはブロックレベル要素の性質、もしくはインラインレベル要素の性質のどちらかを持ってます。

ブロックレベル要素

ブロックレベル要素とは、その名の通りコンテンツをまとめる箱のような使い方をする要素です。このブロックレベル要素によってWebサイトの大枠を形作られます。

インライン要素

インライン要素とは、文章の一部として扱われる要素です。基本的にブロックレベル要素の中で使用され、ブロックレベル要素の内容に効果をもたらす要素が多く含まれています。

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

ブロックレベル要素とインライン要素の性質を5つの観点で比較したものが下の表です。

横幅と高さの指定 横幅の初期値 高さの初期値 他の要素との並び方 余白の付き方
ブロックレベル要素 可能 親要素の横幅と同じ値になる 内容で決まる 改行が入る デフォルトで付く場合がある
インライン要素 不可能 内容で決まる 内容で決まる 改行が入らない 上下に特殊な付き方をする

5つの観点のうち、4つも相違点がありますね。ブロックレベル要素にできてインライン要素にはできないこと、インライン要素にできてブロックレベル要素にはできないことがあるため、2つの要素の性質を理解していないと思うようにコーディングができません。

次の項目から、ブロックレベル要素とインライン要素の性質の違いを例と共に解説します。

1.横幅と高さの指定

ブロックレベル要素：横幅と高さが指定できる

ブロックレベル要素は横幅と高さを指定することができます。ブロックレベル要素であるdivタグの横幅と高さを200pxに指定してみましょう。

  1. <body>
  2.   <div id="box1"></div>
  3. </body>
  1. #box1 {
  2.   height: 200px;
  3.   width: 200px;
  4.   background-color: #dd5268;
  5. }

すると、以下のように表示されます。

See the Pen XWmoRyX by Ryohei (@RyoheiDD) on CodePen.

横幅と高さが200pxになり、divタグが正方形になりました。

インライン要素:横幅と高さが指定できない

インライン要素は、横幅と高さの指定ができません。 インライン要素であるspanタグを以下のように記述してみましょう。

  1. <body>
  2.   <span id="text1">ITRA株式会社</span>
  3. </body>
  1. #text1 {
  2.   height: 200px;
  3.   width: 200px;
  4.   background-color: #dd5268;
  5. }

See the Pen ExVrLdd by Ryohei (@RyoheiDD) on CodePen.

spanタグの横幅と高さが、指定した200pxになりませんでした。

2.横幅の初期値

ブロックレベル要素：親要素の横幅と同じ値になる

ブロックレベル要素の横幅の初期値は、親要素の横幅と同じ値になります。

親要素の横幅を指定している場合

横幅を200pxに指定したdivタグの中に、横幅を指定していないdivタグを記述してみます。

  1. <body>
  2.   <div id="box1">
  3.     <div id="box2">
  4.     </div>
  5.   </div>
  6. </body>
  1. #box1 {
  2.   height: 200px;
  3.   width: 200px;
  4.   background-color: #dd5268;
  5. }
  7. #box2 {
  8.   height: 100px;
  9.   background-color: #f4d923;
  10. #box2 }

すると、以下のように表示されます。

See the Pen zYvejMm by Ryohei (@RyoheiDD) on CodePen.

上の記述では、「div id=”box1”」と「div id=”box2”」の間に、親要素と子要素の関係ができています。そのため、親要素の200pxの横幅に合わせて、子要素の横幅も200pxになります。

親要素がbody要素の場合

divタグやpタグを記述したとき、画面幅いっぱいに広がってしまったことはありませんか？その原因こそが、このブロックレベル要素の性質です。以下のように、bodyタグの中に横幅を指定していないdivタグを記述してみます。

  1. <body>
  2.   <div id="box1"></div>
  3. </body>
  1. #box1 {
  2.   height: 200px;
  3.   background-color: #dd5268;
  4. }

すると、以下のように表示されます。

See the Pen bGVzMOq by Ryohei (@RyoheiDD) on CodePen.

この場合、bodyタグとdivタグの間に親要素と子要素の関係ができています。指定のない限りbodyタグの横幅は画面幅と同じ値なので、それに合わせて子要素のdivタグの横幅も広がります。

インライン要素：横幅の初期値が内容で決まる

インライン要素の横幅は内容で決まります。spanタグの中に「ITRA株式会社」の計8文字記述した場合と、「ITRA」の計４文字記述した場合を比較してみましょう。

まずは8文字の場合です。

  1. <body>
  2.   <span id="text1">ITRA株式会社</span>
  3. </body>
  1. #text1 {
  2.   background-color: #dd5268;
  3. }

すると、以下のように表示されます。

See the Pen oNjmdJr by Ryohei (@RyoheiDD) on CodePen.

続いて4文字の場合です。

  1. <body>
  2.   <span id="text1">ITRA</span>
  3. </body>
  1. #text1 {
  2.   background-color: #dd5268;
  3. }

すると、以下のように表示されます。

See the Pen NWGoMoj by Ryohei (@RyoheiDD) on CodePen.

spanタグの横幅が、文字数に合わせて短くなりました。このように、インライン要素の横幅は内容によって決まります。

3.他の要素との並び方

ブロックレベル要素：他の要素と縦に並ぶ

ブロックレベル要素は他の要素と縦に並びます。 以下のようにdivタグを2つ記述してみましょう。

  1. <body>
  2.   <div id="box1"></div>
  3.   <div id="box2"></div>
  4. </body>
  1. #box1 {
  2.   height: 100px;
  3.   width: 100px;
  4.   background-color: #dd5268;
  5. }
  7. #box2 {
  8.   height: 100px;
  9.   width: 100px;
  10.   background-color: #f4d923;
  11. }

すると、以下のように表示されます。

See the Pen YzyBLgz by Ryohei (@RyoheiDD) on CodePen.

右側に十分な余白がありますが、2つのdivタグは縦に並びました。ブロックレベル要素を横に並べたい場合はCSSで装飾をする必要があります。

インライン要素：他の要素と横に並ぶ

インライン要素は他の要素と横に並びます。 以下のようにspanタグを2つ記述してみましょう。

  1. <body>
  2.   <span id="text1">ITRA株式会社</div>
  3.   <span id="text2">ITRA</div>
  4. </body>
  1. #text1 {
  2.   background-color: #dd5268;
  3. }
  5. #text2 {
  6.   background-color: #f4d923;
  7. }

すると、以下のように表示されます。

See the Pen zYvejbM by Ryohei (@RyoheiDD) on CodePen.

2つのspanタグは横に並びました。このように、インライン要素は他の要素と横に並びます。

4.余白の付き方

ブロックレベル要素：デフォルトで付く場合がある

ブロックレベル要素は自由に余白を指定できますが、中にはブラウザによって勝手に余白が付く場合があります。h1タグを例に見てみましょう。

  1. <body>
  2.   <h1>ITRA株式会社</h1>
  3. </body>
  1. h1 {
  2.   background-color: #dd5268;
  3. }

この記述は、Chromeでは以下のように表示されます。

See the Pen GRpzdLZ by Ryohei (@RyoheiDD) on CodePen.

CSSで余白を指定していませんが、上下にmarginが付いています。 勝手に付いてしまうmarginを消すためには、CSSでmarginプロパティの値を0にします。

h1タグのmargin-top、margin-bottomプロパティの値を0に指定してみましょう。

  1. <body>
  2.   <h1>ITRA株式会社</h1>
  3. </body>
  1. h1 {
  2.   background-color: #dd5268;
  3.   margin-top: 0px;
  4.   margin-bottom: 0px;
  5. }

すると、以下のように表示されます。

See the Pen oNjmdOK by Ryohei (@RyoheiDD) on CodePen.

勝手に付いていたmarginが消去されました。想定していない場所に余白が付いていた際は、ブラウザ上で検証モードを用いて確認しましょう。

インライン要素：上下に特殊な付き方をする

インライン要素は特殊な余白の付き方をします。

上下のmarginが指定できない

インライン要素には、上下のmarginを付けられません。 spanタグに対して、marginプロパティで上下左右に余白を付けてみましょう。

  1. <body>
  2.   <span id="text1">ITRA株式会社</span>
  3. </body>
  1. #text1 {
  2.   background-color: #dd5268;
  3.   margin: 30px;
  4. }

すると、以下のように表示されます。

See the Pen abvXGrX by Ryohei (@RyoheiDD) on CodePen.

左右のmarginは付きましたが、上下にはmarginが付いていません。インライン要素には、上下のmarginを指定することができない性質があります。

上下のpaddingが他の要素に被る

インライン要素の上下のpaddingは、他の要素に被ってしまいます。 たとえば、以下のようなspanタグの記述があったとします。

  1. <body>
  2.   <p>インライン要素の上下のpaddingは</p>
  3.   <span>この</span><span id="text1">ITRA株式会社</span><span>ように</span>
  4.   <p>他の要素に被ってしまいます</p>
  5. </body>
  1. #text1 {
  2.   background-color: #dd5268;
  3.   padding: 30px;
  4. }

すると、上下の余白が以下のように表示されます。

See the Pen zYveaGe by Ryohei (@RyoheiDD) on CodePen.

左右のpaddingは隣合う要素を押しのけるように表示されましたが、上下のpaddingは他の要素に被ってしまいました。

marginやpaddingプロパティでの余白の指定が上手くいかないときは、インライン要素の性質が関係していないか確認しましょう。

まとめ

ブロックレベル要素とインライン要素の性質と違いをご理解いただけたでしょうか。今後HTMLやCSSを扱う中で、この記事で得た情報をぜひ活用してください。

Share
このエントリーをはてなブックマークに追加

この記事の著者

itra
ITRA株式会社

官公庁や大手企業を中心とした大規模なWebサイトを総合的にプロデュースするWeb制作会社。デザインからシステム、サーバーまでWebサイトに関わるお客様の悩みを解決します。