#14  ブロック要素とインライン要素の４つの違い

HTMLとCSSの基本的な理解ができてきたので「ブロック要素」と「インライン要素」という概念について触れていきたいと思います。

「ブロック要素」と「インライン要素」とはどのHTMLタグも持っている、タグの分類の共通概念です。

身近なもので例を挙げてみます。

犬であれば個体はパグやポメラニアンなど種類の違いはあれど、必ず男の子か女の子のどちらかであり、性別という概念は共通で持っているものですよね。

タグも同様で、タグの種類は違ってもブロック要素・インライン要素というどちらかの分類に必ず振り分けられます。

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

詳しく掘り下げていく前に、パッとみてどのように違うのかを理解しましょう。

pはブロック要素、spanはインライン要素です。

一見どちらも同じ見た目ですが、CSSを加えるとその違いがよくわかります。

<p>これはブロック要素です</p>
<span>これはインライン要素です</span>

pとspanに同じ緑色の背景色を付け加えてみます。

p, span{
  background-color : #02C898;
}

すると、pの方は画面いっぱいに背景色が広がりましたが、spanの方はテキストの幅にだけ背景色がつきましたね。

また、要素を連続で書いた場合の違いにも差があります。

pは常に改行されているのに対し、spanはテキストが幅いっぱいになったところで折り返されています。

<p>これはブロック要素です</p>
<p>これはブロック要素です</p>
<p>これはブロック要素です</p>

<span>これはインライン要素です</span>
<span>これはインライン要素です</span>
<span>これはインライン要素です</span>

このように、ブロック要素とインライン要素では見た目にいくつかの違いをもたらします。

本講座で学習する３つのこと

1. タグごとのブロック要素、インライン要素の一覧
2. ブロック要素とインライン要素の4つの違い
3. ブロック要素←→インライン要素と変換するテクニック

タグごとのブロック要素とインライン要素の一覧

例で挙げたpはブロック要素、spanはインライン要素でした。

全てのHTMLのタグは以下のようにブロック要素かインライン要素に属しています。

どのタグがどちらに分類されているか知らなければ、今後「CSSが狙った通りに効かない！」という事態を引き起こしてしまいます。

ブロック要素とインライン要素の４つの大きな違い

それではブロック要素とインライン要素の違いについて実践レベルで理解していきましょう。

ブロック要素とインライン要素の違いは以下の４つです。

1. 要素の広がり方
2. 要素の並び方
3. 余白のつき方
4. 横幅・高さのつき方

違い01｜要素の広がり方

まずは要素の広がり方の違いです。

<div>
  親要素
  <p>これはブロック要素です</p>
  <span>これはインライン要素です</span>
  <img src="dog.png" alt="犬">
<div>

div{
  background-color : #E2FBF5;
}

p{
  background-color : #02C898;
}

span, img{
  background-color : #FF6658;
}

親要素

これはブロック要素です

これはインライン要素です

最初の例でも説明しましたが、ブロック要素は親要素の幅いっぱいまで広がります。

上記の例では広がりを可視化するために、ブロック要素のpは緑、インライン要素のspna、imgには赤の背景色をつけてみました。

すると<p>は親要素である<div>と同じ幅まで広がっていますが、インライン要素である<span>と<img>はその要素自身のサイズまでしか広がっていません。

web兄さん

例ではわかりやすいように背景色を塗っていますが、背景色がない状態でも目視できていないだけでブロック要素の幅は広がっています。

違い02｜要素の並び方

要素の広がりと関連性があるのが「並び方」です。

<div>
  親要素
  <p>これはブロック要素</p>
  <p>これはブロック要素</p>
  <p>これはブロック要素</p>
  <span>インライン要素</span>
  <span>インライン要素</span>
  <span>インライン要素</span>
  <img src="dog.png" alt="犬">
<div>

div{
  background-color : #E2FBF5;
}

p{
  background-color : #02C898;
}

span, img{
  background-color : #FF6658;
}

親要素

これはブロック要素

これはブロック要素

これはブロック要素

---

インライン要素 インライン要素 インライン要素

p（ブロック要素）とspan（インライン要素）の数をそれぞれ増やし並び方を比較してみました。（先ほどの例と同様にわかりやすく可視化するために背景色をつけています）

ブロック要素が親の幅いっぱいに広がるという特徴を持つならば、当然次に表示される要素は折り返され下に回り込みますよね。

そのため、pで書いたテキストは縦に並び、spanとimgは横にならび親要素の幅いっぱいまでいったところで下に折り返されています。

違い03｜余白のつき方（marginとpadding）

marginとpaddingによる余白のつき方にもブロック要素とインライン要素では違いがあります。

少々ややこしいですが、インライン要素の場合は左右しか適用されないと思っておけばOKです👌

<span>これはインライン要素</span>
<p>これはブロック要素</p>

p{
  margin: 100px 20px;
}

まずは<p>（ブロック要素）にmargin:100px 20pxで上下に100pxと左右に20pxの余白をつけてみました。きちんと上下左右に余白が付いていますね。

しかし同じ条件で<span>にmargin:100px 20pxつけてみると…

<span>これはインライン要素</span>
<p>これはブロック要素</p>

span{
  margin: 100px 20px;
}

たしかにCSSではmarginの上下に100pxと書いてあるのにも関わらず、左右の余白しか効いていません。

このようにインライン要素は上下のmarginは効きません。これは知らないとかなりの確率で「え！？なんで余白つかないの？」と困ることになります。

paddingはまた少しだけ違います。

ブロック要素は通常通り上下左右に余白が付きます。しかしインライン要素は上下の余白は他の要素にかぶってしまいます。

<p>これはブロック要素</p>
<span>これはインライン要素</span>
<p>これはブロック要素</p>

span{
  padding: 15px 30px;
}

違い04｜高さ・横幅のつき方（widthとheight）

widthとheightで要素の横幅と高さを指定するときにも違いがあります。

<p>ブロック要素</p>
<span>インライン要素</span>

p{
  width: 200px;
  height: 200px;
  background-color: #02C898;
}

span{
  width: 200px;
  height: 200px;
  background-color: #FF6658;
}

p（ブロック要素）とspan（インライン要素）それぞれに高さと横幅を200pxになるように指定してみました。

するとpは200*200の正方形になったのに対し、spanは高さも横幅もそのままですね。

このようにインライン要素はwidthとheightを使って横幅と高さを変更できません。

インライン要素でも上下に余白をつけたい場合は？

さて、ここまでの解説で

• 「違いは分かったけど、ただ単に不便な違いがあるってわかっただけ！」
• 「インライン要素で書いた要素の余白や幅を変えたい時どうすればいいの！？」

そんな声が聞こえてきそうですね。それを解決するテクニックを習得して次のステップへ進みましょう。

ケース01｜ブロック要素→インライン要素として扱いたい時

例えば上記のようなコードで「・ささみ・チーズ・お芋」と横並びにしたいとします。

<img src="dog.jpg" alt="犬">
<div>
  <h3>好きな食べ物</h3>
  <p>・ささみ</p>
  <p>・チーズ</p>
  <p>・お芋</p>
</div>

好きな食べ物

・ささみ

・チーズ

・お芋

pはブロック要素ですので、その特性上、縦にならんでしまいますよね。

そこで使うのがCSSプロパティのdisplayです。

このプロパティはタグごとについているブロック要素、インライン要素という特徴を変換してしまうプロパティなんです。

試しに先ほどの例でpに対してdisplay : inline（セレクタをインライン要素として扱う）と指示をすると…

p{
  display : inline;
}

好きな食べ物

・ささみ

・チーズ

・お芋

pがインライン要素に変換されたことで横並びになりました！

ケース02｜インライン要素→ブロック要素として扱いたい時

今度は逆に「インライン要素」を「ブロック要素」として扱いたい時です。

「この犬について詳しくみる」というリンクを

• 横幅いっぱいに広げて、文字を中央寄せにする
• 上に余白をつける

ですが、aはインライン要素であるためうまくいきませんよね。

<img src="dog.jpg" alt="犬">
<a href="~~">この犬について詳しくみる</a>

a{
  color: #fff;
  background: #957c68;
  text-align: center; /*インラインでは効かない*/
  margin-top:20px; /*インラインでは効かない*/
}

この犬について詳しくみる

そこで先ほどと同様にdisplayを使用します。今度はインライン要素→ブロック要素の変換なので、a{display : block}とします。

a{
  display: block;
  color: #fff;
  background: #957c68;
  text-align: center; /*インラインでは効かない*/
  margin-top:20px; /*インラインでは効かない*/
}

この犬について詳しくみる

インライン要素であるaがブロック要素と同じように幅いっぱいに広がりmargin-topもつけることができました。

web兄さん

実際の制作現場ではこのようにdispalyをうまく活用して思い通りにCSSを適用させていきます。

display:blockとdisplay:inlineは頻出なので使い方を覚えておこう！

ケース03｜インライン要素の特徴を残しつつ、paddingとmarginを効くようにしたい場合

前述の❶と❷はブロック要素とインライン要素を逆転させる方法でしたが、便宜上インライン要素の特徴を残したまま、paddingやmarginの余白を適用できるようにしたいケースがあります。

例えば以下のようなケースです。

これを

この犬について詳しくみる

こうしたい

この犬について詳しくみる

インライン要素のままだと余白が効かない

インライン要素に対して、marginとpaddingはうまく効かないので、インライン要素のままだと次のような見た目になってしまいますよね。（paddingは他の要素と被り、margin-topは効いていない）

a{
  color: #fff;
  background: #957c68;
  margin-top: 10px;
  padding: 20px;
}

この犬について詳しくみる

display: blockだとブロック要素の特徴で広がりすぎる

かといって以下のようにdisplay: blockでブロック要素に変換すると、その特徴で親要素いっぱいに広がってしまいます。

a{
  display: block; /*ブロック要素に変換*/
  color: #fff;
  background: #957c68;
  margin: 10px 45px;
  padding: 20px;
}

この犬について詳しくみる

web兄さん

つまり、これを解決するには「インライン要素を保ったままpaddingとmarginを効くようにする」しかありませんよね！

こんな時に使用するのがdisplay: inline-blockです！

この値を使うことでインライン要素の状態で、paddingとmarginが正常に効くようになります！

※ちなみにwidthやheightも効くようになります。

a{
  display: inline-block;
  color: #fff;
  background: #957c68;
  margin: 10px 45px;
  padding: 20px;
}

この犬について詳しくみる

ブロック要素とインライン要素のおさらい！

本講座のおさらいの小テストをしよう

Q.要素の幅が親要素まで広がるのはブロック要素とインライン要素どっち？

ブロック要素

Q.インライン要素が連続して並ぶ時、縦と横どのように並ぶ？

横に並ぶ

Q.ブロック要素とインライン要素、それぞれ３つタグを挙げてみよう

ブロック要素：p、h1〜h6、div、ul、ol、li…etc
インライン要素：span、a、img、strong、br…etc

Q.インライン要素にmarginをつけた時、左右と上下効かないのはどっち？

上下

Q.インライン要素にpaddingをつけた時、上下の余白はどうなる？

他の要素と被る

Q.インライン要素をブロック要素として使いたい時のプロパティと値は？

display : block

Q.ブロック要素をインライン要素として使いたい時のプロパティと値は？

display : inline