Article Outline
2カラムはメインコンテンツの横にサイドバーがあるタイプのレイアウトです。
使用頻度が多いのでまとめました。
1.mainタグとasideタグを作成
まずは、骨組みを作成します。
２カラムは、メインとなるエリアとサブとなるエリアの２分割で成り立っています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body>
<div class="container">
<main class="main">
//メイン
</main>
<aside class="side">
//サブ
</aside>
</div>
</body>上記の図のように左全体をmainタグ、右側全体をasideタグを記述します。
そして、mainタグとasideタグをdivタグで囲ってあげます。
divタグにはクラス名(=container)をつけました。
2.display:flexを使う
後は、cssで【display:flex】を使うだけ。
.container {
display:flex;
}このようにdisplay:flexを記述すれば、2カラムの完成です。
3.Sectionタグで段落を作成
mainタグの中に、sectionタグを作成すれば段落を作ることが出来ます。
mainタグとasideタグを作れば、レイアウトを崩すことなく2カラムが作成できるのでオススメです。
幅の指定は％（パーセント）で行うと便利
2カラムの幅の指定は、％を使うと便利です。
例えばメイン幅とサイド幅を7：3の比率でレイアウトを組みたい場合は、
.main {
width: 70%;
}
.aside {
width: 30%;
}と指定します。
これでどんなディスプレイでの表示も7：3の比率で表示されるようになります。