ECサイト用パーツ

パーツ設置費用

10,000

費用メモ

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

CSS

/** -- バナー --**/
.side__banner {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.side__banner figure + figure {
	margin-top: 20px;
}
.side__banner figure a:hover {
	opacity: .65;
}

@media screen and (max-width: 800px) {
	.side__banner {
		margin: 0 -3vw;
	}
	.side__banner figure {
		margin: 0 3vw;
		width: calc(100% / 2 - 6vw);
	}
	.side__banner figure + figure {
		margin: 0 3vw;
	}
	.side__banner figure img {
		width: 100%;
	}
}

@media screen and (max-width: 540px) {
	
}

/** pc **/
@media screen and (max-width: 240px) {
	.side__banner {
		margin: 0;
	}
	.side__banner figure {
		margin: 0;
		width: 100%;
	}
	.side__banner figure + figure {
		margin: 0;
		margin-top: 20px;
	}
}

HTML

<section class="side__banner">
  <figure>
    <a href=""><img src="/wp/wp-content/uploads/2021/04/banner-dammy-image7.jpg"></a>
  </figure>
  <figure>
    <a href=""><img src="/wp/wp-content/uploads/2021/04/banner-dammy-image7.jpg"></a>
  </figure>
</section>