くまだどうも、くまだです。
カード一覧系（お知らせ一覧とかブログ一覧みたいな）の静的コーディングは、今のところこんな感じでやっているというメモ。もちろんデザインによってやり方変わるけど。
カード一覧系のコーディング
手順的には、パーツを作る→ページで一覧作る、という感じで作ります。
パーツを作る
自分のやり方だと、parts.htmlとか適当なファイルを作って、そこにパーツを作っていきます。
<div class="l-inner">
<p>c-card</p>
<div class="c-card">
<div class="c-card__img">
<img src="images/dummy.png" alt="画像の説明" width="450" height="360">
</div>
<h3 class="c-card__title">タイトル</h3>
<p class="c-card__text">本文本文本文本文本文本文本文本文本文本文</p>
</div>
<hr>
<p>c-sectionTitle</p>
<h2 class="c-sectionTitle">セクションタイトル</h2>
<hr>
~~~~パーツを作っていく~~~~
</div>.l-inner {
max-width: 1132px;
margin-right: auto;
margin-left: auto;
padding-right: 16px;
padding-left: 16px;
}
.c-card {
border: 1px solid #000;
padding: 8px;
display: flex;
flex-direction: column;
height: 100%;
}
.c-card__img img {
aspect-ratio: 16 / 9;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.c-card__title {
margin-top: 16px;
font-size: 20px;
}
.c-card__text {
margin-top: 8px;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.c-sectionTitle {
font-size: 28px;
text-align: center;
}
パーツには、横幅とマージンを指定しないで作ります。なので、この時点ではカードは横幅一杯まで広がりますが、気にせず作ります。パーツ間はhrタグで区切り線いれてます。
ページで一覧作る
次にindex.htmlに一覧を作っていきます。想定としてはnewsセクションの中にカード一覧がある想定でいきます。
parts.htmlから必要なパーツのコードをコピーして、index.htmlで使う箇所に貼り付けて、CSSでスタイルしていきます。ちなみにc-cardをaタグでくくるのではなく、c-cardのdivタグをaタグにすることもあります。
<section class="p-news">
<div class="l-inner">
<h2 class="c-sectionTitle">セクションタイトル</h2>
<ul class="p-news__archive p-cards">
<li class="p-cards__item">
<a href="">
<div class="c-card">
<div class="c-card__img">
<img src="images/dummy.png" alt="画像の説明" width="450" height="360">
</div>
<h3 class="c-card__title">タイトル</h3>
<p class="c-card__text">本文本文本文本文本文本文本文本文本文本文</p>
</div>
</a>
</li>
<li class="p-cards__item">
<a href="">
<div class="c-card">
<div class="c-card__img">
<img src="images/dummy2.jpg" alt="画像の説明" width="450" height="360">
</div>
<h3 class="c-card__title">タイトルタイトルタイトルタイトルタイトルタイトルタイトル</h3>
<p class="c-card__text">本文本文本文本文本文本文本本文本文本文本文本文本文本文本文本文本文文本文本文本文</p>
</div>
</a>
</li>
<li class="p-cards__item">
<a href="">
<div class="c-card">
<div class="c-card__img">
<img src="images/sample2.png" alt="画像の説明" width="450" height="360">
</div>
<h3 class="c-card__title">縦長画像</h3>
<p class="c-card__text">本文本文本文本文本文本文本本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本本文本文本文本文本文本文本文本文本文本文文本文本文本文本文文本文本文本文</p>
</div>
</a>
</li>
</ul>
</div>
</section>
.p-news {
padding-top: 100px;
padding-bottom: 100px;
}
.p-news__archive {
margin-top: 24px;
}
.p-cards {
display: block;
}
@media screen and (min-width:768px) {
.p-cards {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 16px;
}
}
.p-cards__item + .p-cards__item {
margin-top: 16px;
}
@media screen and (min-width:768px) {
.p-cards__item + .p-cards__item {
margin-top: 0;
}
}
パーツ間の余白調整はここではじめて行います。PCではGridレイアウトで調整してます。SPの場合だと、以下の部分で調整してます。
.p-cards {
display: block;
}
@media screen and (min-width:768px) {
.p-cards {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 16px;
}
}
.p-cards__item + .p-cards__item {
margin-top: 16px;
}
@media screen and (min-width:768px) {
.p-cards__item + .p-cards__item {
margin-top: 0;
}
}余白を付けるのはコンポーネントのc-cardではなく、p-cardsのエレメントであるp-cards__itemに対してつけてます。こうすることで、c-card単体を他の部分でも使いまわすことができます。
また、p-cards自体も一つのパーツとして見立てることもできるので、p-cards自体には余白をつけずに、p-newsのエレメントであるp-news__archiveに対して余白を指定します。
.p-news__archive {
margin-top: 24px;
}こうすると、p-cards自体も他の箇所で使いまわしやすくなります（使いまわしも考慮して、なるべく汎用性のあるクラス名にします）。
ちなみに、カード一覧で使う場所によっては同じカードデザインでも3つ横並び、4つ横並び、SPでは2個横並び、みたいなことがあります。
その場合、p-cardsにはgrid-template-columnsプロパティをつけずに、バージョン違いのクラスをつけて、そのクラスにgrid-template-columnsプロパティで対応することもあります。
.p-cards {
display: block;
}
@media screen and (min-width:768px) {
.p-cards {
display: grid;
gap: 16px;
}
}
/* spで2つ横並びバージョン */
.p-cards.p-cards--sp2Col {
display: grid;
grid-template-columns: repeat(2,1fr);
}
@media screen and (min-width:768px) {
.p-cards.p-cards--sp2Col {
grid-template-columns: repeat(3,1fr);
}
}
/* pcで3つ横並びバージョン */
@media screen and (min-width:768px) {
.p-cards.p-cards--3Col {
grid-template-columns: repeat(3,1fr);
}
}
/* pcで4つ横並びバージョン */
@media screen and (min-width:768px) {
.p-cards.p-cards--4Col {
grid-template-columns: repeat(4,1fr);
}
}
もっと効率的なやり方があるかもしれませんが、現状はこんな感じで作ってます。
ここまで読んでくださりありがとうございました。