こんにちは。
ゆうや（@yuyaphotograph）です！
この記事では、
- HTML、CSSでカードデザインを実装する方法が知りたい
- 実際のWebサイト制作案件でよく使うカードのコーディング方法が気になる
- 頻繁に使うカードデザインのコーディングしたデモが見たい
という方のお悩みを解決します！
今回、紹介するカードデザインのサンプルコードは全て僕が実際のWebサイト制作案件で使用してきたものです。
同じようなデザインのコーディングをする時にコピペでサクッと実装できるように自分のスニペット用としても作成しました笑
カードデザインのコーディングで躓いている方のお役に立てれば幸いです！
目次
カードデザインのコーディングまとめ
上が画像で、下に説明文が入るパターン
See the Pen
カードデザイン05 by 石森裕也 (@yuyaphotograph)
on CodePen.
左が画像で、右に説明文が入るパターン
See the Pen
カードデザイン02 by 石森裕也 (@yuyaphotograph)
on CodePen.
正円画像とテキストの4列カードデザイン
See the Pen
カードデザイン04 by 石森裕也 (@yuyaphotograph)
on CodePen.
両サイドに余白なしのカードデザイン
See the Pen
カードデザイン03 by 石森裕也 (@yuyaphotograph)
on CodePen.
高さ固定幅のカードデザイン
See the Pen
カードデザイン01 by 石森裕也 (@yuyaphotograph)
on CodePen.
バッジ、テキスト、ボーダーのカードデザイン
See the Pen
カードデザイン06 by 石森裕也 (@yuyaphotograph)
on CodePen.
まとめ
以上、実務でよく使われるカードデザインコーディングのサンプルコードを紹介しました。
コーポレートサイトやブログ・メディアサイトの制作案件をする際の必須スキルとなりますので徐々に覚えていきましょう〜！
カードデザインコーディングで使うflexboxなんかは奥が深くて僕もまだ完璧に使いこなせているわけではないので記事内のコードで改善できる箇所がありましたらぜひご指摘いただけると助かります。
コーディングスキルアップシリーズはこちら！
