ECサイト用パーツ

ブランド一覧

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

BRAND

ブランドカナ

BRAND

ブランドカナ

BRAND

ブランドカナ

BRAND

ブランドカナ

BRAND

ブランドカナ

BRAND

ブランドカナ

BRAND

ブランドカナ

BRAND

ブランドカナ

BRAND

ブランドカナ

BRAND

ブランドカナ

BRAND

ブランドカナ

BRAND

ブランドカナ

BRAND

ブランドカナ

BRAND

ブランドカナ

BRAND

ブランドカナ

ルール・連絡事項

ブランドロゴの提供があれば、テキストをロゴ画像に置き換えて利用できる

パーツ設置費用

10,000円

費用メモ

上記は画像想定の価格（1点あたり 600円）
※テキストの場合　1点あたり 500円×15＝7,500円

CSS

.brand__list .flexBox {
  margin: 0 -15px;
}

.brand__list .box {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: solid 1px #ccc;
  box-sizing: border-box;
  margin: 0 15px 30px;
  padding: 30px 10px;
  width: -webkit-calc(100% / 5 - 30px);
  width: calc(100% / 5 - 30px);
}
.brand__list .box:hover {
  background-color: #b3b3b3;
  color: #fff;
}

.brand__list .box h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 0;
  text-align: center;
  width: 100%;
}
.brand__list .box p {
  font-size: 12px;
  text-align: center;
  width: 100%;
}

@media screen and (max-width: 800px) {
	.brand__list .flexBox {
		margin: 0 -2vw;
	}
	.brand__list .box {
		margin: 0 2vw 4vw;
		padding: 2vw;
		width: -webkit-calc(100% / 2 - 4vw);
		width: calc(100% / 3 - 4vw);
	}
	.brand__list .box p {
		font-size: 1.8vw;
	}
}
	
@media screen and (max-width: 540px){
	.brand__list .flexBox{
		margin: 0;
	}
	.brand__list .box{
		margin: 0 2vw 4vw;
		padding: 5vw;
		width: 100%;
		width: calc(100% / 2 - 4vw);
	}
	.brand__list .box p {
		font-size: 3.6vw;
	}
	
	
}

HTML

<section class="brand__list">
  <div class="flexBox">
    <a class="flexBox box" href="">
      <h3>BRAND</h3>
      <p>ブランドカナ</p>
    </a>
    <a class="flexBox box" href="">
      <h3>BRAND</h3>
      <p>ブランドカナ</p>
    </a>
    <a class="flexBox box" href="">
      <h3>BRAND</h3>
      <p>ブランドカナ</p>
    </a>
    <a class="flexBox box" href="">
      <h3>BRAND</h3>
      <p>ブランドカナ</p>
    </a>
    <a class="flexBox box" href="">
      <h3>BRAND</h3>
      <p>ブランドカナ</p>
    </a>
    <a class="flexBox box" href="">
      <h3>BRAND</h3>
      <p>ブランドカナ</p>
    </a>
    <a class="flexBox box" href="">
      <h3>BRAND</h3>
      <p>ブランドカナ</p>
    </a>
    <a class="flexBox box" href="">
      <h3>BRAND</h3>
      <p>ブランドカナ</p>
    </a>
    <a class="flexBox box" href="">
      <h3>BRAND</h3>
      <p>ブランドカナ</p>
    </a>
    <a class="flexBox box" href="">
      <h3>BRAND</h3>
      <p>ブランドカナ</p>
    </a>
    <a class="flexBox box" href="">
      <h3>BRAND</h3>
      <p>ブランドカナ</p>
    </a>
    <a class="flexBox box" href="">
      <h3>BRAND</h3>
      <p>ブランドカナ</p>
    </a>
    <a class="flexBox box" href="">
      <h3>BRAND</h3>
      <p>ブランドカナ</p>
    </a>
    <a class="flexBox box" href="">
      <h3>BRAND</h3>
      <p>ブランドカナ</p>
    </a>
    <a class="flexBox box" href="">
      <h3>BRAND</h3>
      <p>ブランドカナ</p>
    </a>
  </div>
</section>

関連パーツ

カテゴリ一覧

カテゴリー一覧