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>