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

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

HTML、CSSでカードデザインパーツのコーディングをする方法が知りたい
Webサイト制作案件でよくある少し複雑なカードパーツのサンプルコードが見たい
店舗一覧ページなどで使用されるカードパーツを実装したい

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

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

オーソドックスな2カラムのカードデザインですが、アイテム内の要素が少し複雑になっていて、次回以降同じ様なデザインが来たらコピペで済ませたいと思ったパーツとなります。

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

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

完成イメージ

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

▼▼▼

画像でインパクトを出し、情報量も満載なところが特徴です。

みんな大好きdisplay:flexやabsolute、transform:translateY()を駆使して実装します。

Webサイトの店舗一覧ページなどで使用されそうなデザインとなります。

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

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

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

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

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

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

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

HTML

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

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

HTML

<div class="Inner">
  <div class="Card">
    <div class="Card-Item">
      <div class="Card-Item-Title">タイトル</div>
      <div class="Card-Item-Info">
        <div class="Card-Item-Info-Left"><div class="Card-Item-Info-Left-Img" style="background: url('画像URL') no-repeat;background-size:cover;background-position:center;"></div></div>
        <div class="Card-Item-Info-Right">
          <div class="Card-Item-Info-Right-Text">テキストテキスト</div>
          <div class="Card-Item-Info-Right-Text">テキストテキスト</div>
          <div class="Card-Item-Info-Right-Text">テキストテキスト</div>
          <a href="" class="Card-Item-Info-Right-Link">テキストリンク</a>
        </div>
      </div>
      <a href="" class="Card-Item-Btn">テキストリンク<img src="アイコンURL" class="Card-Item-Btn-Icon" alt=""></a>
    </div>
    <div class="Card-Item">
      <div class="Card-Item-Title">タイトル</div>
      <div class="Card-Item-Info">
        <div class="Card-Item-Info-Left"><div class="Card-Item-Info-Left-Img" style="background: url('画像URL') no-repeat;background-size:cover;background-position:center;"></div></div>
        <div class="Card-Item-Info-Right">
          <div class="Card-Item-Info-Right-Text">テキストテキスト</div>
          <div class="Card-Item-Info-Right-Text">テキストテキスト</div>
          <div class="Card-Item-Info-Right-Text">テキストテキスト</div>
          <a href="" class="Card-Item-Info-Right-Link">テキストリンク</a>
        </div>
      </div>
      <a href="" class="Card-Item-Btn">テキストリンク<img src="アイコンURL" class="Card-Item-Btn-Icon" alt=""></a>
    </div>
  </div>
</div>

CSS

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

文字サイズやボーダーの色、余白感などはよしなに変更してお使いください。

CSS

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

p{
  margin: 0;
  padding: 0;
}
a{
  text-decoration: none;
}
a:hover{
  opacity: .6;
  transition: .6s;
}

.Card {
  margin-top: 60px;
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 798px) {
  .Card {
    margin-top: 40px;
    padding-left: 15px;
    padding-right: 15px;
  }
}
.Card-Item {
  border: 1px solid #eee;
  margin-top: 48px;
  margin-left: 48px;
  padding: 50px;
  width: calc((100% - 48px) / 2);
  max-width: 576px;
  box-sizing: border-box;
}
.Card-Item:nth-child(-n+2) {
  margin-top: 0;
}
@media screen and (max-width: 798px) {
  .Card-Item:nth-child(2) {
    margin-top: 48px;
  }
}
.Card-Item:nth-child(odd) {
  margin-left: 0;
}
@media screen and (max-width: 798px) {
  .Card-Item {
    margin-left: 0;
    padding: 30px;
    width: 100%;
  }
}
.Card-Item-Title {
  text-align: center;
  color: #5bc8ac;
  font-size: 24px;
}
@media screen and (max-width: 798px) {
  .Card-Item-Title {
    font-size: 18px;
  }
}
.Card-Item-Info {
  margin-top: 36px;
  display: flex;
}
@media screen and (max-width: 798px) {
  .Card-Item-Info {
    margin-top: 20px;
    flex-wrap: wrap;
  }
}
.Card-Item-Info-Left {
  width: 50%;
  max-width: 256px;
}
@media screen and (max-width: 798px) {
  .Card-Item-Info-Left {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 200px;
  }
}
.Card-Item-Info-Left-Img {
  width: 100%;
  padding-top: 74.77%;
}
.Card-Item-Info-Right {
  margin-left: 20px;
  flex: 1;
  width: 50%;
}
@media screen and (max-width: 798px) {
  .Card-Item-Info-Right {
    margin-left: 0;
    flex: auto;
    width: 100%;
  }
}
.Card-Item-Info-Right-Text {
  font-size: 16px;
}
@media screen and (max-width: 798px) {
  .Card-Item-Info-Right-Text:nth-child(1) {
    margin-top: 16px;
  }
}
.Card-Item-Info-Right-Text:nth-child(2) {
  margin-top: 16px;
}
.Card-Item-Info-Right-Text:nth-child(3) {
  margin-top: 8px;
}
.Card-Item-Info-Right-Link {
  margin-top: 20px;
  display: block;
  color: #5bc8ac;
  font-size: 16px;
}
.Card-Item-Btn {
  position: relative;
  border: 1px solid #5bc8ac;
  margin-top: 40px;
  display: block;
  padding: 20px 0;
  text-align: center;
  color: #5bc8ac;
  font-size: 18px;
}
@media screen and (max-width: 798px) {
  .Card-Item-Btn {
    margin-top: 24px;
    font-size: 13px;
  }
}
.Card-Item-Btn-Icon {
  position: absolute;
  top: 50%;
  right: 24px;
  width: 13px;
  transform: translateY(-50%);
}

まとめ

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

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

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