【CSS3】displayinline-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;}
以上で記事の解説はお終い！
HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！