HTML・CSSで2カラム構成を実現する方法

HTMLで2カラム作りたいんだけど、作り方がわからない…。

自分なりにhtmlで2カラム構成を作る方法を紹介します。

ソースコードも載せているのでコピペして利用してください!

2カラム構成はいろいろなサイトで利用されていおり、自分で作れるようになると価値あるスキルになりますよ。

そんな難しくなのでここでマスターしちゃいましょう！

※コードの表示結果はこの上にある画像通りです。cssの記述 body{margin:0;padding:0} は以下では省略してます。

floatを活用する方法
筆者おすすめのdisplay:flexを活用する方法
結局どっちを使えばいいのか？2カラム構成を複数回作成した経験から思うこと
1. 最後に

floatを活用する方法

左、右側のブロックにそれぞれfloatを設定する方法です。

この時必ず各ブロックに”width”の設定をするのを忘れないでください！

（ここでは便宜上どちらのブロックの幅も50%にしています）

よくあるのですが、

「floatを左右それぞれ設定してさぁできたって見てみると2カラムどころかグチャってレイアウト崩れがてる…」

私もよく忘れます。

2カラム構成では各ブロックの横幅の設定が大切ということは意識しておいてください。

あと肝心なのがfooter{clear:both}です。

ここでfloatの解除を宣言してください！

floatはレイアウト崩壊の犯人によくなりますが解除し忘れが原因のことが少なくないです。

あとレスポンシブを意識して、タブレットサイズまでは各ブロックのfloatを解除して2カラムを1カラムにします。

<body>
<main>
<div class="LEFT_side">
<p>左側</p>
</div>
<div class="RIGHT_side">
<p>右側</p>
</div>
</main>
<footer>
<p>フッター</p>
</footer>
</body>

/******main*************/
.LEFT_side,
.RIGHT_side{/*便宜上*/
height: 500px;
width: 50%;
}
.LEFT_side{
float: left;
background-color: tomato;
}
.RIGHT_side{
float: right;
background-color: lightblue;
}
/*******footer***********/
footer{
clear: both;
background-color: lightgreen;
height: 200px;/*便宜上*/
}
/*タブレットサイズまで1カラム*/
@media (max-width:768px) {
.LEFT_side,
.RIGHT_side{
　clear: both;
　width: 100%;
　}
}

筆者おすすめのdisplay:flexを活用する方法

2つのブロックを囲んでいる要素（ここではmainタグ）に dispaly:flex を設定する方法です。

(HTMLコードは同じ)

flex-direction が横並びor縦並びを決定します。

タブレットサイズまでは、flex-directionをcolumunにして縦並びになるようにしています。

<body>
<main>
<div class="LEFT_side">
<p>左側</p>
</div>
<div class="RIGHT_side">
<p>右側</p>
</div>
</main>
<footer>
<p>フッター</p>
</footer>
</body>

/******main*************/
main{
display: flex;
flex-direction: row;
}
.LEFT_side,
.RIGHT_side{/*便宜上*/
height: 500px;
width: 50%;
}
.LEFT_side{
background-color: tomato;
}
.RIGHT_side{
background-color: lightblue;
}
/*******footer***********/
footer{
background-color: lightgreen;
height: 200px;/*便宜上*/
}
/*タブレットサイズまで1カラム*/
@media (max-width:768px) {
　main{
　　flex-direction: column;
　　align-items: center;
　}
　.LEFT_side,
　.RIGHT_side{
　　width: 100%;
　}
}

HTML5＆CSS3しっかり入門教室ゼロからよくわかる、使える力が身につく。