ウェブデザインにおいて、効果的で柔軟なレイアウトを作成する方法は重要です。Flexboxはそのための強力なツールであり、今回はFlexboxを用いてシンプルで美しい2列の横並びレイアウトを構築する手順を紹介します。これにより、ウェブサイトやブログのデザインを向上させ、ユーザーエクスペリエンスを向上させることができます。
サンプルコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
display: flex;
flex-wrap: wrap; /* flexアイテムを折り返す（複数行に配置する） */
}
.column {
width: calc(50% - 20px); /* 列の幅を均等に分配し、マージンを考慮して計算 */
margin: 10px;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box; /* ボックスモデルを維持するために必要なスタイル */
}
</style>
</head>
<body>
<div class="container">
<div class="column">
<p>コンテンツ 1</p>
</div>
<div class="column">
<p>コンテンツ 2</p>
</div>
<div class="column">
<p>コンテンツ 3</p>
</div>
<!-- 他にも必要な行があれば追加 -->
</div>
</body>
</html>
コンテンツ 1
コンテンツ 2
コンテンツ 3
このコードでは、.containerがflex-wrap: wrap;を使用して折り返しを有効にし、.columnのwidthが calc(50% – 20px) になっています。これにより、列の幅が均等になり、マージンを考慮して2列に配置されます。
この設定では、各列の横幅は50%で、マージンが20px（左右合計）なので、実際にはそれ以下の幅を指定しています。必要に応じてこの値を調整してください。また、新しい行を追加することで、さらに列を増やすことができます。
横幅を調整することで列数を変更することができます。用途に合わせて調整してみてください。
よくある質問（FAQ）
Q. CSSで2列のFlexboxレイアウトを作るには？
A. 親にdisplay: flex; flex-wrap: wrap;を設定し、各子要素にwidth: 50%（またはflex: 0 0 50%）を設定します。gapでカラム間スペースを追加する場合はwidthをcalc(50% – gap/2)に調整します。
Q. 2列レイアウトをスマホで1列にするには？
A. スマホ用のメディアクエリで子要素のwidthを100%に変更します。例：@media (max-width: 767px) { .item { width: 100%; } }。CSS Gridのauto-fitを使うとより簡単にレスポンシブな列数制御ができます。
Q. 2列で奇数件のコンテンツを並べる際の最後の要素を調整するには？
A. :last-child { flex: 1; max-width: 50%; }または:nth-child(odd):last-child { flex: 0 0 100%; }で最後の孤立した要素のスタイルを調整できます。