HTMLとCSSで作る2カラム・3カラム・4カラムのレイアウト

WordPressのテンプレートで全体レイアウトを設定した上で、その中の1カラム部分（メインコンテンツなど）に、2カラム・3カラム・4カラムのデザインを入れたい場合がありますよね。
このような細かいレイアウトをHTMLとCSSで作る方法を解説します。

基本の考え方

1カラム内にさらにカラム構造を作る場合は、HTMLで入れ子構造を作り、CSSでスタイリングします。以下では、具体的な例を示していきます。

1. 1カラム内に2カラムを作る

   例えば、記事内で左右に分割されたコンテンツを表示したい場合の例です。

   			<div class="content">
   				<div class="two-column">
   		            <div class="column">
   						<h2>花火</h2>
   						<p>
   							花火は、火薬を使って空中で美しい光や音を演出するエンターテイメントの一種です。<br>
   							主に祝祭や記念日のイベント、夏の風物詩として親しまれています。<br>
   							色鮮やかな模様や形が空に広がり、見る人々に感動を与える伝統的な芸術です。
   						</p>
   					</div>
   		            <div class="column"><img src="DSC_0409.jpg" alt="" /></div>
   				</div>
   			</div>
   		

   			.content {
   				width: 80%;
   				margin: 0 auto;
   			}
   			.two-column {
   				display: flex;
   				gap: 10px; /* カラム間のスペース */
   			}
   			.column {
   				flex: 1;
   				background-color: #f4f4f4;
   				padding: 20px;
   				text-align: center;
   			}
   			.column img {
   				width: 100%;
   				height: auto;
   			}
   		

   

   ポイント

   display: flex を使って横並びを実現します。
   gap を使えば、簡単にカラム間の余白を調整できます。

---

2. 1カラム内に3カラムを作る

   次は、3つの均等なカラムを作る例です。

   			<div class="content">
   				<div class="three-column">
   		            <div class="column"><img src="DSC_0373.jpg" alt="" /></div>
   		            <div class="column"><img src="DSC_0409.jpg" alt="" /></div>
   		            <div class="column"><img src="DSC_0469.jpg" alt="" /></div>
   				</div>
   			</div>
   		

   			.content {
   				width: 80%;
   				margin: 0 auto;
   			}
   			.three-column {
   				display: flex;
   				gap: 10px;
   			}
   			.column {
   				flex: 1;
   				background-color: #e8e8e8;
   				padding: 20px;
   				text-align: center;
   			}
   			.column img {
   				width: 100%;
   				height: auto;
   			}
   		

   

   ポイント

   flex: 1 で各カラムを均等な幅にしています。
   必要に応じて特定のカラムだけ幅を変えたい場合は、個別に flex 値を指定します。

---

3. 1カラム内に4カラムを作る

   最後に、1行に4つのカラムを配置する方法を紹介します。

   			<div class="content">
   				<div class="four-column">
   		            <div class="column"><img src="DSC_0373.jpg" alt="" /></div>
   		            <div class="column"><img src="DSC_0409.jpg" alt="" /></div>
   		            <div class="column"><img src="DSC_0469.jpg" alt="" /></div>
   		            <div class="column"><img src="DSC_0481.jpg" alt="" /></div>
   				</div>
   			</div>
   		

   			.four-column {
   				display: grid;
   				grid-template-columns: repeat(4, 1fr);
   				gap: 10px;
   			}
   			
   			.column {
   				background-color: #dcdcdc;
   				padding: 20px;
   				text-align: center;
   			}
   		

   

   ポイント

   display: grid を使うことで、カラム数を簡単に指定できます。
   grid-template-columns: repeat(4, 1fr) は「4つの均等なカラム」を指定する記述です

   ---

   レイアウトを組み合わせる

   上記の方法を応用して、同じ1カラム内で複数のレイアウトを組み合わせることも可能です。

   		    <div class="content">
   		      <!-- 2カラム -->
   				<div class="two-column">
   		            <div class="column">
   						<h2>花火</h2>
   						<p>
   							花火は、火薬を使って空中で美しい光や音を演出するエンターテイメントの一種です。<br>
   							主に祝祭や記念日のイベント、夏の風物詩として親しまれています。<br>
   							色鮮やかな模様や形が空に広がり、見る人々に感動を与える伝統的な芸術です。
   						</p>
   					</div>
   		            <div class="column"><img src="DSC_0409.jpg" alt="" /></div>
   				</div>
   		
   		        <!-- 3カラム -->
   		        <div class="three-column">
   		            <div class="column"><img src="DSC_0373.jpg" alt="" /></div>
   		            <div class="column"><img src="DSC_0409.jpg" alt="" /></div>
   		            <div class="column"><img src="DSC_0469.jpg" alt="" /></div>
   		        </div>
   		
   		        <!-- 4カラム -->
   		        <div class="four-column">
   		            <div class="column"><img src="DSC_0373.jpg" alt="" /></div>
   		            <div class="column"><img src="DSC_0409.jpg" alt="" /></div>
   		            <div class="column"><img src="DSC_0469.jpg" alt="" /></div>
   		            <div class="column"><img src="DSC_0481.jpg" alt="" /></div>
   		        </div>
   		    </div>