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

2columun

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

 

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

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

 

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

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

 

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

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%;
 }
}

結局どっちを使えばいいのか?2カラム構成を複数回作成した経験から思うこと

私的にはゼッタイに display:flexの方がより良いと思うんです。

 

何故かというと前にも述べた通り、floatに比べレイアウトが崩れにくく扱いやすい。

その名の通りフレキシブルなんですよ。

 

具体例として、まずサイトには画像や文章などたくさんの要素があります。

そこでfloatを用いて”滑り込ませ”を行うと経験ある方も多いかと思いますが、レイアウトが崩れる可能性が非常に高いです。

 

それに比べflexboxだと本当に安定していて、justify-contentやalign-itemsで簡単に配置の設定ができます。

後々のことも考慮するとやはり ”dispaly:flex” で2カラムを作った方が良いということなんです。

 

最後に

上記の通り、2カラムを作るのは結構簡単です。

各ブロックの横幅を決めて横に並べる。

本当に2カラム構成はいろいろなところで使われる需要の高いデザインですので、ぜひ自力で作れるようにしときましょう!

タイトルとURLをコピーしました