2カラムレイアウトの作り方
今やレスポンシブが常識となり、PC表示では多く取り入れらている2カラムレイアウトの作り方を分かりやすく紹介します。方法はいくつかあるとは思いますが、今回は王道である2つの方法で説明したいと思います。
またPCとモバイルでレイアウトが切り替わるレスポンシブ対応についても紹介します。
最初はfloatを使用した方法を紹介します。まずは完成形から。
カラム左右は分かりやすく50%:50%にしています。
floatの解説
floatプロパティは、指定された要素を左または右に寄せて配置する際に使用します。
■値
left
指定した要素を左に寄せます。後に続く要素は右側に回り込みます。
right
指定した要素を右に寄せます。後に続く要素は左側に回り込みます。
サンプルコード
まずはhtmlから。
<body>
<div class="float_column_outer_wrapper">
<div class="column float_column_header">header</div>
<div class="column float_column_left">left</div>
<div class="column float_column_right">right</div>
<div class="column float_column_footer">footer</div>
</div>
</body>
続いてcssです。
.float_column_outer_wrapper{
width:100%;
height:100%;
margin:0;
}
.float_column_header{
width:100%;
height:50px;
background:#dcdcdc;
}
.float_column_left,.float_column_right{
height:200px;
width:50%;
}
.float_column_left{
float:left;
background:#00ffff;
}
.float_column_right{
float:right;
background:#7fffd4;
}
.float_column_footer{
clear:both; /*footerの回り込みを解除*/
width:100%;
height:50px;
background:#000;
color:#fff;
}
続いてFlexboxを使用した方法を紹介します。
完成形はfloatと同じですね。
Flexboxの解説
Flexboxはcss3から導入された新しいレイアウトモジュールです。
これまで並びの配置は先に説明したfloatで行うことが一般的でしたが、Flexboxを使用することで簡単に、また色々なレイアウトが可能になりました。
■値
Flexboxは、並びを配置したい子要素を親要素で囲み、親要素に「display:flex;」を指定します。
Flexboxについての詳細はこちらのサイトで大変分かりやすく解説されていますので、詳しく確認したい方はご覧ください。
サンプルコード
htmlではfloatのコードに、クラスleftとrightを囲むクラス（flex_column_wrapper）を加えます。
<body>
<div class="flex_column_outer_wrapper">
<div class="column flex_column_header">header</div>
<div class="flex_column_wrapper">
<div class="column flex_column_left">left</div>
<div class="column flex_column_right">right</div>
</div>
<div class="column flex_column_footer">footer</div>
</div>
</body>
cssではflex_column_wrapperにdisplay:flexを与えます。
.flex_column_outer_wrapper{
width:100%;
height:100%;
margin:0;
}
.flex_column_header{
width:100%;
height:50px;
background:#dcdcdc;
}
.flex_column_wrapper{
display:flex;
}
.flex_column_left,.flex_column_right{
height:200px;
width:50%;
}
.flex_column_left{
background:#00ffff;
}
.flex_column_right{
background:#7fffd4;
}
.flex_column_footer{
width:100%;
height:50px;
background:#000;
color:#fff;
}
コードだけ見るとfloatの方が簡単で使いやすいと感じるかもしれませんが、Flexboxを使うメリットとしては様々なプロパティが用意されており、子要素内の垂直位置の調整（align-items）が安易にできるなど、子要素の調節がしやすいことです。
そういった面でもレイアウトにはFlexboxをおすすめします。
カラムレイアウトのレスポンシブ対応としては、PCでは2カラムや3カラムで表示させ、スマホ等のモバイルでは1カラム（縦並び）にすることが一般的かと思います。
ここではFlexboxを使用した方法で解説したいと思います。まずは完成形から。
PCでの表示
スマホでの表示
サンプルコード
htmlは基本同じですが、クラス名のみ少し変更しています。
<body>
<div class="responsive_column_outer_wrapper">
<div class="responsive_column_header">header</div>
<div class="responsive_column_wrapper">
<div class="column responsive_column_left">カラム1</div>
<div class="column responsive_column_right">カラム2</div>
</div>
<div class="column responsive_column_footer">footer</div>
</div>
</body>
cssではメディアクエリを使用し、画面サイズによって表示を変更させます。
head内に「meta viewport」タグの追加を忘れずに。
.responsive_column_outer_wrapper{
width:100%;
height:100%;
margin:0;
}
.responsive_column_header{
width:100%;
height:50px;
background:#dcdcdc;
}
.responsive_column_wrapper{
display:flex;
}
.responsive_column_left,.responsive_column_right{
height:200px;
width:50%;
}
.responsive_column_left{
background:#00ffff;
}
.responsive_column_right{
background:#7fffd4;
}
.responsive_column_footer{
width:100%;
height:50px;
background:#000;
color:#fff;
}
@media screen and (max-width:768px){
.responsive_column_header{
width:100%;
height:50px;
background:#dcdcdc;
}
.responsive_column_wrapper{
display:block; /*カラム毎に改行させる*/
}
.responsive_column_left,.responsive_column_right{
height:200px;
width:100%; /*横サイズを画面いっぱいに表示*/
}
.responsive_column_left{
background:#00ffff;
}
.responsive_column_right{
background:#7fffd4;
}
.responsive_column_footer{
width:100%;
height:50px;
background:#000;
color:#fff;
}
}
以上2カラムレイアウトの作り方でした。
レイアウト調節はビギナーの方はとっつきにくい部分があるかもしれませんが、レスポンシブデザインが常識となった現代では必須のスキルです。ぜひ習得し、魅力的なサイト作りを行いましょう！
