ホームへ

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

完成形

ホームページを作るとき往々にしてサイドメニューを置き、divを横並べにします。

ご覧の通り当サイトもその一つです。

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

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

利用するCSS

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

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

  1. display:flex
  2. width:calc(100% - ○px)
  3. box-sizing:border-box

先に注意点

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

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

  1. 最小限の要素で作成する。
  2. 追加するたびに表示チェックする。
    おかしくなったらすぐ戻す。

これから解説する「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;
    background: #CCC;
}
</style>
<div class="flex">
    <div>左</div>
    <div>右</div>
</div>

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

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

それが「display:flex」です。

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

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

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

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

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

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

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

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

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

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

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

続いて左の横幅を決めますが、全体の幅はレスポンシブ対応のため「width:100%」としましょう。ということは左はpx指定できません。

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

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

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

全体が100%で右が200pxですから、左は「全体-右」つまり「100%-200px」にしたいところです。

よって左の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>

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

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

基本的には上記でdivの横並びは完成です。

ここからは補足です。

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

<style>
.flex{
    display: flex;
    border: 1px solid #333;
}
.flex div{
    border: 1px solid #333;
    background: #CCC;
}
.right{
    width: 200px;
}
.left{
    width: calc(100% - 200px);
    /*コレ追加*/padding: 10px 50px;
}
</style>
<div class="flex">
    <div class="left05">左</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{
    border: 1px solid #333;
    background: #CCC;
}
.right{
    width: 200px;
}
.left{
    width: calc(100% - 200px);
    padding: 10px 50px;
    /*コレ追加*/box-sizing: border-box;
}
</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がオススメです。

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を指定しても崩れません。

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

マンガで読める関連記事