Bootstrap 5のカードと画像装飾を完全ガイド！初心者でもわかるrounded・shadowの使い方

Bootstrap 5 のカードと画像・メディアの装飾テクニック【rounded・shadow】

先生と生徒の会話形式で理解しよう

生徒

「Bootstrapで写真や画像をきれいに見せたいんですが、どうしたらいいですか？」

先生

「Bootstrapのカードや画像の装飾クラスを使うと、角を丸めたり影をつけたりして美しく見せられるよ。」

生徒

「具体的にはどんなクラスを使うんですか？」

先生

「たとえばroundedやshadowというクラスがあるから、実際に見ながら覚えていこう！」

1. Bootstrapのカードとは？

Bootstrap 5では、画像やテキストをひとまとめにしてスタイリッシュに表示できる要素としてカード（card）があります。カードは、写真・説明・ボタンなどをひとつの箱の中に収めて表示するための便利なデザイン部品です。

カードは.cardというクラスを使うことで作ることができます。


<div class="card" style="width: 18rem;">
  <img src="/img/view/java-exception-introduce-01.jpg" class="card-img-top" alt="サンプル画像">
  <div class="card-body">
    <h5 class="card-title">カードのタイトル</h5>
    <p class="card-text">これはカード内に表示するテキストです。</p>
    <a href="#" class="btn btn-primary">詳しく見る</a>
  </div>
</div>

ブラウザ表示

2. 画像に丸みをつけるroundedクラスの使い方

Bootstrapでは、画像やカードの角を丸くするためにroundedというクラスを使います。

「角がとがっているとちょっと固い印象になるな…」というときに、roundedをつけると、やさしく見えるデザインに変えられます。

使い方はとても簡単で、画像や要素にクラスをつけるだけです。


<img src="/img/view/java-exception-introduce-01.jpg" class="img-fluid rounded" alt="丸みのある画像">

ブラウザ表示

さらに、もっと丸くしたい場合はrounded-circle（まん丸に）やrounded-pill（カプセル型）などのバリエーションもあります。

rounded：ほんのり角を丸く
rounded-circle：円形（正方形の画像向け）
rounded-pill：カプセルのような形に

3. 影をつけるshadowクラスの使い方

画像やカードに立体感を出したいときに便利なのがshadowクラスです。

影をつけることで、要素が「浮き上がっている」ような印象を与えることができます。これにより、よりプロっぽいデザインに近づけます。

Bootstrap 5には、以下のようなバリエーションがあります：

shadow-sm：小さめの影
shadow：標準的な影
shadow-lg：大きく目立つ影
shadow-none：影を消す


<div class="card shadow-lg" style="width: 18rem;">
  <img src="/img/view/java-exception-introduce.jpg" class="card-img-top" alt="影付きカード">
  <div class="card-body">
    <h5 class="card-title">影のあるカード</h5>
    <p class="card-text">影をつけることで立体的に見えます。</p>
  </div>
</div>

ブラウザ表示

4. 画像とカードを組み合わせておしゃれに

画像をカードに入れるだけでなく、roundedやshadowを組み合わせてより洗練されたデザインにすることができます。

初心者でも、画像に「角の丸み」と「影」を加えるだけで、プロっぽい見た目にできます。


<div class="card shadow rounded" style="width: 18rem;">
  <img src="/img/view/java-exception-introduce-01.jpg" class="card-img-top rounded" alt="おしゃれな画像">
  <div class="card-body">
    <h5 class="card-title">洗練されたカード</h5>
    <p class="card-text">画像と装飾を組み合わせて見た目を美しく。</p>
  </div>
</div>

ブラウザ表示

5. よくある失敗と装飾が効かないときの対処法

「roundedやshadowをつけたのに何も変わらない…」そんなときによくある原因がこちらです。

BootstrapのCSSファイルが読み込まれていない
クラス名の綴り間違い（例：roundeやshado）
画像にすでに別のスタイルがかかっていて上書きされている

まずは、正しくCDNが読み込まれているかを確認しましょう。


<!-- Bootstrap 5 のCSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

そしてクラス名は英単語そのままなので、スペルミスに注意して丁寧に書くことが大切です。

6. roundedとshadowで簡単にデザインアップ

プログラミング初心者でも、Bootstrapのroundedとshadowクラスを使えば、難しいコードを書かずにおしゃれなデザインを実現できます。

まるで写真に額縁をつけるような感覚で、画像を装飾することができるのです。

HTMLとクラス名を覚えるだけで、ホームページやブログがぐっと見栄え良くなるので、まずは何度も試してみましょう。

まとめ

Bootstrapの画像装飾やカードデザインは、初心者でも扱いやすく、写真や要素の見た目を大きく向上させる力があります。今回の記事では、カードの基本構造、画像に丸みを付けるためのroundedクラス、立体感を生むshadowクラス、そしてそれらを組み合わせたデザインの実例を通して、画像とカードの装飾テクニックを一つひとつ丁寧に学びました。画像の角を少し丸くするだけでも柔らかい印象になり、影をつけることで自然に奥行きを表現できるため、シンプルなデザインであっても見違えるほど洗練された印象に変わるのが特徴です。さらに、カードは画像・テキスト・ボタンを一つのまとまりとして見せることができるため、ブログ記事の表示、メンバー紹介、製品一覧、記事カードなどさまざまな場面で役立つ実践的な要素です。丸みや影の調整を少し変えるだけで印象が変化し、レイアウトの幅も広がるため、個人サイトから企業向けサイトまで柔軟に対応できます。画像の装飾で重要なのは、roundedの使い分けや、shadowの段階的な影の強弱の理解です。たとえばroundedは単に丸くするだけではなく、rounded-circleを使えば円形に、rounded-pillを使えば特徴的なカプセル形にできるため、用途に応じて柔軟に調整できます。一方shadowクラスは影の強さを調整でき、shadow-smは控えめな立体感、shadowは標準的な深さ、shadow-lgは存在感のある影として採用できます。これらの組み合わせによって、軽やかなデザインから重厚感のあるデザインまで自在に変化させることが可能で、デザインの方向性に合わせて最適なクラスを選べます。BootstrapはCSSを意識せずともクラス名一つで見た目が変えられる点が非常に魅力的であり、HTMLの基礎に触れながら自然にデザインの感覚も身につけられます。また、実際のプロジェクトでは、カードを複数並べたり、画像サイズを揃えたり、影の統一感を持たせることで、ページ全体が整った印象になり、利用者に安心感を与えるデザインを作ることができます。以下のようなサンプルコードは、roundedとshadowを組み合わせた、学んだ内容をすぐに試せる応用例です。

応用サンプルコード：rounded＋shadowを使ったカードレイアウト


<div class="card shadow rounded mb-3" style="width: 20rem;">
  <img src="/img/view/java-exception-introduce.jpg" class="card-img-top rounded" alt="装飾画像">
  <div class="card-body">
    <h5 class="card-title">装飾されたカード</h5>
    <p class="card-text">丸みと影を組み合わせて柔らかさと立体感を表現。</p>
    <a href="#" class="btn btn-primary">詳細を見る</a>
  </div>
</div>

ブラウザ表示

上記のように、roundedとshadowをとても自然に組み合わせるだけで、初心者とは思えないくらい完成度の高いデザインになります。特に画像に丸みを入れたうえでカード自体にも丸みを設定することで、全体の統一感が生まれ、視線が自然に中央へと誘導されるため、情報が読みやすくなります。影を加えることで「浮き上がり感」が出るため、画面の中でカードが埋もれにくくなり、見せたい情報にしっかりと注意を向けさせる効果も期待できます。さらに、カードはレスポンシブ設計との相性が良く、画面幅に応じて自然に折り返して並んでいくため、パソコン・タブレット・スマートフォンいずれの画面でも崩れにくいデザインを簡単に実現できます。roundedとshadowの組み合わせが効かない場合は、クラスのつけ忘れやスペルミス、CSSの上書きなどが原因であるため、丁寧に確認しながら調整することが大切です。繰り返し触っていくことで、どのような組み合わせが美しく見えるのか、どこに影をつけると自然なのかといった細かな感覚が養われ、デザイン力そのものが向上していきます。

先生と生徒の振り返り会話

生徒：今日の内容を実際に試してみたら、画像の印象がすごく変わってびっくりしました！roundedとshadowをつけるだけでこんなに違うとは思いませんでした。

先生：画像はほんの少しの装飾だけでも雰囲気が大きく変わるからね。カードと組み合わせれば見やすさも上がるし、デザイン全体が自然にまとまるんだよ。

生徒：rounded-circleやrounded-pillも使えるのが面白いですね。用途によって形を変えられるのが便利です。

先生：その通り。写真の種類やレイアウトに合わせて丸みを切り替えると、全体のバランスが整って見えるんだ。

生徒：影の強さも選べるのが便利だと思いました。shadow-lgを試したらカードがぐっと目立ちました。

先生：影は見た目のメリハリをつけるのにとても効果的だから、ぜひシーンに合わせて使ってみてね。

生徒：今日のサンプルをもとに、いろんなカードを作って練習してみます！

先生：うん、実際に手を動かすと理解も深まるから、どんどん試してみるといいよ。