こんなふうに、要素に影をつけたり
こんなふうにテキストに影をつけたり、
主張しすぎず、さりげなくテキストや要素を目立たせたり、アクセントを加えたりする方法として、対象に影をつけることが効果的である場合はけっこう多いです。
（その他、境界線をつけるという方法もよく使います）
また、影を付けることで立体的に見えるので、クリックすると押せそうな雰囲気を出すことができます。なので、buttonタグやinputタグを使わないボタンを設置したい場合などにも役に立ちます。（▼例）
こちらをクリック！
▲のボタンはクリックするとボタンが押されたように少し移動する以外は、特に何も起こらないようにしていますが、たとえばリンクを貼りつければ、別のページに飛ぶボタンとして使えます。
このように要素を目立たせるだけでなく、ボタンという「役割」を与えることもでき、使い方次第で幅が広がるテクニックなので、ぜひとも覚えておきたいCSSです。
というわけで、今回は「テキスト・要素に影をつける方法と、すぐに使えるテクニック」というテーマでお届けしようと思います！
◆ 要素に影をつける（box-shadow） ◆
要素に影をつけるには、box-shadowプロパティを使用します。
値は、
１）要素から影をどれぐらい離すか（横と縦）
２）影をどれぐらいぼかすか
３）影をどれぐらい大きくするか
４）影の色は何色にするか
５）影を内側につけるか、外側につけるか
上記の１）～５）…つまり５種類の値を指定することができます。
このうち、１～３は「数値+単位」で指定し、４は色の指定方法（キーワードやrgb値など）で指定します。そして５はキーワード値（inset）で指定します。
また、１）要素から影をどれぐらい離すか…この値のみ、指定が必須です。（他の値は任意なので、未設定でも影はつきます。）
１）の、『要素から影をどれぐらい離すか』…ですが、これはオフセットx（横方向にどれだけ離すか）・オフセットy（縦方向にどれだけ離すか）という指定の仕方をします。
つまり、「2px 2px」と記述したら、「右方向に2px、下方向に2px、影を離す」ということになりますし、
「-2px、-2px」と記述すれば、「左方向に2px、上方向に2px、影を離す」ということになります。
２）ぼかしについては、値が大きいほど影がぼやけ、0に近づくほどくっきりした影になります。負の値は無効で、指定しなかった場合は0（くっきりとした影）になります。
３）影の大きさについては、値が大きいほど影が大きくなり、小さくなるほど影も小さくなります。こちらの値は負の値も有効です。
４）は色です。rbgaなどを使うと透明性のある影にすることもできます。指定しなかった場合、要素の既定値になります。
５）は影をつける位置です。影を内側にしたい（凹んで見えるようにしたい）場合、insetと記述します。そうでない場合、特に値を指定する必要はありません。
基本を押さえたところで、記述例をみていきましょう。
＊box-shadowプロパティの記述例＊
■セレクタ { box-shadow: 2px 2px 3px 3px grey; }
これだけ見てもイメージしづらいので、続けてサンプルコードと表示結果をみていきましょう！
box-shadowの値はいくつかパターンを用意してみました。値を変えると表示がどうなるか、色々試して遊んでみてくださいね！
<div>
<div class="sample_shadow1"></div>
</div>
.sample_shadow1 {
margin: 1.5rem auto;
width: 200px;
height: 100px;
background-color: aliceblue;
box-shadow: 2px 2px 2px 2px grey;
}
| オフセットx | |
| オフセットy | |
| ぼかし | |
| 影の大きさ | |
| 影の色 | |
| 影の位置 |
- POINT!
- ・要素に影をつけるには、box-shadowプロパティを使う！
- ・値は複数あるが、必須なのはオフセットｘとオフセットｙの値！
◆ box-shadowの応用 ◆
box-shadowは、「,（カンマ）」で区切ることで、１つの要素に複数の影をつけることが可能です。
これを利用して、『よりそれっぽく見えるボタン』を作ってみようと思います。
冒頭で例に出したボタンですが、もう一度見てみてください。注意深く見てみると、要素に影が２種類ついているのが分かるかと思います。
こちらをクリック！
それでは、影を１つ外してみましょう。
こちらをクリック！
違いに気づきましたか？それでは、残ったもう１つの影も外してみます。
こちらをクリック！
影がなくなると、ボタンっぽさ失われてしまいますね。UI（ユーザーインターフェース）的にも、「これはボタンである」と、見た目ではっきり分かる方が好ましいと言えます。
そこで、box-shadowの応用編として、要素に影を２つ付けることでボタンらしいボタンの作り方をご紹介します。
１つの要素に影を２つ付けるには、次のように値と値を ,（カンマ）で区切ります。
■セレクタ { box-shadow: 2px 2px 2px red, -2px -2px 2px blue inset; }
そして、これを利用して、「要素の背後に暗い影をつけた上で、要素の内側に明るい影をつける」ことで、単に影をつけるだけよりも、より立体感を出すことができます。
それではあらためて、影を２つけたボタンのサンプルコードと表示結果をみてみましょう。
<p class="samplebtn1">こちらをクリック！</p>
.samplebtn1 {
background-image: linear-gradient(skyblue,darkblue);
padding:10px;
box-shadow: 3px 3px 4px 1px grey, inset 2px 2px 2px white;
width:fit-content;
border-radius: 10px;
font-weight:bold;
color:white;
cursor:pointer;
margin:1rem;
transition: all .2s;
}
.samplebtn1:hover {
color: blue !important;
background-image: linear-gradient(aliceblue,lightblue) !important;
}
.samplebtn1:active {
transform: translate(3px,3px);
}
こちらをクリック！
▲今回はあくまで影をつけるのがテーマなので、他のCSSプロパティの説明はしませんが、ボタンを作る場合は、:hoverや:activeの疑似クラスを使ってボタンを押した（クリックした）時の変化をつけてあげると、よりボタンであることが分かりやすくなります。
- POINT!
- ・box-shadowの値を,（カンマ）で区切ることで、１つの要素に影を複数つけられる！
- ・影を複数付けることで、ボタンの見た目を、よりボタンっぽくできる！
◆ テキストに影をつける（text-shadow） ◆
box-shadowプロパティで要素に影をつけることができるのとほぼ同じように、テキストにも影をつけることができます。
値の設定の仕方などは、box-shadowとほぼ同じなのですが、少し異なる点があり、「影の大きさ」・「影の位置（inset）」は指定できません。
なので、値は
１）オフセットx、オフセットy
２）影のぼかし
３）影の色
の３種類ということになります。それを踏まえて記述例を紹介します。
＊text-shadowプロパティの記述例＊
■セレクタ { text-shadow: 2px 2px 2px black; }
設定できる値がbox-shadowプロパティよりも少ないぶん、細かい調整はできませんが、扱いは難しくありません。
ただ、背景色や文字色、影の色の組み合わせによっては逆に見づらくなってしまうことがしばしばあります。
それに対し、box-shadowはborderのように要素の周囲を修飾するので、設定することによって要素が見づらくなるということはほとんどありません。
text-shadowの設定は難しくないですが、使い所は注意が必要なプロパティと言えます。
それでは、サンプルコードと表示結果を確認していきましょう！
<p class="sample_textShadow">サンプルテキスト</p>
.sample_textShadow {
font-size: 1.5rem;
text-shadow: 2px 2px 2px grey;
width: fit-content;
margin: 1rem auto;
padding: 6px;
background-color: aliceblue;
}
サンプルテキスト
| オフセットx | |
| オフセットy | |
| ぼかし | |
| 影の色 |
▲影の色を文字色と同じ黒にして、ぼかしを０にすると、影ができるというよりは文字がダブって表示されるので、かなり見づらくなります。
飾り目的・デザイン重視で、ユーザーに文字を読んでもらう必要がない場合はそういった設定もありですが、基本的には読みやすさを最優先にして設定すると良いでしょう。
- POINT!
- ・text-shadowプロパティで、テキストに影をつけることができる！
- ・値はbox-shadowと似ているが、影の大きさや影をつける位置（inset）を設定する値はないので注意！
◆ text-shadowの応用 ◆
text-shadowプロパティもbox-shadowプロパティと同じように、値を「,（カンマ）」で区切ることで、１つのテキストに複数の影をつけることが可能となっています。
この章では、それを利用して「テキストに縁取りを入れる」というテクニックを紹介します！
冒頭でもチラッとお見せしていたのですが、このような感じになります。
text-shadowプロパティを利用して文字を縁取る
上の例はどのようにしているかというと、「複数パターンのオフセットxとオフセットyを設定し、文字の外周全てに影を設定」することによって作られています。
{ text-shadow: 2px 2px black; } では、テキストの右下に影をつけられます。そして、
{ text-shadow: -2px -2px black; } では、テキストの左上に影をつけられます。
こういったオフセットxとオフセットyの設定を少しずつ変え、複数のパターンを同時に設定することで、テキストの全周囲に影をつけることができる…というわけです。
理屈がわかったところで、サンプルコードと改めて表示結果を見ていきましょう！
<p class="fuchidori">文字のふち取り</p>
.fuchidori {
text-shadow:1px 1px 1px black,
-1px -1px 1px black,
1px 0px 1px black,
0px 1px 1px black,
0px -1px 1px black,
-1px 0px 1px black;
font-size: 1.5rem;
color: orange;
font-weight:bold;
width: fit-content;
margin:1rem auto;
padding: 10px;
background-color: aliceblue;
}
文字のふち取り
▲カラーバランスにさえ気をつければ、文字を目立たせられるだけでなく、読みやすくさせることもできます。
たとえば、背景に画像を指定してその上に文字を配置したい場合、画像と文字が重なるとどうしても読みづらくなってしまいます。
背景画像をopacityプロパティで透明化するのも１つの手ですが、画像に手を加えたくない場合は、文字に縁取りを入れると読みやすくできるので、ぜひ覚えておきたいテクニックです！
- POINT!
- ・text-shadowも、１つのテキストに複数の影をつけることが可能！
- ・複数の影をつけることで、文字の縁取りができる！
- ・画像の上に文字を配置したい時などに便利！
