ECサイト用パーツ

ランキング表示 アイコン付

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

No.1

てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと

No.2

てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと

No.3

てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと

ルール・連絡事項

王冠アイコンはサイトデザインに合わせて変更できる

パーツ設置費用

5,000

CSS

.ranking__place__type3 {
  background-color: #f2f2f2;
  padding: 50px 60px;
}
.ranking__place__type3 .flexBox {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 -25px;
}

.ranking__place__type3 .box {
  margin: 0 25px;
  -webkit-width: calc(100% / 3 - 50px);
  width: calc(100% / 3 - 50px);
}

.ranking__place__type3 .num {
  color: #595959;
  font-family: 'Montserrat', sans-serif;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.0;
  margin: 0 0 10px;
  text-align: center;
}
.ranking__place__type3 .icon {
  display: table;
  margin: 0 auto 20px;
  padding-left: 45px;
  position: relative;
}
.ranking__place__type3 .icon img {
  image-rendering: -webkit-optimize-contrast;
  position: absolute;
  bottom: 3px;
  left: 0;
  width: 32px;
}

.ranking__place__type3 figure {
  padding-top: 100%;
  position: relative;
  width: 100%;
}
.ranking__place__type3 figure img {
  image-rendering: -webkit-optimize-contrast;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

.ranking__place__type3 .name {
  font-size: 14px;
  line-height: 1.6;
  margin: 10px 0 0;
}

@media screen and (max-width: 800px) {
	.ranking__place__type3 {
		padding: 4vw 4vw;
	}
	
	.ranking__place__type3 .flexBox {
		margin: 0 -2vw;
	}

	.ranking__place__type3 .box {
		margin: 0 2vw;
		-webkit-width: calc(100% / 3 - 4vw);
		width: calc(100% / 3 - 4vw);
	}

	.ranking__place__type3 .num {
		font-size: 3.2vw;
		margin: 0 0 1.5vw;
	}
	.ranking__place__type3 .icon {
		margin: 0 auto 2vw;
		padding-left: 6vw;
	}
	.ranking__place__type3 .icon img {
		width: 4vw;
	}
	.ranking__place__type3 .name {
		font-size: 1.8vw;
		margin: 1.5vw 0 0;
	}
}
@media screen and (max-width: 540px) {
	.ranking__place__type3{
		padding: 10vw 6vw;
	}
	.ranking__place__type3 .flexBox {
		margin: 0;
	}

	.ranking__place__type3 .box {
		margin: 0 0 8vw;
		width: 100%;
	}
	.ranking__place__type3 .box:nth-last-child(1) {
		margin-bottom: 0;
	}

	.ranking__place__type3 .num {
		font-size: 7vw;
		margin: 0 0 2vw;
	}
	.ranking__place__type3 .icon {
		margin: 0 auto 3vw;
		padding-left: 13vw;
	}
	.ranking__place__type3 .icon img {
		width: 10vw;
	}
	.ranking__place__type3 .name {
		font-size: 3.6vw;
		margin: 3vw 0 0;
	}
}



HTML

<section class="ranking__place__type3">
  <div class="flexBox">
    <div class="box">
      <p class="num icon"><img src="/wp/wp-content/uploads/2021/02/icon-crown-1.png">No.1</p>
      <figure>
        <a href=""><img src="/wp/wp-content/uploads/2021/03/thumb-dammy-image7.jpg"></a>
      </figure>
      <p class="name">てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</p>
    </div>
    <div class="box">
      <p class="num icon"><img src="/wp/wp-content/uploads/2021/02/icon-crown-2.png">No.2</p>
      <figure>
        <a href=""><img src="/wp/wp-content/uploads/2021/03/thumb-dammy-image7.jpg"></a>
      </figure>
      <p class="name">てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</p>
    </div>
    <div class="box">
      <p class="num icon"><img src="/wp/wp-content/uploads/2021/02/icon-crown-3.png">No.3</p>
      <figure>
        <a href=""><img src="/wp/wp-content/uploads/2021/03/thumb-dammy-image7.jpg"></a>
      </figure>
      <p class="name">てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</p>
    </div>
  </div>
</section>