雑記

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

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

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

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

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

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

DEMO

ソースコードの紹介

HTML

[codebox title=”HTML”]

[/codebox]

CSS

CSS(メディアクエリ)

まとめ

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

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

ABOUT ME
かじっくす
かじっくす
定時ダッシュ同好会 のリーダー。 「ぼんぼります」が口グセのゆとりSE。 月間1.7万PVの富山県の地域特化ブログ「カジトリクエスト」/個人で働き方改革を推進するメディア「定時ダッシュ同好会」を運営中。会社員とフリーの田舎ダブルワーカー👨‍💻 > 詳しいプロフィールはこちら
▼おすすめの5記事▼