バナー配置

タブレット表示スマホ表示

ルール・連絡事項

・alt のテキストは画像に合わせて変更する

パーツ設置費用

20,000円

費用メモ

バナー1点あたり　5,000円

CSS

.banner__col2 .flexBox {
	margin: 0 -20px;
}
.banner__col2 .box {
	margin: 0 20px 60px;
	width: -webkit-calc(100% / 2 - 40px);
	width: calc(100% / 2 - 40px);
}
.banner__col2 .box:last-child,
.banner__col2 .box:nth-last-child(2) {
	margin-bottom: 0;
}
@media screen and (max-width: 800px) {
	.banner__col2 .flexBox {
		margin: 0 -1.5vw;
	}
	.banner__col2 .box {
		margin: 0 1.5vw 4vw;
		width: -webkit-calc(100% / 2 - 3vw);
		width: calc(100% / 2 - 3vw);
	}
}
@media screen and (max-width: 540px) {
	.banner__col2 .flexBox {
		margin: 0;
	}
	.banner__col2 .box {
		margin: 0 0 4vw;
		width: 100%;
	}
	.banner__col2 .box:nth-last-child(2) {
		margin: 0 0 4vw;
	}
}

HTML

<sectoin class="banner__place banner__col2">
	<div class="flexBox">
		<a class="box" href=""><img src="/wp/wp-content/uploads/2021/02/banner-dammy-image2.jpg" alt="バナー"></a>
		<a class="box" href=""><img src="/wp/wp-content/uploads/2021/02/banner-dammy-image2.jpg" alt="バナー"></a>
		<a class="box" href=""><img src="/wp/wp-content/uploads/2021/02/banner-dammy-image2.jpg" alt="バナー"></a>
		<a class="box" href=""><img src="/wp/wp-content/uploads/2021/02/banner-dammy-image2.jpg" alt="バナー"></a>
	</div>
</section>