少し複雑なカードデザインのコーディングパーツ⑩【Webサイト制作案件でよく使うサンプルコード】

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

HTML、CSSでカードデザインパーツのコーディングをする方法が知りたい
Webサイト制作案件でよくある少し複雑なカードパーツのサンプルコードが見たい
画像なしのシンプルだけど情報量を多く詰め込めるカードパーツを実装したい

という方のお悩みを解決します！

今回、紹介するサンプルコードはぼくがかつて、実際のWebサイト制作案件で使用したものです。

カードによくある画像が存在しないタイプのカードで、その分、情報量が多くなります。

HTML構造はいたってシンプルですが、要素が多めなので、1からコーディングしているとすごく疲れます。

コピペで済ませましょう。

同じ様なパーツのコーディングで躓いている方の助けになれれば幸いです！！

完成イメージ
カードデザインのサンプルコード
- HTML
- CSS
まとめ

完成イメージ

今回紹介するコードで実現できるカードデザインはこちら！

▼▼▼

タイトルやサブタイトル、テキストやサブテキストが入力できるので、情報量多めに詰め込めるのが特徴です。

アクセントとして、薄めのグレーで境界線（ボーダー）が引いてあるのもポイントとなります。

みんな大好きdisplay:flexを駆使して実装します。

サービス紹介のLPで、サービスの具体的な説明を詳細に伝えたい時に使用されそうなデザインとなります。

以下で紹介するコードをお使いいただければ、とりあえず見た目だけは秒で再現できます！

それでは見ていきましょう〜〜

カードデザインのサンプルコード

こちら、CodePenで作った見本です！

レスポンシブでは、折り返して1カラムになるよう実装しております。

この画面だと本来のPCサイズで表示されないので、ぜひCodePenのページへ行って確かめてみていただきたいでありんす。

See the Pen
zYrdWJr by 石森裕也 (@yuyaphotograph)
on CodePen.

HTML

こちら、今回のカードデザインのHTML構造です！

カードブロックの数を増やしたい場合は、「Card」の塊を増やしてあげればOK！

HTML

<div class="Inner">
  <div class="Card">
    <div class="Card-Item">
      <p class="Card-Item-Headline">タイトル</p>
      <p class="Card-Item-SubHeadline">サブタイトル</p>
      <p class="Card-Item-Text">テキストテキスト<br class="Card-Item-Text-Br">テキスト</p>
      <p class="Card-Item-SubText">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </div>
    <div class="Card-Item">
      <p class="Card-Item-Headline">タイトル</p>
      <p class="Card-Item-SubHeadline">サブタイトル</p>
      <p class="Card-Item-Text">テキストテキスト<br class="Card-Item-Text-Br">テキスト</p>
      <p class="Card-Item-SubText">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </div>
    <div class="Card-Item">
      <p class="Card-Item-Headline">タイトル</p>
      <p class="Card-Item-SubHeadline">サブタイトル</p>
      <p class="Card-Item-Text">テキストテキスト<br class="Card-Item-Text-Br">テキスト</p>
      <p class="Card-Item-SubText">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </div>
    <div class="Card-Item">
      <p class="Card-Item-Headline">タイトル</p>
      <p class="Card-Item-SubHeadline">サブタイトル</p>
      <p class="Card-Item-Text">テキストテキスト<br class="Card-Item-Text-Br">テキスト</p>
      <p class="Card-Item-SubText">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </div>
    <div class="Card-Item">
      <p class="Card-Item-Headline">タイトル</p>
      <p class="Card-Item-SubHeadline">サブタイトル</p>
      <p class="Card-Item-Text">テキストテキスト<br class="Card-Item-Text-Br">テキスト</p>
      <p class="Card-Item-SubText">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </div>
    <div class="Card-Item">
      <p class="Card-Item-Headline">タイトル</p>
      <p class="Card-Item-SubHeadline">サブタイトル</p>
      <p class="Card-Item-Text">テキストテキスト<br class="Card-Item-Text-Br">テキスト</p>
      <p class="Card-Item-SubText">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </div>
  </div>
</div>

CSS

こちらスタイリングです！

文字サイズや、カード間の余白、ボーダーの色、テキスト間の余白などはよしなに変更してお使いください。

PC表示のときに、縦のボーダーが引かれるのは左端以外のカードとなります。

スマホ表示のときは、全カード下にボーダーが表示されます。

CSS

.Inner {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}

p{
  margin: 0;
  padding: 0;
}

.Card {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  max-width: 960px;
}
@media screen and (max-width: 480px) {
  .Card {
    padding-left: 8px;
    padding-right: 8px;
  }
}
.Card-Item {
  width: calc((100% - 216px) / 3);
}
@media screen and (max-width: 480px) {
  .Card-Item {
    border-bottom: 1px solid #eee;
    padding: 0 0 24px;
    width: 100%;
  }
}
.Card-Item:not(:nth-child(3n-2)) {
  margin-left: 53px;
  padding-left: 52px;
  border-left: 1px solid #eee;
}
@media screen and (max-width: 480px){
  .Card-Item:not(:nth-child(3n-2)) {
    border-left: none;
  }
}
.Card-Item:nth-child(n+4) {
  margin-top: 50px;
}
@media screen and (max-width: 480px) {
  .Card-Item:nth-child(n+4) {
    margin: 0;
  }
}
@media screen and (max-width: 480px) {
  .Card-Item:not(:nth-child(3n-2)) {
    margin-left: 0;
  }
}
@media screen and (max-width: 480px) {
  .Card-Item:nth-child(n+2) {
    padding: 5.3vw 0;
  }
}
.Card-Item-Headline {
  text-align: center;
  color: #5bc8ac;
  font-weight: bold;
  font-size: 20px;
}
@media screen and (max-width: 480px) {
  .Card-Item-Headline {
    font-size: 18px;
  }
}
.Card-Item-SubHeadline {
  text-align: center;
  margin: 10px auto 0;
  color: #5bc8ac;
  font-weight: bold;
  font-size: 16px;
}
.Card-Item-Text {
  text-align: center;
  margin: 28px auto 0;
  font-weight: bold;
  font-size: 16px;
  line-height: 1.4;
}
.Card-Item-Text-Br { display: block; }
@media screen and (max-width: 480px) {
  .Card-Item-Text-Br {
    display: none;
  }
}
.Card-Item-SubText {
  margin: 5px auto 0;
  line-height: 1.8;
  font-size: 16px;
}
@media screen and (max-width: 480px) {
  .Card-Item-SubText {
    letter-spacing: 0.05em;
    font-size: 14px;
  }
}

まとめ

以上、実務でよく使われる少し複雑なカードデザインのコーディングのサンプルコード⑩を紹介しました。

コーポレートサイトの制作案件をする際に必ずや！役立つスキルとなりますのでぜひ覚えていきましょう〜！

コーディングスキルアップシリーズはこちら！