PC・スマホ両方とも横並びでカードタイプのリストで表示するレスポンシブ対応のHTML・CSSコード
3つ並びの場合
出力
-
タイトル
ここにティスクリプション
-
タイトル
ここにティスクリプション
-
タイトル
ここにティスクリプション
-
タイトル
ここにティスクリプション
-
タイトル
ここにティスクリプション
-
タイトル
ここにティスクリプション
HTML
<ul class="tmp_cardlist01 column03">
<li class="list">
<div class="imgbox">
<img src="">
</div>
<div class="textbox">
<p>タイトル</p>
<p>ここにティスクリプション</p>
</div>
</li>
以下リストをループ
・
・
・
</ul>
SCSS
.tmp_cardlist01{
&.column03{
display:-webkit-box;display:-ms-flexbox;display: -webkit-flex;display:flex;
-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;
.list{margin-left: 2%;background: white;
@media screen and (min-width:769px){width: calc((100% - 4%)/3);
&:nth-child(n+4){margin-top: 2%;}
&:nth-child(3n+1){margin-left: 0;}
}
@media screen and (max-width:768px){width: calc((100% - 2%)/2);
&:nth-child(n+3){margin-top: 2%;}
&:nth-child(2n+1){margin-left: 0;}
}
.imgbox{position: relative; width: 100%; height:auto;overflow: hidden;background: #888;
&::before{content: ""; display: block; padding-top: 62.5%;}
img{position:absolute;left: -100%;right: -100%; top:-100%; bottom:-100%;width:100%; height:auto;margin:auto;}
}
.textbox{padding: 1rem;}
}
}
}
4つ並びの場合
出力
-
タイトル
ここにティスクリプション
-
タイトル
ここにティスクリプション
-
タイトル
ここにティスクリプション
-
タイトル
ここにティスクリプション
-
タイトル
ここにティスクリプション
-
タイトル
ここにティスクリプション
HTML
<ul class="tmp_cardlist01 column04">
<li class="list">
<div class="imgbox">
<img src="">
</div>
<div class="textbox">
<p>タイトル</p>
<p>ここにティスクリプション</p>
</div>
</li>
以下リストをループ
・
・
・
</ul>
SCSS
.tmp_cardlist01{
&.column04{
display:-webkit-box;display:-ms-flexbox;display: -webkit-flex;display:flex;
-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;
.list{margin-left: 2%;background: white;
@media screen and (min-width:769px){width: calc((100% - 6%)/4);
&:nth-child(n+5){margin-top: 2%;}
&:nth-child(4n+1){margin-left: 0;}
}
@media screen and (max-width:768px){width: calc((100% - 2%)/2);
&:nth-child(n+3){margin-top: 2%;}
&:nth-child(2n+1){margin-left: 0;}
}
.imgbox{position: relative; width: 100%; height:auto;overflow: hidden;background: #888;
&::before{content: ""; display: block; padding-top: 62.5%;}
img{position:absolute;left: -100%;right: -100%; top:-100%; bottom:-100%;width:100%; height:auto;margin:auto;}
}
.textbox{padding: 1rem;}
}
}
}