SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2021.07.20
  • CATEGORY
TITLE

【CSS】box-shadowの使い方、影のエフェクトについて解説!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は【CSS】box-shadowの使い方、影のエフェクトについて解説!
の解説になります!

こんな方に読んでほしい

  • CSSを学び始めた方へ
  • CSSについて学びたい方へ
  • 今回はbox-shadow(エフェクト)について解説しております。

box-shadowとは、要素に影を指定する際に使用します。
基本的は使い方の解説は下記の記事を参考にしてください。

box-shadowの基本的は使い方

水平方向、垂直方向、ぼかしなどについて解説しております。

ChromeChromeSafariSafariFirefoxFirefoxIEIEEdgeEdge

box-shadowについて

box-shadowについて

box-shadowとは、要素に影を指定する際に使用します。基本的な値、記述方法は抑えて置きましょう。
書き方は以下のようになります。

box-shadow指定の説明
要素 {box-shadow: 水平方向 垂直方向 影のぼかし 影の広さ 色 内側指定};

指定する項目が多いですが、とても簡単ですので、最後まで読んで実際に試してください。

指定できる値
  • 水平方向 垂直方向
    「4px」のように影の長さを数値と単位で指定できます。
    「4px 5px」のように半角スペースで区切ると「水平方向 垂直方向」に指定ができます。マイナスの値も可能
  • 影のぼかし
    「5px」のように数値と単位で影のぼかしを指定できます。
    数値の値が大きいほど影のぼかしが強くなります。マイナスの値も可能
  • 影の広さ
    「5px」のように数値と単位で影の広さを指定できます。
    数値の値が大きいほど影が全方向に大きくなります。マイナスの値も可能
  • キーワード、またはカラーコードでの指定ができます。
  • 内側指定
    最後に「inset」を指定すると、要素の内側に影が付くようになります。

ポイント!
box-shadowで指定する際には必ず半角スペースで区切りを入れて指定しましょう!
また、水平方向と垂直方向以外は省略しても問題ありません。

エフェクトについて

エフェクトについて

今回は、よく使うエフェクト(影)について解説、ご紹介していきます。
基本的な共通部分は下記を参考にしてください。
書き方は以下のようになります。

ボックスに対してエフェクト

  • box01
  • box02
  • box03
  • box04

画像に対してエフェクト

<ul class="box-effect">
 <li>box01</li>
 <li>box02</li>
 <li>box03</li>
 <li>box04</li>
</ul>
<ul class="img-effect">
 	<li><img src="" alt="画像パス" alt="" /></li>
 	<li><img src="" alt="画像パス" alt="" /></li>
</ul>
/*--ボックスに対してエフェクト--*/
ul.box-effect {
	display: flex; /*--横並びを指定--*/
	justify-content: space-between; /*--liの配置を指定--*/
	flex-wrap: wrap; /*--liの折り返しを指定--*/
}

ul.box-effect li {
	font-size: 1rem;
	font-weight: bold;
	flex: 0 0 120px; /*--liの幅--*/
	border-radius: 10px;
	padding: 1em;
	margin: .5em;
	height: 100px;
	line-height: 100px;
	text-align: center;
	background-color: #fff;
}
/*--ボックスに対してエフェクト--*/
ul.img-effect {
	display: flex; /*--横並びを指定--*/
	justify-content: space-between; /*--liの配置を指定--*/
	flex-wrap: wrap; /*--liの折り返しを指定--*/
}

ul.img-effect li {
	flex: 0 0 340px;
}

シンプルなぼかし

シンプルなぼかしを指定しています。
10px 10px 3pxは、水平方向 垂直方向 影のぼかしになります。
rgba(222 225 230 / 80%)は、グレー色の透明度を80%になります。

ボックスに対してエフェクト

  • box01
  • box02
  • box03
  • box04

画像に対してエフェクト

/*--エフェクト01--*/
ul.box-effect li,
ul.img-effect li img {box-shadow: 10px 10px 3px rgba(222 225 230 / 80%);}

左下を強調させるぼかし

2px 2px 3pxは、水平方向 垂直方向 影のぼかしになります。上記より数値を小さくしています。
rgba(0 0 0 / 40%)は、黒色の透明度を40%になります。黒色を指定することで影を強調させています。

ボックスに対してエフェクト

  • box01
  • box02
  • box03
  • box04

画像に対してエフェクト

/*--エフェクト02--*/
ul.box-effect li,
ul.img-effect li img {box-shadow: 2px 2px 3px rgba(0 0 0 / 40%);}

全体をぼかし

0px 3px 15pxは、垂直方向 影のぼかしになります。
垂直方向のみ指定をし、ぼかしの数値を大きくしています。
rgba(130 130 130 / 90%)は、黒色に近い色のグレー色の透明度を90%になります。

ボックスに対してエフェクト

  • box01
  • box02
  • box03
  • box04

画像に対してエフェクト

/*--エフェクト03--*/
ul.box-effect li,
ul.img-effect li img {box-shadow: 0px 3px 15px rgb(130 130 130 / 90%);}
box-shadowを指定したボタンデザイン

ボタンに対して影をつけることで、より立体的にボタンをレイアウトできます。

まとめ

今回はこれで以上です。
水平方向、垂直方向やぼかしの値を変更しただけでもイメージは変わります。
今回のエフェクトを参考にしてみてください。

POINT
  • box-shadow水平方向 垂直方向 影のぼかし 影の広さ 色 内側指定の順になります。
  • 水平方向と垂直方向以外は省略しても問題ありません。
  • 複数の影を指定したい際には「,」カンマで区切ることで複数の影を指定できます。
  • 現在使用されているブラウザは問題なく表示します。
ChromeChromeSafariSafariFirefoxFirefoxIEIEEdgeEdge
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top