html divを横並びにする方法【手順を丁寧に解説します】
完成形
ホームページを作るとき往々にしてサイドメニューを置き、divを横並べにします。
ご覧の通り当サイトもその一つです。
divを横並びにして、かつ崩さずピッタリにする方法を説明します。
目次
利用する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:calc(100% - ○px)を指定する
次に左・右それぞれにwidth（横幅）を指定しましょう。
まず、右は固定の幅にするものとし、classと「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>とりあえず右の横幅が決まりました。
続いて左の横幅を決めますが、全体はレスポンシブ対応のため100％としましょう。ということは左はpx指定できません。
こんなときは「calc」を使います。
calcは異なる単位同士の足し算やかけ算ができる代物です。
calcについて詳しくはこちら↓
全体が100％で右が200pxですから、左にはclassと
「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を崩さずピッタリ横並びにできました。
まとめ
1.display:flexを使ってdivを横並びにする
子要素を横並びにします。
2.width:calc(100% - ○px)を指定する
一方をpx指定一方をレスポンシブにできます。
3.box-sizing:border-boxを指定する
paddingを指定しても崩れません。
以上、html divを横並びにする方法でした。
