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

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

HTML、CSSでカードデザインパーツのコーディングをする方法が知りたい
Webサイト制作案件でよくある少し複雑なカードパーツのサンプルコードが見たい
コピペでOKなカードブロックのコードを見たい

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

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

当時はHTML構造やCSSのスタイリングにだいぶ苦戦した、かなり難しめのデザインです！笑

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

完成イメージ

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

▼▼▼

左側がテキストとカードブロック、右側にはカードブロックが2段組にされているのが特徴です。

コーポレートサイトのサービス紹介部分に使用されそうなデザインとなります。

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

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

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

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

レスポンシブでは、一列になるように実装しております。

この画面だと2分割されて本来のPCサイズで表示されないので、ぜひCodePenのページへ行って確かめてみていただきたいでござる。

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

HTML

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

HTML

<div class="Inner">
  <div class="Card">
    <div class="Card-Left">
      <p class="Card-Left-Text">
        テキストテキストテキストテキスト<br>
        テキストテキストテキストテキスト<br>
        テキストテキストテキストテキスト
      </p>
      <div class="Card-Left-Box">
        <div class="Card-Left-Box-Inner">
          <h3 class="Card-Left-Box-Inner-Headline">タイトル</h3>
          <div class="Card-Left-Box-Inner-Border"></div>
          <p class="Card-Left-Box-Inner-SubHeadline">サブタイトル</p>
          <p class="Card-Left-Box-Inner-Text">テキストテキスト</p>
        </div>
      </div>
    </div>
    <div class="Card-Right">
      <div class="Card-Right-Box">
        <div class="Card-Right-Box-Inner">
          <h3 class="Card-Right-Box-Inner-Headline">タイトル</h3>
          <div class="Card-Right-Box-Inner-Border"></div>
          <p class="Card-Right-Box-Inner-SubHeadline">サブタイトル</p>
        </div>
      </div>
      <div class="Card-Right-Box three">
        <div class="Card-Right-Box-Inner three">
          <h3 class="Card-Right-Box-Inner-Headline">タイトル</h3>
          <div class="Card-Right-Box-Inner-Border"></div>
          <p class="Card-Right-Box-Inner-SubHeadline">サブタイトル</p>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

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

文字サイズや、上下の余白、画像の縦横比率などはよしなに変更してお使いください。

CSS

.Card {
  margin-top: 60px;
  display: flex;
  align-items: flex-start;
}
@media screen and (max-width: 768px) {
  .Card {
    flex-wrap: wrap;
  }
}
.Card-Left {
  display: flex;
  flex-wrap: wrap;
  width: 48.14%;
}
@media screen and (max-width: 768px) {
  .Card-Left {
    margin-left: auto;
    width: 92%;
  }
}
.Card-Left-Text {
  width: 100%;
  line-height: 1.8;
  font-size: 16px;
}
@media screen and (max-width: 768px) {
  .Card-Left-Text {
    max-width: 315px;
    font-size: 12px;
  }
}
.Card-Left-Box {
  margin-top: 64px;
  background: url("画像URL") no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .Card-Left-Box {
    margin-top: 24px;
  }
}
.Card-Left-Box-Inner {
  padding-left: 24px;
  padding-right: 64px;
  height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .Card-Left-Box-Inner {
    padding-left: 16px;
    padding-right: 30px;
  }
}
.Card-Left-Box-Inner-Headline {
  color: #fff;
  font-size: 20px;
}
@media screen and (max-width: 768px) {
  .Card-Left-Box-Inner-Headline {
    font-size: 19px;
  }
}
.Card-Left-Box-Inner-Border {
  width: 8.33vw;
  height: 4px;
  background: #fff;
}
@media screen and (max-width: 768px) {
  .Card-Left-Box-Inner-Border {
    width: 48px;
  }
}
.Card-Left-Box-Inner-SubHeadline {
  color: #fff;
  font-size: 16px;
}
@media screen and (max-width: 768px) {
  .Card-Left-Box-Inner-SubHeadline {
    font-size: 13px;
  }
}
.Card-Left-Box-Inner-Text {
  line-height: 1.5;
  color: #fff;
  font-size: 14px;
}
@media screen and (max-width: 768px) {
  .Card-Left-Box-Inner-Text {
    font-size: 10px;
  }
}
.Card-Right {
  margin-left: 2.77vw;
  display: flex;
  flex-wrap: wrap;
  width: 48.14%;
}
@media screen and (max-width: 768px) {
  .Card-Right {
    margin-left: auto;
    margin-top: 24px;
    width: 92%;
  }
}
.Card-Right-Box {
  background: url("画像URL") no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
}
.Card-Right-Box.three {
  margin-top: 40px;
  background: url("画像URL") no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .Card-Right-Box.three {
    margin-top: 24px;
  }
}
.Card-Right-Box-Inner {
  padding-left: 24px;
  padding-right: 64px;
  height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .Card-Right-Box-Inner {
    padding-left: 16px;
    padding-right: 172px;
  }
}
@media screen and (max-width: 768px) {
  .Card-Right-Box-Inner.three {
    padding-right: 100px;
  }
}
.Card-Right-Box-Inner-Headline {
  color: #fff;
  font-size: 20px;
}
@media screen and (max-width: 768px) {
  .Card-Right-Box-Inner-Headline {
    font-size: 19px;
  }
}
.Card-Right-Box-Inner-Border {
  width: 8.33vw;
  height: 4px;
  background: #fff;
}
@media screen and (max-width: 768px) {
  .Card-Right-Box-Inner-Border {
    width: 48px;
  }
}
.Card-Right-Box-Inner-SubHeadline {
  color: #fff;
  font-size: 18px;
}
@media screen and (max-width: 768px) {
  .Card-Right-Box-Inner-SubHeadline {
    font-size: 13px;
  }
}

まとめ

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

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

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