【CSS】スマホ表示時に画像配置を変更する方法

約7分

どうも！会社に勤めながら、副業をやっているJavaプログラマ、函南助教授ことカンナミユート(@yuuto_kannami )です。

【CSS】スマホ表示時に画像配置を変更する方法

スマホ表示時(レスポンシブ時)に画像配置を変更する方法をサクッとご紹介！ 言葉だと説明しにくいのですが、PC表示だと左に「タイトル」と「説明文」右に「画像」を表示、スマホ表示時だと「タイトル」「画像」「説明文」の順番に表示する方法です。

スポンサーリンク


画像が右のレスポンシブレイアウト

表示例

iPhone XR ブルーは鮮やかでポップな色味

タイトル部分

メイン部分（こちらに説明文を入力。）

テスト

テスト

テスト

フッター部分（こちらに補足説明文を入力。いらない場合はcontainer-footerのdivごと消す。）

コード

HTML

<div class="container-img-right">
	<div class="container-img">
		画像
	</div>
	<div class="container-title">
		タイトル
	</div>
	<div class="container-main">
		メイン
	</div>
	<div class="container-footer">
		フッター
	</div>
</div>

CSS

/* 全体 */
.container-img-right {
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: 90px 5fr 1fr;
	-ms-display: grid;
	margin: 20px 0;
}
/* 画像 */
.container-img-right .container-img {
	grid-column: 2 / 3;
	grid-row: 1 / 3;
}
.container-img-right .container-img img{
	margin: 0;
}
/* タイトル */
.container-img-right .container-title {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	padding-right: 50px;
}
/* メイン */
.container-img-right .container-main {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
	padding-right: 50px;
}
/* フッター */
.container-img-right .container-footer {
	grid-column: 1 / 3;
	grid-row: 3 / 4;
	text-align: center;
}

/* レスポンシブ */
@media screen and (max-width: 1100px) {
	/* 全体 */
	.container-img-right {
		grid-template-columns: 100%;
		grid-template-rows: 90px;
	}
	/* 画像 */
	.container-img-right .container-img {
		grid-column: 1 / 2;
		grid-row: 2 / 3;
	}
	/* タイトル */
	.container-img-right .container-title {
		grid-column: 1 / 2;
		grid-row: 1 / 2;
		padding-right: 0;
	}
	/* メイン */
	.container-img-right .container-main {
		grid-column: 1 / 2;
		grid-row: 3 / 4;
		padding-right: 0;
	}
	/* フッター */
	.container-img-right .container-footer {
		grid-column: 1 / 2;
		grid-row: 4 / 5;
	}
}

/* 色変更---------- */
/* 画像 */
.container-img-right .container-img {
	background-color: #61AE24;
}
/* タイトル */
.container-img-right .container-title {
	background-color: #F02475;
}
/* メイン */
.container-img-right .container-main {
	background-color: #F27435;
}
/* フッター */
.container-img-right .container-footer {
	background-color: #00A1CB;
}

画像が右のレスポンシブレイアウト

表示例

iPhone XR ブルーは鮮やかでポップな色味

タイトル部分

メイン部分（こちらに説明文を入力。）

テスト

テスト

テスト

フッター部分（こちらに補足説明文を入力。いらない場合はcontainer-footerのdivごと消す。）

コード

HTML

<div class="container-img-left">
	<div class="container-img">
		画像
	</div>
	<div class="container-title">
		タイトル
	</div>
	<div class="container-main">
		メイン
	</div>
	<div class="container-footer">
		フッター
	</div>
</div>

CSS

/* 全体 */
.container-img-left {
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: 90px 5fr 1fr;
	-ms-display: grid;
	margin: 20px 0;
}
/* 画像 */
.container-img-left .container-img {
	grid-column: 1 / 2;
	grid-row: 1 / 3;
}
.container-img-left .container-img img{
	margin: 0;
}
/* タイトル */
.container-img-left .container-title {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	padding-left: 50px;
}
/* メイン */
.container-img-left .container-main {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
	padding-left: 50px;
}
/* フッター */
.container-img-left .container-footer {
	grid-column: 1 / 3;
	grid-row: 3 / 4;
	text-align: center;
}

/* レスポンシブ */
@media screen and (max-width: 1100px) {
	/* 全体 */
	.container-img-left {
		grid-template-columns: 100%;
		grid-template-rows: 90px;
	}
	/* 画像 */
	.container-img-left .container-img {
		grid-column: 1 / 2;
		grid-row: 2 / 3;
	}
	/* タイトル */
	.container-img-left .container-title {
		grid-column: 1 / 2;
		grid-row: 1 / 2;
		padding-left: 0;
	}
	/* メイン */
	.container-img-left .container-main {
		grid-column: 1 / 2;
		grid-row: 3 / 4;
		padding-left: 0;
	}
	/* フッター */
	.container-img-left .container-footer {
		grid-column: 1 / 2;
		grid-row: 4 / 5;
	}
}

/* 色変更---------- */
/* 画像 */
.container-img-left .container-img {
	background-color: #61AE24;
}
/* タイトル */
.container-img-left .container-title {
	background-color: #F02475;
}
/* メイン */
.container-img-left .container-main {
	background-color: #F27435;
}
/* フッター */
.container-img-left .container-footer {
	background-color: #00A1CB;
}

スポンサーリンク