【HTML,CSS】floatを使わずinline-blockで要素を横に並べる方法

更新日:2019.05.27

floatを使わずにinline-blockで要素を横並びにする方法を解説．
効かない時の対処法，vertival-alignを使って上下・中央揃えにする方法も説明

floatとinline-block
inline-blockで横並びに配置する方法
効かない時の対処法
vertival-alignで上下・中央揃え

floatとinline-block

要素を横並びにする方法としてfloatプロパティを使うやり方もありますが，floatを使うとその後のレイアウトまで崩れてしまったり，それを修正するためにclearfixとかを使ったりいろいろと面倒です．

その点，inline-blockでの配置はとても簡単ですし，仕組みなども初心者に分かり易いです．

ここでは，floatを使わずにinline-blockを使って要素を横に並べる方法を解説します．

inline-blockで横並びに配置する方法

まず，異なる要素を横並びにしたい場合は調整のしやすさを考えて，それぞれをdiv要素にいれましょう．

div要素にまとめてからそれを横並びに配置する方が簡単で分かりやすいし，レイアウトがシンプルになるのでエラーなどが起こりづらいです．

まず，HTMLで書かれた要素は普通は縦に並んでいきます．

div1

div2

div3

HTML
<div id="div1">
    div1
</div>

<div id="div2">
    div2
</div>

<div id="div3">
    div3
</div>

CSS
div{
    width: 120px;
    height: 140px;
    border: 1px solid;
}

これを横並びに配置するには，横に並べたい要素にdisplay: inline-block;を与えるだけです．

そうすると，与えられた要素がinline-block要素となり横並びになります．

CSS
div{
    width: 120px;
    height: 140px;
    border: 1px solid;
}
#div1{
    display: inline-block;
}
#div2{
    display: inline-block;
}
#div3{
    display: inline-block;
}

div1

div2

div3

効かない時の対処法

もし，display: inline-block;を与えても横に並ばない時は，多くの場合，親要素と子要素の幅に原因があります．

横に並べたい各要素の幅の合計が親要素の幅よりも大きい場合，入りきらなかった分の要素が下に回ってしまいます．

親要素(幅350px)

div1
(幅120px)

div2
(幅120px)

div3
(幅120px)

そういう時は親要素の幅を広げるか，各要素の幅を調整していけばちゃんと横並び配置されます．

その際，各要素のwidthだけでなく，marginやpadding，borderなどすべてを含めた合計の幅よりも親要素が大きくなるように調整しましょう．

親要素を広げる

親要素(幅500px)

div1
(幅120px)

div2
(幅120px)

div3
(幅120px)

子要素を狭める

親要素(幅350px)

div1
(幅90px)

div2
(幅90px)

div3
(幅90px)

vertival-alignで上下・中央揃え

vertical-alignプロパティを使えば横に並べた要素を上揃え，下揃えにして上下の隙間を埋めたり，中央揃えに配置できます．

基本的には上揃えで配置されます．

親要素

div1

div2

div3

div4

div5

HTML
<div id="div1">
    div1
</div>

<div id="div2">
    div2
</div>

<div id="div3">
    div3
</div>

<div id="div4">
    div4
</div>

<div id="div5">
    div5
</div>

CSS
div{
    border: 1px solid;
}
#div1{
    display: inline-block;
    width: 100px;
    height: 100px;
}
#div2{
    display: inline-block;
    width: 110px;
    height: 150px;
}
#div3{
    display: inline-block;
    width: 90px;
    height: 120px;
}
#div4{
    display: inline-block;
    width: 110px;
    height: 180px;
}
#div5{
    display: inline-block;
    width: 120px;
    height: 120px;
}

vertical-align: bottom;を各div要素に与えれば下揃えになります．

CSS
div{
    border: 1px solid;
}
#div1{
    display: inline-block;
    width: 100px;
    height: 100px;
    vertical-align: bottom;
}
#div2{
    display: inline-block;
    width: 110px;
    height: 150px;
    vertical-align: bottom;
}
#div3{
    display: inline-block;
    width: 90px;
    height: 120px;
    vertical-align: bottom;
}
#div4{
    display: inline-block;
    width: 110px;
    height: 180px;
    vertical-align: bottom;
}
#div5{
    display: inline-block;
    width: 120px;
    height: 120px;
    vertical-align: bottom;
}

親要素

div1

div2

div3

div4

div5

同じようにvertical-align: middle;を各div要素に与えれば中央揃えになります．

CSS
div{
    border: 1px solid;
}
#div1{
    display: inline-block;
    width: 100px;
    height: 100px;
    vertical-align: middle;
}
#div2{
    display: inline-block;
    width: 110px;
    height: 150px;
    vertical-align: middle;
}
#div3{
    display: inline-block;
    width: 90px;
    height: 120px;
    vertical-align: middle;
}
#div4{
    display: inline-block;
    width: 110px;
    height: 180px;
    vertical-align: middle;
}
#div5{
    display: inline-block;
    width: 120px;
    height: 120px;
    vertical-align: middle;
}

親要素

div1

div2

div3

div4

div5

ちなみに，上揃えはvertical-align: top;です．

turutani.com