CSSでは、box shadowというタグを使うことで影を付けることができます。
box shadowでは、写真やアイコンなどに自分で好きなように影を付け加えることが可能です。
WEB ページを作る際、「写真やアイコンなどが味気ない」と感じたことはありませんか?
影を付けることができれば、普段のWEBページよりもいっそうデザイン性を高めることができるので、味気ないページを作ることなく、ユーザーの方が読みやすいページを作ることができます。
影をつける方法も全く難しいものではないので、box shadowを使えば誰でも簡単に影を設定することが可能なんです。
ということで今回は、WEBページをより一層おしゃれに見せるために、CSSでの影のつけ方について解説していきます。
目次
CSSでの影のつけ方
CSSで影を付ける方法は、box shadowを使うことです。
box shadowはCSSで影をつけるためのタグで、影の向きや大きさ、色、ぼかし具合などを調整することができます。
box shadowを使えば、誰でも簡単に思い通りの影を作り出すことが可能なんです。
では、具体的にどういった使い方をbox shadowですれば影は作れるのでしょうか?
基本的にbox shadowは
▲▲ {
box-shadow : 左右の向き(px) 上下の向き(px) ぼかし具合(px) 影の広がり(px) 色 内側指定 ;このような構造になっています。
ちなみに「▲▲」では影をつける要素を指定しています。
このように、影をつける要素を指定した後、左右の向きや上下の向きなどを半角スペースで区切り、各設定を行っていくような構造がbox shadowです。
主に「左右の向き」「上下の向き」「ぼかし具合」「影の広がり」「色」「内側指定」を指定することができるので、それぞれに数値やコードを指定して好みの影を作っていきます。
そのなかでも、「左右の向き」「上下の向き」はbox shadowを使う上で必ず書かなければいけない部分なので、しっかり覚えておきましょう。
box shadowで設定できる数値と影の変化
さっきも紹介しましたが、box shadowには設定できる項目が多く存在します。
それらをうまく活用することで、自分好みの影を作りだすことが可能です。
ここでは、box shadowで設定できる項目をさらに詳しく解説し、作り出すことができる影の変化についても解説していきます。
左右の向き、上下の向き
box shadowでは、影が左右のどちらに伸びるのか、上下のどっちに伸びるのかを設定することができます。
これらの設定はbox shadowでは必須で、必ず書く必要がある項目です。
例えば、
black {
box-shadow : 10px 10px ;このような場合、下の画像のように右と下に10pxずつ影が伸びるようになります。
このとき、最初に記入されている数値が「左右の向き」、次に記入されているのが「上下の向き」を表しています。
また、数値をマイナスにすることで向きを逆にすることも可能です。
black {
box-shadow : -10px -10px ;
ぼかし具合
box shadowでは、影をぼかしてより一層リアル感を演出することが可能です。
影をぼかすには、まず「左右の向き」「上下の向き」を設定した後、ぼかし具合の数値を書き込みます。
black {
box-shadow : 10px 10px 5px;
ぼかす強さを設定することができるので、そのページに合った表現をその都度設定することができます。
black {
box-shadow : 10px 10px 10px;
色
box shadowでは、影の色を変えることができます。
影の色を設定する方法は簡単。
「左右の向き」「上下の向き」「ぼかし具合」などの数値の後に、半角スペースを空けて色コードを設定するだけです。
black {
box-shadow : 10px 10px 5px #fd7e00;
もちろん、「左右の向き」「上下の向き」が設定されていれば色を指定することは可能なので、「ぼかし具合」を設定しなければいけないわけではありません。
black {
box-shadow : 10px 10px #fd7e00;
影の広がり
box shadowでは、影の広がりを設定することができます。
影の広がりを設定すれば、「左右の向き」「上下の向き」「ぼかし具合」「色」などを設定して作成した影をその比率のまま縮小拡大することが可能です。
「影の広がり」の設定方法は、「左右の向き」「上下の向き」「ぼかし具合」を設定した後に、縮小拡大したい数値を記入するだけ。
black {
box-shadow : 10px 10px 5px 10px;
縮小したい場合は、数値をマイナスにすることで可能になります。
black {
box-shadow : 10px 10px 5px -10px;
内側指定
box shadowでは、外側だけではなく、内側にも影を向けることが可能です。
内側に影を向けるには、box shadowの設定の最後に「inset」と入力してください。
black {
box-shadow : 10px 10px 5px inset;
insetと入力するだけで内側に影を作り出すことができ、さらに表現の幅を増やすことができます。
同時に複数の影を付けることも可能
box shadowを使えば、同時に複数の影をつけることもできます。
box shadowでは、コンマを用いることで、さらに多くの設定を行うことが可能。
今まで紹介してきた方法では、「影を外側に伸ばす」か「内側に伸ばす」かのどちらか一方を選択する必要がありました。
ただ、コンマを使えば、box shadowではさらに複数の設定を行うことができるので、「内側外側へ同時に影を伸ばす」なんてこともできてしまいます。
black {
box-shadow : -10px -10px 5px #FF0000 inset,
box-shadow : 10px 10px 5px #262626;
まとめ
ということで今回は、CSSで影を付ける方法「box shadow」について主に解説をしてきました。
box shadowは
要素指定 ｛ box-shadow : 左右の向き(px) 上下の向き(px) ぼかし具合(px) 影の広がり(px) 色 内側指定 ;
このような構成になっていて、各項目ごとに半角スペースで区切られている形になります。
これらの項目の中でも、「左右の向き」「上下の向き」は記入が必須で、必ず設定しなければいけない項目でもあるので注意しましょう。
また、各項目は主に、「左右の向き」「上下の向き」であれば影が伸びる方向を設定。
「ぼかし具合」であれば影をどのぐらいぼかすかを設定。
「色」はその名の通り、影の色を設定することができます。
このようにbox shadowには多くの項目が用意されており、それらを設定していくことで自分が理想とする影を作り出すことができるんです。
そんなCSSでの影の作り方「box shadow」について、少しでもこの記事が参考になったのであれば幸いです。
皆さんがより良いWEB制作をできるように心から願っております。
最後まで見ていただきありがとうございました。
コメント