こんにちは、Autumn（オータム）です。
ホームページを見ていると、要素の周りに影がついたデザインを見たことがありませんか？
影が付くだけでスタイリッシュなイメージに見えますし、ホームページのコーディングの案件でもよく使われてるなーと感じます。
影をつける時はCSSプロパティの「box-shadow」を利用してあげます。
使い方も基本を押さえれば簡単ですので、この機会に一緒に勉強していきましょう！
実例を元に見てすぐ理解できるよう解説していきますので、ぜひ最後まで読んでいただければ幸いです。
ソースコードも添付してますので、コピペするもよし、自分で書いてみるもよし、です。
CSSプロパティ「box-shadow」とは
先ほども少し触れましたが、「box-shadow」を使うことで、要素に影をつけて立体感を生み出すことができます。
また、使い方次第で様々な表現方法ができるため、デザインの幅が広がります。
「box-shadow」の使い方
それでは実際の使い方を解説していきますね。
「box-shadow」は複数の値を操作することで影のデザインを変更することができます。それぞれの値の意味は下記の通りです。
要素名{ box-shadow: ◯px △px ◇px ＊px rgba( ); }
順に解説していきます。
水平・垂直方向への調整
1つ目の値（◯）は、影の水平の向きを調整するのに使います。
正の値であれば影は右に伸び、負の値であれば左に伸びます。
左：box-shadow: 20px 0px 10px 0px;
右：box-shadow: -20px 0px 10px 0px;
2つ目の値（△）は、影の垂直方向への調整に使います。
正の値であれば影は下に伸び、負の値であれば上に伸びます。
左：box-shadow: 0px 20px 10px 0px;
右：box-shadow: 0px -20px 10px 0px;
ぼかしの調整
3つ目の値（◇）は、影のぼかしを調整することができます。
この値では負の値を入れることはできません。
０が最小値で、この時ぼかしがない状態になります。
左：box-shadow: 20px 20px 10px 0px;
右：box-shadow: 20px 20px 0px 0px;
フワッとした印象をつける時にはぼかしを強めに、コントラストを強く表現したい場合は、ぼかしを０にして直線的な影をつけるのもアリですね！
影の広がりの調整
最後の4つ目（＊）は、影の広がりを調整します。
正の値であれば影は拡大し、負の値であれば縮小していきます。
左：box-shadow: 0px 0px 10px 10px;
右：box-shadow: 0px 0px 10px -10px;
これらの値を組み合わせて、様々な影のデザインをしてみましょう！
「box-shadow」応用編
最後に、「box-shadow」を使用した実例をご紹介します。
「box-shadow」を利用することで、ボタンなどの輪郭を立体的に作ることもできます。
下記の例は「box-shadow」とホバーアクションを組み合わせたもので、カーソルを合わせるとボタンを押したように見せています。
コード数も少なくカンタンに取り入れることができるので、ぜひ真似してみてください！
See the Pen
box-shadow by Autumn (@regprvcd-the-animator)
on CodePen.
まとめ
「box-shadow」は様々な表現ができるプロパティですので、使いこなせるよう練習してみてください。
プログラミングの勉強は「いかに手を動かした時間が長いか」が上達のカギになります。
今回の記事も見ただけでは、スキル上達に近づくことはありません。実践して少しずつ自分のものにしていくものです。
これからも勉強を継続して、仕事として使えるレベルまで育てていきましょう！
読んでいただき、ありがとうございました！
