ECサイト用パーツ

パーツ設置費用

0

CSS

.side__category__list h2 {
	margin-bottom: 0;
}
.side__category__list ul {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.side__category__list li {
	border-bottom: solid 1px #ccc;
	box-sizing: border-box;
	width: 100%;
}
.side__category__list li a {
	display: block;
	font-size: 14px;
	padding: 20px;
}
.side__category__list li a:hover {
	background-color: #f7f7f7;
}

@media screen and (max-width: 800px) {
	.side__category__list li {
		width: 50%;
	}
	.side__category__list li a {
		font-size: 2.2vw;
		padding: 3vw;
	}
}

@media screen and (max-width: 540px) {
	.side__category__list li {
		width: 100%;
	}
	.side__category__list li a {
		font-size: 3.8vw;
		padding: 3.4vw;
	}
}

/** pc **/
@media screen and (max-width: 240px) {
	.side__category__list li {
		width: 100%;
	}
	.side__category__list li a {
		font-size: 14px;
		padding: 20px;
	}
}

HTML

<section class="side__category__list">
  <h2>カテゴリー</h2>
  <div class="box">
    <ul>
      <li><a href="">てきすとてきすとてきすと</a></li>
      <li><a href="">てきすとてきすとてきすと</a></li>
      <li><a href="">てきすとてきすとてきすと</a></li>
      <li><a href="">てきすとてきすとてきすと</a></li>
      <li><a href="">てきすとてきすとてきすと</a></li>
      <li><a href="">てきすとてきすとてきすと</a></li>
      <li><a href="">てきすとてきすとてきすと</a></li>
      <li><a href="">てきすとてきすとてきすと</a></li>
      <li><a href="">てきすとてきすとてきすと</a></li>
      <li><a href="">てきすとてきすとてきすと</a></li>
    </ul>
  </div>
</section>