HTML要素の補足：参考

HTMLの要素には表示形式に種類があります。中でもよく使われるのは以下の3つです。

• ブロックレベル要素
• インライン要素
• インラインブロック要素

上記3要素の使い分け方を知らないと、「要素の高さを調節できない」「右揃えや中央揃えができない」など初歩的な部分でつまづいてしまいます。

3つの表示形式の使い分け方を理解して、Webサイトを構成する要素を正しく扱えるようにしましょう。

目次

• HTMLの要素
• block、inline、inline-blockの特徴
• block、inline、inline-blockの違い

HTMLの要素

HTMLの要素とは、タグの初めから終わりまでの部分です。例えば、以下のようなコードがあったとします。

<p>テキスト</p>

<p>タグで「テキスト」という文字列を囲んでいます。この一文がそのまま要素となります。

displayで要素の表示形式を変更する

要素の表示形式を変更したい場合は、CSSのdisplayプロパティを使用します。以下が記述例です。

div {
　　　display: block;
}

値がblockならブロックレベル要素、inlineならインライン要素、inline-blockならインラインブロック要素となります。

例えば<div>タグはブロックレベル要素ですが、display: inline;と指定すればインライン要素に変更できます。

displayの初期値

HTMLの要素には、displayの初期値が設定されています。<div>タグや<p>タグはブロックレベル要素、<a>タグや<span>タグはインライン要素となります。

displayの初期値にinline-blockはありません。インラインブロック要素に変更したい場合はCSSで指定します。

block、inline、inline-blockの特徴

blockの特徴

ブロックレベル要素とは、情報のかたまりのことです。<div>タグや<section>タグなど、コンテンツをまとめるための要素がブロックレベル要素です。

ブロックレベル要素の特徴は以下の通りです。

• 縦に要素が並ぶ
• 幅と高さを指定できる
• 余白を自由に調整できる
• 要素の配置を指定できない

inlineの特徴

インライン要素はブロックレベル要素の内容として用いられる要素です。インライン要素は文章の一部として扱われます。

インライン要素の特徴は以下の通りです。

• 横に要素が並ぶ
• 幅と高さは指定できない
• 上下の余白が調整できない（上下のpaddingは指定できるが非推奨）
• 要素の配置を指定できる

インライン要素を使用する際は基本的にブロックレベル要素の中で使用します。

inline-blockの特徴

インラインブロック要素は、ブロックレベル要素とインライン要素の中間の要素です。display: inline-block;と指定することでインラインブロック要素として扱うことができます。

インラインブロック要素の特徴は以下の通りです。

• 横に要素が並ぶ
• 幅と高さが指定できる
• 余白を自由に調整できる
• 要素の配置を指定できる

インラインブロック要素は「要素は横並びにしたいけど、横幅・高さや余白を調整したい」などの場面で使用します。

block、inline、inline-blockの違い

3つの要素の違いをまとめると画像のようになります。

サンプルコードを使用して実装時の違いを解説します。実際の表示画面で見ていきましょう。

並び方

<div class="block">
  <div>ブロックレベル要素</div>
  <div>ブロックレベル要素</div>
  <div>ブロックレベル要素</div>
</div>

<div class="inline">
  <a>インライン要素</a>
  <a>インライン要素</a>
  <a>インライン要素です</a>
</div>

<div class="inline-block">
  <p>インラインブロック要素</p>
  <p>インラインブロック要素</p>
  <p>インラインブロック要素</p>
</div>

.block div{
  border: 1px solid #000;
}

.inline a{
  border: 1px solid #000;
}

.inline-block p{
  display: inline-block;
  border: 1px solid #000;
}

ブロックレベル要素は縦並び、インライン要素とインラインブロック要素は横並びです。

小さい画面での表示だとインライン要素が改行されています。これはインライン要素が親要素の端まで達すると自動で改行される性質を持つためです。

インラインブロック要素は小さい画面幅だと縦並びのように見えるかもしれません。こちらも改行によるものです。インラインブロック要素は要素ごとに改行されるためこのような表示になります。

横幅・高さの指定

<div class="block">
  <div>ブロックレベル要素</div>
  <div>ブロックレベル要素</div>
  <div>ブロックレベル要素</div>
</div>

<div class="inline">
  <a>インライン要素</a>
  <a>インライン要素</a>
  <a>インライン要素です</a>
</div>

<div class="inline-block">
  <p>インラインブロック要素</p>
  <p>インラインブロック要素</p>
  <p>インラインブロック要素</p>
</div>

.block div{
  border: 1px solid #000;
  height: 100px;
  width: 100px;
}

.inline a{
  border: 1px solid #000;
  height: 100px;
  width: 100px;
}

.inline-block p{
  display: inline-block;
  border: 1px solid #000;
  height: 100px;
  width: 100px;
}

widthとheightを100pxずつ指定した結果です。

ブロックレベル要素とインラインブロック要素にはwidthとheightが反映されました。一方、インライン要素にはwidthとheightが反映されていません。

余白の指定

<div class="block">
  <div>ブロックレベル要素</div>
  <div>ブロックレベル要素</div>
  <div>ブロックレベル要素</div>
</div>

<div class="inline">
  <a>インライン要素</a>
  <a>インライン要素</a>
  <a>インライン要素です</a>
</div>

.block div{
  border: 1px solid #000;
  margin: 20px;
  padding: 20px;
}

.inline a{
  border: 1px solid #000;
  margin: 20px;
  padding: 20px;
}

.inline-block p{
  display: inline-block;
  border: 1px solid #000;
  margin: 20px;
  padding: 20px;
}

上下左右のmarginとpaddingを20pxずつ指定した結果です。

ブロックレベル要素とインラインブロック要素には上下左右に余白がついています。

インライン要素は基本的に左右の余白のみ調整できます。上下のpaddingも指定できますが小さい画面幅のときに表示崩れが起きてしまいます。このためインライン要素に上下のpaddingを指定するのは非推奨です。

配置の指定

<div class="block">
  <div>ブロックレベル要素</div>
  <div>ブロックレベル要素</div>
  <div>ブロックレベル要素</div>
</div>

<div class="inline">
  <a>インライン要素</a>
  <a>インライン要素</a>
  <a>インライン要素</a>
</div>

<div class="inline-block">
  <p>インラインブロック要素</p>
  <p>インラインブロック要素</p>
  <p>インラインブロック要素</p>
</div>

.block{
  text-align: center;
}

.block div{
  border: 1px solid #000;
}

.inline{
  text-align: center;
}

.inline a{
  border: 1px solid #000;
}

.inline-block{
  text-align: center;
}

.inline-block p{
  display: inline-block;
  border: 1px solid #000;
}

text-align: center;を指定した結果です。

ブロックレベル要素にtext-alignやvertical-alignを指定すると、テキストのみに反映されます。要素そのものには反映されません。

インライン要素やインラインブロック要素を中央配置にする場合は、親要素にtext-alignやvertical-alignを指定します。子要素にtext-alignやvertical-alignを指定しても反映されないため要注意です。