【入門】Bootstrapの使い方　〜 影(Shadows) 〜

みなさんこんにちは さくちゃん です。

本日は、「影(Shadows)の使い方」について書いていきます。

本記事は、公式サイトを参照しながら解説していきます。
公式サイトはこちら
では早速やって行きましょう！

Bootstrapの使い方　〜 影(Shadows) 〜

影(Shadows)

Bootstrapでは、簡単に下の図のような「影（Shadows）」をつけることができます。

ただし細かな設定はできません。
細かな設定をする場合は、CSSの「box-shadow」を使って設定していきます。

では実際にコードを書いていきましょう！

書き方

書き方は、上の図のように4つあります。
では1つずつ見ていきましょう。

影なし

影を指定しない場合は、クラス名に「shadow-none」と指定します。
書き方は下のように書いて行きます。

<div class="shadow-none">No shadow</div>

小さい影

小さい影を指定する場合は、クラス名に「shadow-sm」と指定します。
書き方は下のように書いて行きます。

<div class="shadow-sm">Small shadow</div>

通常の影

通常の影を指定する場合は、クラス名に「shadow」と指定します。
書き方は下のように書いて行きます。

<div class="shadow">Regular shadow</div>

大きい影

大きい影を指定する場合は、クラス名に「shadow-lg」と指定します。
書き方は下のように書いて行きます。

<div class="shadow-lg">Larger shadow</div>

角を丸くする

角を丸くしたいときは、クラス名に「rounded」とつけると丸くできます。
書き方は

<div class="shadow rounded">Regular shadow</div>

と書きます。

では本日は以上になります。