ECサイト用パーツ

特集・コンテンツ一覧

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

ルール・連絡事項

トリミング画像をバナーに変えて利用も利用できる（料金はプラス）

パーツ設置費用

6,000円

費用メモ

1点あたり　1,000円
※バナーに変更　1点あたり　5,000円

CSS

.special__edition__type3 .flexBox {
	margin: 0 -20px;
}
.special__edition__type3 article.flexBox {
	border-top: solid 1px #ccc;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	box-sizing: border-box;
	margin: 0 20px;
	padding: 30px 0;
	width: -webkit-calc(100% / 2 - 40px);
	width: calc(100% / 2 - 40px);
}
.special__edition__type3 article:nth-last-child(1),
.special__edition__type3 article:nth-last-child(2) {
	border-bottom: solid 1px #ccc;
}
.special__edition__type3 article figure {
	padding-top: 40%;
	position: relative;
	width: 40%;
}
.special__edition__type3 article figure img {
	object-fit: cover;
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}
.special__edition__type3 article .text {
	box-sizing: border-box;
	padding-left: 30px;
	padding-right: 10px;
	width: 60%;
}
.special__edition__type3 article h3 {
	font-size: 18px;
	margin-bottom: 10px;
}
.special__edition__type3 article p {
	font-size: 14px;
	line-height: 1.8;
}
@media screen and (max-width: 800px) {
	.special__edition__type3 .flexBox {
		margin: 0;
	}
	.special__edition__type3 article.flexBox {
		margin: 0;
		padding: 4vw 0;
		width: 100%;
	}
	.special__edition__type3 article:nth-last-child(2) {
		border-bottom: none;
	}
	.special__edition__type3 article .text {
		padding-left: 4vw;
		padding-right: 1.5vw;
	}
	.special__edition__type3 article h3 {
		font-size: 2.4vw;
		margin-bottom: 1.5vw;
	}
	.special__edition__type3 article p {
		font-size: 1.8vw;
	}
}
@media screen and (max-width: 540px) {
	.special__edition__type3 article.flexBox {
		padding: 6vw 0;
	}
	.special__edition__type3 article figure {
		margin-bottom: 3vw;
		padding-top: 100%;
		width: 100%;
	}
	.special__edition__type3 article .text {
		padding-left: 4vw;
		padding-right: 4vw;
		width: 100%;
	}
	.special__edition__type3 article h3 {
		font-size: 4vw;
		margin-bottom: 1.5vw;
	}
	.special__edition__type3 article p {
		font-size: 3.4vw;
	}
}

HTML

<section class="special__edition__type3">
	<div class="flexBox">
		<article class="flexBox">
			<figure>
				<a href=""><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/02/thumb-dammy-image4.jpg"></a>
			</figure>
			<div class="text">
				<h3><a href="">てきすとてきすとてきすとてきすとてきすとてきすと</a></h3>
				<p>てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとすとてきすとすと</p>
			</div>
		</article>
		<article class="flexBox">
			<figure>
				<a href=""><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/02/thumb-dammy-image4.jpg"></a>
			</figure>
			<div class="text">
				<h3><a href="">てきすとてきすとてきすとてきすとてきすとてきすと</a></h3>
				<p>てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとすとてきすとすと</p>
			</div>
		</article>
		<article class="flexBox">
			<figure>
				<a href=""><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/02/thumb-dammy-image4.jpg"></a>
			</figure>
			<div class="text">
				<h3><a href="">てきすとてきすとてきすとてきすとてきすとてきすと</a></h3>
				<p>てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとすとてきすとすと</p>
			</div>
		</article>
		<article class="flexBox">
			<figure>
				<a href=""><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/02/thumb-dammy-image4.jpg"></a>
			</figure>
			<div class="text">
				<h3><a href="">てきすとてきすとてきすとてきすとてきすとてきすと</a></h3>
				<p>てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとすとてきすとすと</p>
			</div>
		</article>
		<article class="flexBox">
			<figure>
				<a href=""><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/02/thumb-dammy-image4.jpg"></a>
			</figure>
			<div class="text">
				<h3><a href="">てきすとてきすとてきすとてきすとてきすとてきすと</a></h3>
				<p>てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとすとてきすとすと</p>
			</div>
		</article>
		<article class="flexBox">
			<figure>
				<a href=""><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/02/thumb-dammy-image4.jpg"></a>
			</figure>
			<div class="text">
				<h3><a href="">てきすとてきすとてきすとてきすとてきすとてきすと</a></h3>
				<p>てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとすとてきすとすと</p>
			</div>
		</article>
	</div>
</section>

関連パーツ

特集・コンテンツ一覧

特集・コンテンツ一覧