【CSS3】display:inline-blockの使い方

この記事ではどんなときにdisplay:inline-blockを指定すると嬉しいのかを解説していきます。

インライン要素に高さと幅を持たせたいとき
ブロック要素をインラインに埋め込みたいとき

インライン要素に高さと幅を持たせたいとき

通常、インライン要素には高さと幅を持たせることはできませんがdisplay:inline-blockを使うとインライン要素に高さを幅を持たせることができるようになります。
以下は単純にspan要素にheightとwidthを指定した例です。この状態ではspan要素にはまだ高さと幅は反映されていません。

See the Pen
inline-box by shiakisudev (@shiakisu)
on CodePen.

HTML

<h1>Tokyo<span class="boxA">2020</span>Olympic</h1>

CSS

.boxA{
background-color:red;
width:150px;
height:200px;
}

そこで、この状態のcssにdisplay:inline-blockを追加します。

See the Pen
by shiakisudev (@shiakisu)
on CodePen.

<h1>Tokyo<span class="boxA">2020</span>Olympic</h1>

CSS

.boxA{
display:inline-block;
background-color:red;
width:150px;
height:200px;
}

これでspan要素に高さと幅を持たせることができました。

ブロック要素をインラインに埋め込みたいとき

以下のようなブロック要素を横並びにする場合を考えてみます。

See the Pen
inline-block2 by shiakisudev (@shiakisu)
on CodePen.

HTML

<div id="A">A</div>
<div id="B">B</div>
<div id="C">C</div>
<div id="D">D</div>
<div id="E">E</div>

CSS

div{
  width:50px;
  height:50px;
}
#A{background-color:red;}
#B{background-color:blue;}
#C{background-color:green;}
#D{background-color:yellow;}
#E{background-color:pink;}

横並びにしたいのでcssにdisplay:inlineを追加してみます。するとheightとwidthを指定しているにもかかわらず、高さと幅がなくなってしまいました。
インライン要素というのは中身のコンテンツの長さに応じて横幅が決まるため、heightとwidthを指定は無視されるのです。

See the Pen
by shiakisudev (@shiakisu)
on CodePen.

HTML

<div id="A">A</div>
<div id="B">B</div>
<div id="C">C</div>
<div id="D">D</div>
<div id="E">E</div>

CSS

div{
  display:inline;
  width:50px;
  height:50px;
}
#A{background-color:red;}
#B{background-color:blue;}
#C{background-color:green;}
#D{background-color:yellow;}
#E{background-color:pink;}

heightとwidthを有効にしたい場合は、さきほど追加したdisplay:inlineをdisplay:inline-blockに変更してみます。すると高さと幅を維持したまま横並びにすることができます。

See the Pen
by shiakisudev (@shiakisu)
on CodePen.

HTML

<div id="A">A</div>
<div id="B">B</div>
<div id="C">C</div>
<div id="D">D</div>
<div id="E">E</div>

CSS

div{
  display:inline-block;
  width:50px;
  height:50px;
}
#A{background-color:red;}
#B{background-color:blue;}
#C{background-color:green;}
#D{background-color:yellow;}
#E{background-color:pink;}

ただしこの状態だと要素間に空白が出来てしまうので、これを取り除くにはコンテナ要素を作りletter-spacing:-1em;を追加します。子要素にはletter-spacing:normal;を追加しておきます。

See the Pen
by shiakisudev (@shiakisu)
on CodePen.

HTML

<div id="oya">
  <div id="A">A</div>
  <div id="B">B</div>
  <div id="C">C</div>
  <div id="D">D</div>
  <div id="E">E</div>
</div>

CSS

#oya{
  letter-spacing:-1em;
}
#oya > div{
  display:inline-block;
  width:50px;
  height:50px;
  letter-spacing:normal;
}
#A{background-color:red;}
#B{background-color:blue;}
#C{background-color:green;}
#D{background-color:yellow;}
#E{background-color:pink;}