レスポンシブデザインに挑戦！画面サイズに応じてカラム数を変化させる方法

Webデザインを次のレベルに引き上げるために、レスポンシブデザインを学びましょう。
レスポンシブデザインでは、画面サイズに応じてレイアウトを動的に調整し、どのデバイスでも美しい表示を実現します。

この記事では、画面幅に応じてカラム数を変化させる方法を具体例とともに解説します。

レスポンシブデザインの基本

レスポンシブデザインを実現するには、CSSのメディアクエリを使用します。メディアクエリを使うことで、特定の画面幅に応じたスタイルを適用できます。

メディアクエリの基本構文

@media (条件) {
	/* 条件を満たした場合のCSS */
}

例えば、画面幅が768px以下の場合に適用するスタイルは以下のように記述します：

@media (max-width: 768px) {
	/* スタイルの内容 */
}

画面幅が768px以上1024px以下の場合に適用するスタイルは以下のように記述します：

@media (max-width: 1024px) and (min-width: 768px) {
	/* スタイルの内容 */
}

画面幅に応じてカラム数を変化させる例

ここでは、通常は4カラム、タブレットサイズでは2カラム、スマートフォンサイズでは1カラムになるレイアウトを作成します。

<div class="responsive-grid">
	<div class="item">アイテム1</div>
	<div class="item">アイテム2</div>
	<div class="item">アイテム3</div>
	<div class="item">アイテム4</div>
	<div class="item">アイテム5</div>
	<div class="item">アイテム6</div>
</div>

.responsive-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

.item {
	background-color: #f4f4f4;
	padding: 20px;
	text-align: center;
}

/* タブレットサイズ用（768px 以上 1024px 以下） */
@media (max-width: 1024px) and (min-width: 768px) {
	.responsive-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* スマートフォンサイズ用（480px以下） */
@media (max-width: 480px) {
	.responsive-grid {
		grid-template-columns: 1fr;
	}
}

PCデザイン

タブレットデザイン

スマホデザイン

解説

• grid-template-columns: repeat(4, 1fr): 通常は4カラムに設定します。
• メディアクエリで変更: 画面幅が768px以下になると2カラムに、480px以下になると1カラムに変化します。
• gap: 各カラム間の余白を設定します。

レスポンシブデザインを適用した実例

フォトギャラリーの例

写真を表示するギャラリーでは、デバイスに応じて写真の配置を変更することが重要です。

<div class="photo-gallery">
	<img src="photo1.jpg" alt="写真1">
	<img src="photo2.jpg" alt="写真2">
	<img src="photo3.jpg" alt="写真3">
	<img src="photo4.jpg" alt="写真4">
	<img src="photo5.jpg" alt="写真5">
</div>

.photo-gallery {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
}

@media (max-width: 768px) {
	.photo-gallery {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 480px) {
	.photo-gallery {
		grid-template-columns: repeat(1, 1fr);
	}
}

PCデザイン

タブレットデザイン

スマホデザイン

まとめ

レスポンシブデザインを取り入れることで、Webサイトのユーザー体験が向上します。
特に、画面サイズに応じてカラム数を変化させるテクニックは、コンテンツの視認性を高め、訪問者が快適にサイトを閲覧できるようにする重要な要素です。
今回はカラムの変更だけをしましたが、font-sizeやmarginやpddingなどもサイズによって変化が可能です

次のステップでは、CSSの:hover擬似クラスを学んでみましょう