【html/CSS】divを横並びにする方法【手順を丁寧に解説】
完成形
ホームページを作るとき往々にしてサイドメニューを置き、divを横並べにします。
ご覧の通り当サイトもその一つです。
divを横並びにして、かつ崩さずピッタリにする方法を丁寧に説明します。
なお、CSSを使わないでhtmlだけで横並びにする方法はこちら↓
目次
利用するCSS
以下のCSSを使います。いずれも比較的新しいCSSです。
新しいCSSは便利です！いろいろ応用も効くのでゼヒ覚えましょう！
- display:flex
- width:calc(100% - ○px)
- box-sizing:border-box
先に注意点
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;
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を横並びにする方法でした。
