Bootstrap cardはとても便利ですが、デフォルトのままだと少し物足りない…と感じる方も多いのではないでしょうか。
この記事では、
初心者でもコピペだけで実装できる「Bootstrapカードのおしゃれアレンジ」
をわかりやすくまとめました。
- 影（シャドウ）を付ける
- 角丸を付けて柔らかい印象に
- 影を入れて・背景色を変える
- ホバーアニメーション付き角丸カード
- ガラス風（Glassmorphism）＋ホバーアニメーション
など、ブログやポートフォリオにそのまま使えるデザインが揃っています。
すべてコピペOKなのでぜひ活用してください！
まずは基本のBootstrap cardをコピペしよう
基本のカード（コピペOK）
公式のBootstrapを開き、①Components →②Card →③基本のコードをコピーします。
こちらからもB00tstrapと同じコードがコピペできます。
See the Pen Bootstrap card by VA-Rie (@VA-Rie) on CodePen.
<img>縦400px 横600px程度の画像を準備して挿入しましょう！
See the Pen card02 by VA-Rie (@VA-Rie) on CodePen.
画像サイズ関連記事→【初心者向け】ホームページ写真のサイズ完全ガイド！背景・バナー・商品画像の最適サイズと確認方法を解説 photo-size
影や角丸で一気に「おしゃれ見え」させる基本アレンジ5選
影（シャドウ）を付ける
See the Pen card shadow by VA-Rie (@VA-Rie) on CodePen.
角丸を付けて柔らかい印象に
See the Pen border-radius角丸カード by VA-Rie (@VA-Rie) on CodePen.
影を入れて・背景色を変える
See the Pen 背景色を変えてはっきり見えるcard by VA-Rie (@VA-Rie) on CodePen.
ホバーアニメーション付き角丸カード
See the Pen ホバーアニメーション付き角丸カード by VA-Rie (@VA-Rie) on CodePen.
ガラス風（Glassmorphism）＋ホバーアニメーション
See the Pen Bootstrapカードにガラス風（Glassmorphism）＋ホバーアニメーション by VA-Rie (@VA-Rie) on CodePen.
比率を合わせた、カードを３枚横並びにする
See the Pen cardを横並び３枚にする by VA-Rie (@VA-Rie) on CodePen.
まとめ｜Bootstrapカードは“コピペ＋少しのCSS”で劇的におしゃれになる
Bootstrapのカードは、少しのアレンジを加えるだけで印象が大きく変わります。
初心者でもすぐ使えるデザインばかりなので、ぜひコピペしてあなたのサイトに取り入れてみてください！
コメント