雑記

レスポンシブ対応したカードデザインをCSSだけで作る

レスポンシブ対応したカードデザインをCSSだけで作る

「HTML+css」だけでよく使われているカードデザインを作りました。
そのままコピペで利用できるシンプルなものになっています。
レスポンシブ対応もしてありますので、参考にしてください。

カードデザインのデモサイト

カードデザインのデモサイト
今回は3カラムのカードデザインを制作しました。
デモサイトを制作したので、まずは動作をご確認ください。

メディアクエリを使ってスマホ、タブレットで表示された場合は、横幅いっぱいに表示されます。
スマホで表示されたカードデザイン

DEMO

ソースコードの紹介

HTML

[codebox title=”HTML”]

[/codebox]

CSS

CSS(メディアクエリ)

まとめ

シンプルなカードデザインなのでいろんな場面で利用できると思います。
今回はbootstrapを使わずに、cssだけで制作しました。

ぜひぜひホームページ制作に役立ててください。

ABOUT ME
かじっくす
かじっくす
社内SE/ブロガー/Webマーケター。 27歳の転職をきっかけに、ブログに出会い、会社員ブロガーになる。 月間1.5万人に読まれる地域特化ブログ「カジトリクエスト」の編集長。 趣味は、ウイイレ・音楽・読書です。
富山県民なら要チェック!!