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

今回は、HTMLとCSSを使ってカードをコーディングしていきます。デザインを元に模写をする流れを解説します。プログラミング初学者やコーディング練習として模写をしたい駆け出しエンジニアにもおすすめです。

カードデザインはブログ記事の一覧ででてくる定番のデザインパターンですが、初心者にはすこし難しいと感じるデザインでもあります。コーディングの型を覚えて効率的にカードのコーディングができるようになりましょう。

コーディングの準備をする

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

デザインの基本情報

カードをコーディングするにあたって、必要となる情報は以下の通りです。

横幅は288px
画像は16:9
角丸は8px
タイトルは20px、行の高さ125%、太字
概要テキストは12px、行の高さ150%
タイトルと概要テキストの間は10px
文章の周りの余白は縦20px、横18px
全体の影はY方向に4px、15pxの広がり、色は#000の透明度20%

コーディングの目標時間

20分以内でコーディングが終えられるように頑張ってみましょう。

自分なりにコードを書いてみる

Yuto Seta

上のデザインと基本情報を元にまずは自分なりにコーディングをしてみましょう。

コーディングの手順

HTMLを書き出す
1. カード全体の中でまず画像の枠とテキストの枠にわける。
2. テキストの枠の中でタイトルと概要の二つのテキストにわける。
CSSを書き出す
1. カード全体には高さを指定しない
2. 画像は16:9を維持するようにpadding-topを使って大きさを設定する
3. タイトルと概要の間はフクロウセレクタを使って余白を設定する

実際のソースコード

実際のソースコードは以下の通りです。
コーディングのお手本として参考にしてください。
自分なりにコーディングしてみたら、答え合わせをしてみましょう。

初心者はまずは見た目を完璧に同じにすることを目標にしてください。

中級者はなぜそのようなソースコードになったのか？と考えながら読み進めていってください。

上級者はこれよりも優れたコードはないだろうか？と考えながら読み進めていってください。

HTML

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

カードのHTMLはこのような構造にしました。ポイントは、画像枠とテキスト枠を分けた上で、タイトルと概要をわけていることです。

CSS

.card{
  width: 288px;
  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%;
}

カードのCSSは上記の通りです。

カードの特徴

カードのコーディングを効率よく進めていく上で、カードの特徴を把握しておくとよいです。

画像は16:9の比率の要素を作成する

画像を使った要素をコーディングするときにはpadding-topを使って要素の比率を維持するテクニックが有効です。

padding-top: 56.25%
/* 親要素の横幅を100%とした時の比率 */
/* 56.25%とすることで16:9の比率を保つ */

フクロウセレクタでテキスト同士に一定の間隔を空ける

フクロウセレクタ（＊＋＊）を使う事で、最初の子要素以外に間隔をもたせます。今回はタイトルと概要の２つの要素があり、最初の子要素はタイトルですので、概要にのみ間隔を持たせています。これで、概要にのみmargin-topが適用されます。

.card__textbox > * + *{
  margin-top: 10px;
}

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

See the Pen povWdXG by YutoSeta / ホームページ制作のエクレア (@yutoseta) on CodePen.

まとめ

今回はカードのコーディングをしてみました。画像の比率を維持するテクニックや要素同士の間隔をあけるテクニックなど、テクニックが盛りだくさんな要素になっています。

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