【html/CSS】divを横並びにする方法【手順を丁寧に解説】

完成形

「divが縦に並んじゃう！横に並べたいんだけど!?」

divを横並びにして、かつ崩さずピッタリにする方法を丁寧に説明します。

なお、CSSを使わないでhtmlだけで横並びにする方法はこちら↓

利用するCSS

以下のCSSを使います。いずれも比較的新しいCSSです。

新しいCSSは便利です！いろいろ応用も効くのでゼヒ覚えましょう！

先に注意点

CSSは少しまちがうと崩れてしまう場合があります。

崩さないコツとしては以下の通り。

これから解説する「display:flex」はdivがたくさん出てきます。

このdivの数や閉じタグの位置をまちがえると崩れます。

まずは最小限のdivで横並べができることを試しましょう。

CSSやhtmlの記述をするたび、こまめに確認することをオススメします。崩れても気付いて元に戻してから再スタートすれば影響は最小限です。

意外とスペルミスなどのケアレスミスだったりします。

上記に気を付けた上で本題「divの横並び」を説明します。

1.親要素にdisplay:flexを指定してdivを横並びにする

そもそもdivは横並びになりません。

なぜならdivはブロック要素であり、ブロック要素は縦に並ぶものだからです。

ブロック要素について詳しくはこちら↓

divをそのまま記述すると

<style>
.flex{
    border: 1px solid #333;
}
.flex div{
    border: 1px solid #333;
}
.right{
    background: #ffd87c;
}
.left{
    background: #9ddbfc;
}
</style>
<div class="flex">
    <div class="left">左</div>
    <div class="right">右</div>
</div>

下記のように縦並びになります。

※わかりやすいように色や線をつけていますが、必須ではありません。

よってdivを横並びにする要素に変更する必要があります。

それが「display:flex」です。

display:flexを指定された要素の子要素は横並びになります。

子要素って何？というかたはこちら↓

下記のように横並べしたい親要素に「display:flex」を指定します。

<style>
.flex{
    /*コレ追加*/display: flex;
    border: 1px solid #333;
}
.flex div{
    border: 1px solid #333;
}
.right{
    background: #ffd87c;
}
.left{
    background: #9ddbfc;
}
</style>
<div class="flex">
    <div class="left">左</div>
    <div class="right">右</div>
</div>

とりあえず横並びになりました。これを横いっぱいに広げていきましょう。

flexについて詳しくはこちら↓

2.子要素にwidthを指定する

次に左・右の子要素それぞれにwidth（横幅）を指定しましょう。

まず、右のdivは固定の幅にするものとし「width:200px」を指定します。

<style>
.flex{
    display: flex;
    border: 1px solid #333;
}
.flex div{
    border: 1px solid #333;
}
.right{
    /*コレ追加*/width: 200px;
    background: #ffd87c;
}
.left{
    background: #9ddbfc;
}
</style>
<div class="flex">
    <div class="left">左</div>
    <div class="right">右</div>
</div>

とりあえず右の横幅が決まりました。

左の横幅は残りの幅いっぱいとしましょう。

残りの幅は「親の幅（100%）- 右の幅（200px）」です。

%とpxで単位が違って計算できませんね？

こんなときは「calc」を使います。

calcは異なる単位同士の足し算やかけ算ができる代物です。

calcについて詳しくはこちら↓

よって左のdivには「width:calc(100% - 200px)」を指定します。

calcはスペースのありなしで崩れるので注意しましょう。

<style>
.flex{
    display: flex;
    border: 1px solid #333;
}
.flex div{
    border: 1px solid #333;
    background: #CCC;
}
.right{
    width: 200px;
}
.left{
    /*コレ追加*/width: calc(100% - 200px);
}
</style>
<div class="flex">
    <div class="left">左</div>
    <div class="right">右</div>
</div>

これでほぼほぼ完成です。

基本的にはこれでdivの横並びは完成です。

3.box-sizing:border-boxを指定する

ここからは補足です。

divにpaddingやborderを指定する場合、左右の横幅が変わってしまいます。

<style>
.flex{
    display: flex;
    border: 1px solid #333;
}
.flex div{
    /*コレ追加*/padding: 10px 50px;
    border: 1px solid #333;
}
.right{
    width: 200px;
    background: #ffd87c;
}
.left{
    width: calc(100% - 200px);
    background: #9ddbfc;
}
</style>
<div class="flex">
    <div class="left">左</div>
    <div class="right">右</div>
</div>

↑上がpadding追加したもので
↓下はpadding追加していないものです。左と右の横幅が違いますね。

これでも崩れないのがdisplay:flexのいいところなんですが、これでは思った通りのデザインではありません。

widthはpaddingの内側の横幅を決めます。よってpaddingやborderが追加されると全体の横幅が変わってしまうのです。

paddingを指定しても同じサイズを保ってもらいましょう。

widthを指定している要素に「box-sizing:border-box」を指定します。

これによりwidthがpaddingやborderを含む横幅の指定になります。

<style>
.flex{
    display: flex;
    border: 1px solid #333;
}
.flex div{
    /*コレ追加*/box-sizing: border-box;
    padding: 10px 50px;
    border: 1px solid #333;
}
.right{
    width: 200px;
    background: #ffd87c;
}
.left{
    width: calc(100% - 200px);
    background: #9ddbfc;
}
</style>
<div class="flex">
    <div class="left">左</div>
    <div class="right">右</div>
</div>

↑上がpaddingとbox-sizing:border-boxを追加したもので
↓下はpadding追加していないものです。同じ横幅になりました。

これでdivを崩さずピッタリ横並びにできました。

その他の横並べ方法

display:flex以外にもdivを横並べする方法があります。

float:left

CSSのfloat:leftを使うとdivを横並べできます。

しかし、横幅を少し間違えただけで崩れてしまったり、必要以上に回り込まないようにCSSを追加で指定したりとメンドウであり、今回紹介したdisplay:flexに比べメリットがほぼありません。

横並べならdisplay:flexがオススメです。

floatを使いたい場合は下記をご覧ください。

display:inline-block

CSSのdisplay:inline-blockを指定するとdivを横並べできます。

しかし、下揃えになったり、空白が開いたりと調整がメンドウです。

やはりdisplay:flexのほうがオススメです。

小さい枠や文字を横並べしたいときなどに使いましょう。

table

tableを使うと横並べができます。

しかしtableは表(ひょう)として使うものであり、テキストや画像などのインライン要素を入れるべきであり、divを入れるのは本来の目的とは異なります。

…ただ一応divを入れても崩れることはありません。

どうしてもというときの最終手段として覚えておきましょう。

まとめ

1.display:flexを使ってdivを横並びにする

子要素を横並びにします。

2.width:calc(100% - ○px)を指定する

一方をpxで固定、一方をレスポンシブにできます。

3.box-sizing:border-boxを指定する

paddingを指定しても崩れません。

以上、display:flexでdivを横並びにする方法でした。