【カードデザインのコーディング】 Webサイト制作案件でよく使うサンプルコードまとめ

【カードデザインのコーディング】 Webサイト制作案件でよく使うサンプルコードまとめ

こんにちは。

ゆうや(@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なんかは奥が深くて僕もまだ完璧に使いこなせているわけではないので記事内のコードで改善できる箇所がありましたらぜひご指摘いただけると助かります。

 

「CSSのflexboxを使ってコーディングスキルをさらにアップしたい!」

という方は以下の記事にも目を通してみてくださいまし。

CSSのflexboxで横スクロールを実装する方法【CSS】flexboxで横スクロールを実装する方法 CSSのflexアイテムの最後の要素を下揃えする方法CSSのflexアイテムの最後の要素を下揃えする方法【たった3行追加で実装】 Flexboxで要素の高さを合わせない方法Flexboxで要素の高さを合わせない方法

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です