【コピペ可】HTMLとCSSでカードのデザイン６選

今回は、HTMLとCSSを使ったウェブデザインでよくでてくるカードの実例集です。汎用的なデザインを集めているのでコーディングやデザインの際にコピペして利用すると使い勝手もよく便利です。無駄な装飾は避けシンプルで基本的なカードのデザイン例のみに厳選しているので、フロントエンド初学者でもカスタマイズしてコードを再利用できます。

共通のHTMLとCSS

共通HTML

カードはすべて同じHTMLでできています。

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

共通CSS

全てのカードは以下のCSSを共通して使用しています。独自CSSと合わせて設定してください。

.card{
  width: 288px;
  height: auto;
}
.card__imgframe{
  width: 100%;
  height: auto;
  padding-top: 56.25%;
  background: url(https://placehold.jp/640x360.png) no-repeat center;
  background-size: cover;
  box-sizing: border-box;
}
.card__textbox{
  width: 100%;
  height: auto;
  padding: 20px 18px;
  background: #ffffff;
  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

.card-skin{
  box-shadow: 2px 2px 6px rgba(0,0,0,.4);
}

.card-skin{
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,.2);
}

ダークテーマなカード

.card-skin .card__textbox{
  background: #333333;
  color: #ffffff;
}

.card-skin{
  overflow: hidden;
  border-radius: 8px;
  border-left: solid 1px #ddd;
  border-right: solid 1px #ddd;
  border-bottom: solid 5px #888;
}

立体的に写真を魅せるカード

.card-skin .card__imgframe{
  position: relative;
  box-shadow: 0px 4px 4px rgba(0,0,0,.4);
}

.card-skin .card__textbox{
  position: relative;
  top: -16px;
  transform: scale(.9);
  box-shadow: 0px 4px 4px rgba(0,0,0,.4);
  border-top: solid 6px #333;
}

HTMLとCSSの解説

HTMLの構造はほとんど変わらない

今回のカードのHTML構造は全て同じです。カードは画像とテキストのまとまりで構成されます。そこを踏まえた上でCSSの書き換えだけで様々なデザインに柔軟に対応できるようHTMLを組んでいくのがポイントです。

CSSは形やレイアウトと装飾部分をわけるとシンプルになる

基本となる大きさやレイアウトは使い回しができます。カードのデザイン部分を使い回しできる部分と切り分けて記述しておくことで複数のプロジェクトにおいても再利用ができるカードのスタイルを自分の中にもっておくことができます。

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

Yuto Seta

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

▼感想
写経して実力をつけるもよし、雛形として使うもよしです。

▼その他にかいていきたいコピペパーツ
・ヘッダー
・フッター
・パンくずリスト
・見出し
・リスト
・アイコンボタン
・画像フレーム
・hoverアニメーション