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

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

HTML、CSSでカードデザインパーツのコーディングをする方法が知りたい
Webサイト制作案件でよくある少し複雑なカードパーツのサンプルコードが見たい
タイトルとリストがあるカードパーツを実装したい

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

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

凡庸性の高いパーツとなりますのでお楽しみに。

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

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

完成イメージ

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

▼▼▼

1度は目にしたことがある3カラムのカードデザインですね。

タイトルとリストアイテムの組み合わせが特徴です。

flex-direction:columnや疑似要素beforeを駆使して実装します。

サービス紹介のLPで、ターゲットの悩みを明確にする部分で使用されそうなデザインとなります。

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

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

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

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

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

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

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

HTML

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

もう一段増やしたい場合は「Card-Item」を3ブロック追加してやればOK！

ただし、2段目以降にmargin-topで上の段との余白を空けるのをお忘れなきよう〜

HTML

<div class="Inner">
  <div class="Card">
    <div class="Card-Item">
      <p class="Card-Item-Title">タイトル</p>
      <ul class="Card-Item-List">
        <li class="Card-Item-List-Text">テキストテキスト</li>
        <li class="Card-Item-List-Text">テキストテキスト</li>
      </ul>
    </div>
    <div class="Card-Item">
      <p class="Card-Item-Title">タイトル</p>
      <ul class="Card-Item-List">
        <li class="Card-Item-List-Text">テキストテキスト</li>
        <li class="Card-Item-List-Text">テキストテキスト</li>
      </ul>
    </div>
    <div class="Card-Item">
      <p class="Card-Item-Title">タイトル</p>
      <ul class="Card-Item-List">
        <li class="Card-Item-List-Text">テキストテキスト</li>
        <li class="Card-Item-List-Text">テキストテキスト</li>
      </ul>
    </div>
  </div>
</div>

CSS

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

文字サイズや、カードの背景色、カード間の余白などはよしなに変更してお使いください。

CSS

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

p{
  margin: 0;
  padding: 0;
}
li{
  list-style: none;
}

.Card {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding: 72px 68px;
  display: flex;
  background: #fff;
  z-index: 2;
}
@media screen and (max-width: 480px) {
  .Card {
    padding: 6.66vw;
    flex-wrap: wrap;
  }
}
.Card-Item {
  width: calc((100% - 30px) / 3);
  height: 235px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #5bc8ac;
  box-sizing: border-box;
}
@media screen and (max-width: 480px) {
  .Card-Item {
    width: 100%;
  }
}
.Card-Item:nth-child(n+2) {
  margin-left: 30px;
}
@media screen and (max-width: 480px) {
  .Card-Item:nth-child(n+2) {
    margin-top: 24px;
    margin-left: 0;
  }
}
.Card-Item-Title {
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 24px;
}
@media screen and (max-width: 480px) {
  .Card-Item-Title {
    font-size: 20px;
  }
}
.Card-Item-List {
  margin-top: 24px;
}
.Card-Item-List-Text {
  position: relative;
  padding-left: 16px;
  line-height: 1.5em;
  color: #fff;
  font-size: 14px;
}
.Card-Item-List-Text:nth-child(2) {
  margin: 8px 0 0;
}
.Card-Item-List-Text::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 0;
  border-radius: 50%;
  margin: 0 16px 0 0;
  width: 4px;
  height: 4px;
  background: #fff;
  display: inline-block;
}
@media screen and (max-width: 480px) {
  .Card-Item-List-Text::before {
    top: 6px;
  }
}

まとめ

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

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

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