CSSテンプレート：2カラムレイアウト（25% / 75%）
📝 使用用途
このテンプレートは、左25%・右75%に分割された2カラム構成で、ナビゲーションと本文、メニューとコンテンツなどの画面分割レイアウトに適しています。
📘 解説
display: flex; を使って横並びにし、flex: 0 0 25% と flex: 1 で比率を調整しています。ギャップやパディングで余白も確保できます。
✅ デモ
左カラム（25%）
右カラム（75%）
📄 コード（部分）
<style>
.two-column-container {
display: flex;
gap: 1rem;
}
.left-column {
flex: 0 0 25%;
background-color: #f0f0f0;
padding: 1rem;
}
.right-column {
flex: 1;
background-color: #ffffff;
padding: 1rem;
border-left: 1px solid #ccc;
}
</style>
<div class="two-column-container">
<div class="left-column">左カラム（25%）</div>
<div class="right-column">右カラム（75%）</div>
</div>
📦 コード（HTML全体）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>2カラムレイアウトデモ</title>
<style>
.two-column-container {
display: flex;
gap: 1rem;
}
.left-column {
flex: 0 0 25%;
background-color: #f0f0f0;
padding: 1rem;
}
.right-column {
flex: 1;
background-color: #ffffff;
padding: 1rem;
border-left: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="two-column-container">
<div class="left-column">左カラム（25%）</div>
<div class="right-column">右カラム（75%）</div>
</div>
</body>
</html>
コピーしました！
🧩 応用とカスタマイズのポイント
この2カラムレイアウトは、情報を左右に分けて表示したい場面で幅広く利用できます。特に、flex: 0 0 25% の指定によって左カラムの幅を固定しつつ、右側のメインエリアを柔軟に広げられる点が特徴です。サイドバー＋本文のような構成にぴったりです。
また、モバイル対応を考慮する場合は、メディアクエリを使用して縦並びに切り替える設計が推奨されます。たとえば @media (max-width: 768px) で flex-direction: column; に変更するだけで、スマホでも見やすい構成になります。
スタイル面では、gap によって左右カラムの間隔を自然に保てるため、個別に margin を調整するよりも管理が楽になります。また border-left を右カラムに使うことで、視覚的な区切りを強調する効果も得られます。
🔧 実装時の注意点
コンテンツの量によっては、片方のカラムだけ高さが大きくなることもあります。その際は align-items: stretch; を指定することで、高さを揃えることができます。より一体感のある見た目を目指す場合に有効です。
このように、基本構造を活かしながらもCSSの工夫次第で応用の幅が広がるため、デザインやレイアウトのベースとして非常に有用なテンプレートです。