ECサイト用パーツ

特集・コンテンツ一覧

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

パーツ設置費用

20,000

費用メモ

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

CSS

.special__edition__type1 {
	margin: 0 -20px;
}
.special__edition__type1 .box {
	display: block;
	margin: 0 20px 40px;
	width: -webkit-calc(100% / 2 - 40px);
	width: calc(100% / 2 - 40px);
}
.special__edition__type1 .box:nth-last-child(1),
.special__edition__type1 .box:nth-last-child(2) {
	margin-bottom: 0;
}
.special__edition__type1 .box figure {
	margin-bottom: 15px;
}
.special__edition__type1 .box p {
	text-align: center;
}
@media screen and (max-width: 800px) {
	.special__edition__type1 {
		margin: 0 -2vw;
	}
	.special__edition__type1 .box {
		margin: 0 2vw 4vw;
		width: -webkit-calc(100% / 2 - 4vw);
		width: calc(100% / 2 - 4vw);
	}
	.special__edition__type1 .box figure {
		margin-bottom: 1.5vw;
	}
	.special__edition__type1 .box p {
		font-size: 1.8vw;
	}
}
@media screen and (max-width: 540px) {
	.special__edition__type1 {
		margin: 0;
	}
	.special__edition__type1 .box {
		margin: 0 0 6vw;
		width: 100%;
	}
	.special__edition__type1 .box:nth-last-child(2) {
		margin-bottom: 6vw;
	}
	.special__edition__type1 .box figure {
		margin-bottom: 2vw;
	}
	.special__edition__type1 .box p {
		font-size: 3.6vw;
	}
}

HTML

<section class="special__edition__type1">
	<div class="flexBox">
		<a class="box" href="">
			<figure>
				<img src="/wp/wp-content/uploads/2021/02/banner-dammy-image5.jpg">
			</figure>
			<p>てきすとてきすとてきすとてきすとてきすとてきすと</p>
		</a>
		<a class="box" href="">
			<figure>
				<img src="/wp/wp-content/uploads/2021/02/banner-dammy-image5.jpg">
			</figure>
			<p>てきすとてきすとてきすとてきすとてきすとてきすと</p>
		</a>
		<a class="box" href="">
			<figure>
				<img src="/wp/wp-content/uploads/2021/02/banner-dammy-image5.jpg">
			</figure>
			<p>てきすとてきすとてきすとてきすとてきすとてきすと</p>
		</a>
		<a class="box" href="">
			<figure>
				<img src="/wp/wp-content/uploads/2021/02/banner-dammy-image5.jpg">
			</figure>
			<p>てきすとてきすとてきすとてきすとてきすとてきすと</p>
		</a>
	</div>
</section>