マンガでわかるホームページ作成

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

完成形

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

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

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

利用する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: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を横並びにする方法でした。

関連記事