Webで遊ぼ!

Web制作を
遊び感覚で。

MENU BOX
Webで
遊ぼ!
OPEN

ホーム

 > 

 > 

要素やテキストに影をつける (box-shadow text-shadow)

要素やテキストに影をつける (box-shadow text-shadow)

今回は装飾目的のCSSの中でも比較的、使用頻度・汎用性が高いテクニックである「テキストや要素に影を付ける」方法を紹介していきます!影を付ける対象はテキストかそれ以外の要素になるので、まとめて解説していきます。

– 目次 –

動画内容:要素やテキストに影をつける

こんなふうに、要素に影をつけたり

こんなふうにテキストに影をつけたり、

主張しすぎず、さりげなくテキストや要素を目立たせたり、アクセントを加えたりする方法として、対象に影をつけることが効果的である場合はけっこう多いです。
(その他、境界線をつけるという方法もよく使います)

また、影を付けることで立体的に見えるので、クリックすると押せそうな雰囲気を出すことができます。なので、buttonタグやinputタグを使わないボタンを設置したい場合などにも役に立ちます。(▼例)

こちらをクリック!

▲のボタンはクリックするとボタンが押されたように少し移動する以外は、特に何も起こらないようにしていますが、たとえばリンクを貼りつければ、別のページに飛ぶボタンとして使えます。

このように要素を目立たせるだけでなく、ボタンという「役割」を与えることもでき、使い方次第で幅が広がるテクニックなので、ぜひとも覚えておきたいCSSです。
というわけで、今回は「テキスト・要素に影をつける方法と、すぐに使えるテクニック」というテーマでお届けしようと思います!


◆ 要素に影をつける(box-shadow) ◆

要素に影をつけるには、box-shadowプロパティを使用します。

値は、
1)要素から影をどれぐらい離すか(横と縦)
2)影をどれぐらいぼかすか
3)影をどれぐらい大きくするか
4)影の色は何色にするか
5)影を内側につけるか、外側につけるか


上記の1)~5)…つまり5種類の値を指定することができます。

このうち、1~3は「数値+単位」で指定し、4は色の指定方法(キーワードやrgb値など)で指定します。そして5はキーワード値(inset)で指定します。

また、1)要素から影をどれぐらい離すか…この値のみ、指定が必須です。(他の値は任意なので、未設定でも影はつきます。)

1)の、『要素から影をどれぐらい離すか』…ですが、これはオフセットx(横方向にどれだけ離すか)・オフセットy(縦方向にどれだけ離すか)という指定の仕方をします。

つまり、「2px 2px」と記述したら、「右方向に2px、下方向に2px、影を離す」ということになりますし、
「-2px、-2px」と記述すれば、「左方向に2px、上方向に2px、影を離す」ということになります。

2)ぼかしについては、値が大きいほど影がぼやけ、0に近づくほどくっきりした影になります。負の値は無効で、指定しなかった場合は0(くっきりとした影)になります。

3)影の大きさについては、値が大きいほど影が大きくなり、小さくなるほど影も小さくなります。こちらの値は負の値も有効です。

4)は色です。rbgaなどを使うと透明性のある影にすることもできます。指定しなかった場合、要素の既定値になります。

5)は影をつける位置です。影を内側にしたい(凹んで見えるようにしたい)場合、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!
  1. ・要素に影をつけるには、box-shadowプロパティを使う!
  2. ・値は複数あるが、必須なのはオフセットxとオフセットyの値!

◆ box-shadowの応用 ◆

box-shadowは、「,(カンマ)」で区切ることで、1つの要素に複数の影をつけることが可能です。

これを利用して、『よりそれっぽく見えるボタン』を作ってみようと思います。

冒頭で例に出したボタンですが、もう一度見てみてください。注意深く見てみると、要素に影が2種類ついているのが分かるかと思います。

こちらをクリック!

それでは、影を1つ外してみましょう。

こちらをクリック!

違いに気づきましたか?それでは、残ったもう1つの影も外してみます。

こちらをクリック!

影がなくなると、ボタンっぽさ失われてしまいますね。UI(ユーザーインターフェース)的にも、「これはボタンである」と、見た目ではっきり分かる方が好ましいと言えます。

そこで、box-shadowの応用編として、要素に影を2つ付けることでボタンらしいボタンの作り方をご紹介します。

1つの要素に影を2つ付けるには、次のように値と値を ,(カンマ)で区切ります。

■セレクタ { box-shadow: 2px 2px 2px red, -2px -2px 2px blue inset; }

そして、これを利用して、「要素の背後に暗い影をつけた上で、要素の内側に明るい影をつける」ことで、単に影をつけるだけよりも、より立体感を出すことができます。

それではあらためて、影を2つけたボタンのサンプルコードと表示結果をみてみましょう。

    <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!
  1. ・box-shadowの値を,(カンマ)で区切ることで、1つの要素に影を複数つけられる!
  2. ・影を複数付けることで、ボタンの見た目を、よりボタンっぽくできる!

◆ テキストに影をつける(text-shadow) ◆

box-shadowプロパティで要素に影をつけることができるのとほぼ同じように、テキストにも影をつけることができます。

値の設定の仕方などは、box-shadowとほぼ同じなのですが、少し異なる点があり、「影の大きさ」・「影の位置(inset)」は指定できません。

なので、値は
1)オフセットx、オフセットy
2)影のぼかし
3)影の色


の3種類ということになります。それを踏まえて記述例を紹介します。

*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
ぼかし
影の色

▲影の色を文字色と同じ黒にして、ぼかしを0にすると、影ができるというよりは文字がダブって表示されるので、かなり見づらくなります。
飾り目的・デザイン重視で、ユーザーに文字を読んでもらう必要がない場合はそういった設定もありですが、基本的には読みやすさを最優先にして設定すると良いでしょう。

    POINT!
  1. ・text-shadowプロパティで、テキストに影をつけることができる!
  2. ・値はbox-shadowと似ているが、影の大きさや影をつける位置(inset)を設定する値はないので注意!

◆ text-shadowの応用 ◆

text-shadowプロパティもbox-shadowプロパティと同じように、値を「,(カンマ)」で区切ることで、1つのテキストに複数の影をつけることが可能となっています。

この章では、それを利用して「テキストに縁取りを入れる」というテクニックを紹介します!

冒頭でもチラッとお見せしていたのですが、このような感じになります。

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プロパティで透明化するのも1つの手ですが、画像に手を加えたくない場合は、文字に縁取りを入れると読みやすくできるので、ぜひ覚えておきたいテクニックです!

    POINT!
  1. ・text-shadowも、1つのテキストに複数の影をつけることが可能!
  2. ・複数の影をつけることで、文字の縁取りができる!
  3. ・画像の上に文字を配置したい時などに便利!

ワンポイントチェック

誰もが一度は試したくなる…のではないかと思うのですが、「極端にbox(text)-shadowの値を大きくしたらどんな感じになるか」をやってみようと思います。

1つの例ですが、こんな感じになります。box-shadow: 50px 50px 10px 10px rgba(136, 136, 136, 0.28); としてます。
…文章が影に被っちゃいましたね笑。このように、オフセットx・yの値を大きくして影を離しすぎたり、影の大きさを大きくしすぎたりすると、他の要素に被ってしまうので注意が必要です。

ちなみにですが、ぼかしの値を極端に大きくすると、ぼかされすぎて影が認識できない(見えない)ぐらいになってしまいます。

さらにちなみにですが、text-shadowの場合は、

こんな感じになります



影の存在を分かりやすくするため、ぼかしの値は3pxに抑えてますが、オフセットx・yは50pxと極端に大きくしてみました。

また、Web制作の現場で使えるかどうかは微妙な小技ですが、文字色を透明色か背景色と同じにして隠し、さらに隠した本来のテキストを選択できないように、user-select: none; を設定すれば「影のみを表示させる」ということも可能です。(▼こんな感じ)

影だけ表示

今回の動画で紹介したコード!

今回の解説動画で使用したコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。(※スクロールできます)

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <style>
    .height {
      height:200px;
    }
    .shadowbox {
      background-color: aliceblue;
      height: 500px;
      width: 800px;
      margin: 200px auto;
    }
    .shadowbox1 {
      box-shadow: 3px 3px 3px 3px grey;
    }
    .shadowbox2 {
      box-shadow: -3px -3px 3px 3px grey;
    }
    .shadowbox3 {
      box-shadow: 3px 3px 5px 2px lightblue inset;
    }
    .shadowbox4 {
      box-shadow: 3px 3px 5px 2px lightblue inset,3px 3px 5px 2px blue;
    }
    .textshadow {
      font-size: 3rem;
      text-align: center;
      font-weight: bold;
      font-family: sans-serif;
      margin: 200px;
      padding: 200px;
    }
    .textshadow1 {
      text-shadow: 3px 3px 3px grey;
    }
    .textshadow2 {
      text-shadow: -3px -3px 3px yellow;
    }
    .textshadow3 {
      text-shadow: 0 0 10px green;
    }
    .textshadow4 {
      color: white;
      text-shadow: 2px 2px 2px black,
      2px -2px 2px black,
      -2px 2px 2px black,
      0 2px 2px black,
      2px 0 2px black,
      -2px 0 2px black,
      0 -2px 2px black;
    }
  </style>
  <body>
      <div class="height"></div>
    <div class="shadowbox shadowbox1"></div>
    <div class="shadowbox shadowbox2"></div>
    <div class="shadowbox shadowbox3"></div>
    <div class="shadowbox shadowbox4"></div>
      <div class="height"></div>

      <p class="textshadow textshadow1">テキストシャドウ</p>
      <p class="textshadow textshadow2">テキストシャドウ</p>
      <p class="textshadow textshadow3">テキストシャドウ</p>
      <p class="textshadow textshadow4">テキストシャドウ</p>

  </body>
</html>

« »

カテゴリーリンク

著者について- author profile -

ROYDOプロフィール写真
RO・Y・DO(rowaido)

モバイルアプリ(iOS・Android)ディベロッパー&デザイナー

これまでに、可読性の高いカラーパターンを自動で生成するアプリや、『第3火曜日』といった形式で通知をスケジュールできるアプリなどを制作。

サブでWebデザイン・フロントエンドエンジニアとしても活動しています。

📝ツール・言語:JavaScript/React Native/Kotlin/Android Studio/Swift/SwiftUI

🎓資格:基本情報技術者/ウェブデザイン技能検定3級

Twitterアイコン Instagramアイコン