【コーディングの解説】HTMLとCSSでカードグループをつくる

今回は、HTMLとCSSを使ってカードグループをコーディングしていきます。美しいコードの書き方を解説していくことで、デザインを忠実に再現し、レスポンシブデザインにも対応できる模写力が身につきます。プログラミング初学者やコーディング練習として模写をしたい駆け出しエンジニアにもおすすめです。

カードグループはブログ記事一覧などで出てくる定番のデザインパターンですが、カードの横並べや折り返しの方法は初心者にはすこしハードルが高いテクニックでもあります。コーディングの型を覚えてカードグループのコーディングへの苦手意識をなくしていきましょう。

今回コーディングするお手本のデザイン

完成形のデザインを確認しましょう

今回のテーマはカードの大きさと間隔を制御するテクニックと、カードを横並べにして折り返しするテクニックの解説です。カード一つ一つのデザインは過去の記事で解説していますので、そちらをご参照ください。

HTMLとCSSでカードのコーディングをする
https://eclair.blog/make-card-with-html-and-css/

【コピペで学ぶ実例集】HTMLとCSSを使ったカードのデザイン
https://eclair.blog/examples-of-card/

デザインの特徴

カードは２行２列で、間隔が縦横20pxずつ

カードグループではカード同士の間隔とカード自身の大きさを丁寧にコーディングしていくことが大切です。今回はカード同士の横の間隔が20px、縦の間隔が20pxとします。カード自身の大きさは縦幅はコンテンツの高さに応じて自動的に変わり、横幅は20pxの間隔を差し引いて２等分した幅になります。

実際のソースコード

実際のソースコードは以下の通りです。まずは、全体に目を通してください。わかりにくい部分は追って解説していきます。コピーすればそのまま動きますので、自分の手元でアレンジしながら動作を確認していって理解を深めるのもおすすめです。コーディングのお手本として参考にしてください。

HTML

<div class="card-group">
  <div class="card">
    <div class="card__imgframe"></div>
    <div class="card__textbox">
      <div class="card__titletext">
        タイトルがはいります。タイトルがはいります。
      </div>
      <div class="card__overviewtext">
        概要がはいります。概要がはいります。概要がはいります。概要がはいります。
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card__imgframe"></div>
    <div class="card__textbox">
      <div class="card__titletext">
        タイトルがはいります。タイトルがはいります。
      </div>
      <div class="card__overviewtext">
        概要がはいります。概要がはいります。概要がはいります。概要がはいります。
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card__imgframe"></div>
    <div class="card__textbox">
      <div class="card__titletext">
        タイトルがはいります。タイトルがはいります。
      </div>
      <div class="card__overviewtext">
        概要がはいります。概要がはいります。概要がはいります。概要がはいります。
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card__imgframe"></div>
    <div class="card__textbox">
      <div class="card__titletext">
        タイトルがはいります。タイトルがはいります。
      </div>
      <div class="card__overviewtext">
        概要がはいります。概要がはいります。概要がはいります。概要がはいります。
      </div>
    </div>
  </div>
</div>

CSS

.card-group{
  margin-left: auto;
  margin-right: auto;
  max-width: 640px;
  width: 90%;
  height: auto;
   /* ポイント１ */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
/* ポイント２ */
.card-group > :nth-child(2n){
  margin-left: 20px;
}
/* ポイント３ */
.card-group > :nth-child(n+3){
  margin-top: 20px;
}
.card{
  /* ポイント４ */
  width: calc((100% - 20px * 1) / 2);
  height: auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,.2)
}
.card__imgframe{
  width: 100%;
  height: auto;
  padding-top: 56.25%;
  background: #bbb;
  box-sizing: border-box;
}
.card__textbox{
  width: 100%;
  height: auto;
  padding: 20px 18px;
  background: #fff;
  box-sizing: border-box;
}
.card__textbox > * + *{
  margin-top: 10px;
}
.card__titletext{
  font-size: 20px;
  font-weight: bold;
  line-height: 125%;
}
.card__overviewtext{
  font-size: 12px;
  line-height: 150%;
}

コーディングの解説

HTMLの構造

カードを４つ繰り返したものをカードグループを親要素として囲いました。カード単体のHTML構造は少し難しいですが、カードグループはそれらを１つのタグでまとめただけのシンプルな構造です。

ポイント１：カードの横並べ折り返しのレイアウトを実現する

.card-group{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

ポイント２：左右の間隔をあける

.card-group > :nth-child(2n){
  margin-left: 20px;
}  

ポイント３：上下の間隔をあける

.card-group > :nth-child(n+3){
  margin-top: 20px;
}  

ポイント４：余白をのぞいた１行分の幅を横幅に設定

.card{
  width: calc((100% - 20px * 1) / 2);
}

CodePenで完成品をデモでみる。

応用編

応用できるようにすこしアレンジしてみましょう。

横の間隔を全体の横幅の５％に変更する

.card-group > :nth-child(2n){
  margin-left: 5%;
}  

.card{
  width: calc((100% - 5% * 1) / 2);
}

２列から３列にする

.card-group > :not(:nth-child(3n-2)){
  margin-left: 20px;
}  

否定セレクタ（:not）と１行目の要素（3n-2）の組み合わせで最初の行以外の要素を選択しています。

.card{
  width: calc((100% - 20px * 2) / 3);
}

3行の場合はカードとカードの間の隙間は２箇所あるので余白は20px*2になります。そして全体から余白をのぞいたものを３行で割ります。

まとめ

今回はカードグループのコーディングをしてみました。フレックスボックスと各要素の幅、間隔の指定の仕方をマスターすることでカードグループのコーディングができるようになります。他の実装方法もなくはないのですが、綺麗に正確なコーディングから少し遠ざかってしまうので今回の方法がおすすめです。

この記事をかいてみての感想

Yuto Seta

HTMLやCSSに関する質問やブログ記事として書いて欲しいテーマなどあれば、ぜひコメントまってます！

▼感想
今回の記事は中級から上級です。