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

生徒

「Bootstrapで作ったボタンやカードって便利なんですが、影や角の丸さ、境界線の色をもっと自分の好みに変えたいんです。どうすればいいですか？」

先生

「Bootstrapには$box-shadow、$border-radius、$border-colorといったSass変数があります。それを変更すると、影や角丸、枠線の色をまとめて調整できるんですよ。」

生徒

「影や角丸って、具体的にはどんな部分を変えられるんですか？」

先生

「例えばカードの影を濃くしたり、ボタンの角を丸くしたり、境界線を青やグレーに変えたりできます。デザインの雰囲気を統一するのにとても役立つんです。」

1. $box-shadowで影をコントロールする

影（シャドウ）は要素を立体的に見せる効果です。Bootstrapのデフォルトにもbox-shadowが設定されていますが、$box-shadow変数を使えば、影の濃さや広がりを一括で変更できます。

影を強めれば「浮き出た印象」になり、薄くすれば「フラットな印象」にできます。影はWebデザインにおける「光と影の演出」なので、ユーザーに見やすさや階層構造を伝えるのに有効です。

2. $border-radiusで角丸を統一する

角丸（border-radius）は、ボタンやカードの角をどれだけ丸くするかを決めます。$border-radius変数を変更すれば、全体の角丸の基準を一度に変えられます。

丸みを強くすると柔らかく親しみやすい印象に、角を直角に近づけるとスタイリッシュで堅い印象になります。つまり、角丸の調整は「サイトの個性」を表現する大切なポイントです。

3. $border-colorで境界線の色を変える

境界線（ボーダー）は要素を区切る役割を持ちます。Bootstrapの初期設定ではグレー系が多いですが、$border-colorを変更することで全体を統一した配色にできます。

例えば「ブランドカラーに合わせた青い枠線」にすれば、全体のデザインに一体感を持たせることができますし、落ち着いた淡い色にすればミニマルでシンプルな印象を与えることができます。

4. 実際のカスタマイズ例

ここでは、影をやや濃く、角丸を大きめに、境界線を青に統一する例を紹介します。まずは変更前のHTMLです。


<div class="card p-3 mb-3" style="box-shadow: var(--bs-box-shadow); border-radius: var(--bs-border-radius); border:1px solid var(--bs-border-color);">
  <h5 class="card-title">カスタマイズされたカード</h5>
  <p class="card-text">影・角丸・境界線をSass変数で一括変更しました。</p>
  <a href="#" class="btn btn-primary">ボタン</a>
</div>

ブラウザ表示

カスタマイズは、下記のように変数の上書きを行います。


<style>
    :root {
        --bs-box-shadow: 0 .5rem 1rem rgba(0,0,0,.3); /* 影を強めに */
        --bs-border-radius: 1rem; /* 角丸を大きく */
        --bs-border-color: #007bff; /* 境界線を青に */
    }
</style>

<div class="card p-3 mb-3" style="box-shadow: var(--bs-box-shadow); border-radius: var(--bs-border-radius); border:1px solid var(--bs-border-color);">
  <h5 class="card-title">カスタマイズされたカード</h5>
  <p class="card-text">影・角丸・境界線をSass変数で一括変更しました。</p>
  <a href="#" class="btn btn-primary">ボタン</a>
</div>