目次

    CSSで要素や文字に影をつける！box-shadowプロパティとtext-shadowプロパティの使い方！

    【 2025/09/15 13:40 更新 】
    目次

      CSS
      プロパティ      box-shadow｜要素に影をつける

      box-shadowプロパティとは？

      〜 box-shadowのイメージ 〜

      box-shadowのイメージ

      CSSのbox-shadowは、要素に影をつけることができるCSSプロパティです。

      〜 box-shadowの書き方 〜

      セレクタ {
      　　　　box-shadow:(ずらすX値) (ずらすY値) (ぼかし値) (拡大値) (色) (内側"inset");
      　　　　その他スタイル...
      }

      〜 box-shadowの各値の説明 〜

      (ずらすX値)

      影に対して右へずらしたいサイズを指定します。
      例：box-shadow: 10px 0px 10px 0 #6b6b6b;

      box-shadowのx値ずらしたイメージ
      (ずらすY値)

      影に対して下へずらしたいサイズを指定します。
      例：box-shadow: 0px 10px 10px 0 #6b6b6b;

      box-shadowのy値ずらしたイメージ
      (ぼかし値)

      影に対してぼかしたいサイズを指定します。
      ぼかすほど影の幅は大きくなり、色がぼかされます。
      例：box-shadow: 0px 0px 10px 5px #6b6b6b;

      box-shadowのぼかしたイメージ
      (拡大値)

      影に対して拡大したいサイズを指定します。
      拡大するほど影の幅は大きくなります。
      例：box-shadow: 0px 0px 10px 10px #6b6b6b;

      box-shadowの拡大したイメージ
      (色)

      影に対して色を指定します。
      例：box-shadow: 0px 0px 10px 0 red;

      box-shadowの色指定イメージ
      (内側"inset")

      値に文字列"inset"を指定すると、内側への影となります。
      例：box-shadow: 0px 0px 10px 0 #6b6b6b inset;

      box-shadowの内側指定イメージ
      none

      値に文字列"none"のみ指定すると、影なしとなります。
      例：box-shadow: none;

      box-shadowのnoneイメージ
      こじはな
      こじはなはボタンとか目立たせたい要素に影つけてる！
      px（ピクセル）とは

      画像や画面を構成する最小単位です。
      pxの他にも、rem・em・%・vw・vhなどのサイズ単位があります。

      1ピクセルのイメージ

      【 CSSサイズ単位の記事 】

      リンク先のトップ画像

      CSSの基本なサイズ単位px,rem,em,%,vw,vh,vmin,vmaxについて解説

      こじはなNote

      box-shadowのコード例

      【 CSS 】
      【 HTML 】

      ブラウザで実行するとこんな感じです。

      それぞれ外側・内側の影がつきましたね！

      CSS
      プロパティ      text-shadow｜文字に影をつける

      text-shadowプロパティとは？

      〜 text-shadowのイメージ 〜

      text-shadowのイメージ

      CSSのtext-shadowは、文字に影をつけることができるCSSプロパティです。

      〜 text-shadowの書き方 〜

      セレクタ {
      　　　　text-shadow:(ずらすX値) (ずらすY値) (ぼかし値) (色);
      　　　　その他スタイル...
      }

      〜 text-shadowの各値の説明 〜

      (ずらすX値)

      影に対して右へずらしたいサイズを指定します。
      例：text-shadow: 10px 0px 10px #494949;

      text-shadowのx値ずらしたイメージ
      (ずらすY値)

      影に対して下へずらしたいサイズを指定します。
      例：text-shadow: 0px 10px 10px #494949;

      text-shadowのy値ずらしたイメージ
      (ぼかし値)

      影に対してぼかしたいサイズを指定します。
      ぼかすほど影の幅は大きくなり、色がぼかされます。
      例：text-shadow: 0px 0px 10px #494949;

      text-shadowのぼかしたイメージ
      (色)

      影に対して色を指定します。
      例：text-shadow: 0px 0px 0 red;

      text-shadowの色指定イメージ
      none

      値に文字列"none"のみ指定すると、影なしとなります。
      例：text-shadow: none;

      text-shadowのnoneイメージ
      text-shadowは指定できる値が少ない

      text-shadowプロパティは、box-shadowプロパティで指定できた拡大率・内側が指定できない。

      text-shadowのコード例

      【 CSS 】
      【 HTML 】

      ブラウザで実行するとこんな感じです。

      文字に影がつきましたね！

      まとめ

      • CSS
        プロパティ        box-shadowは要素に影をつけることができるプロパティ。
      • 書き方：box-shadow: (ずらすX値) (ずらすY値) (ぼかし値) (拡大値) (色) (内側"inset");
      • CSS
        プロパティ        text-shadowは文字に影をつけることができるプロパティ。
      • 書き方：text-shadow: (ずらすX値) (ずらすY値) (ぼかし値) (色);
      • 値(ずらすX値)：影に対してずらしたい横のサイズを指定する。
      • 値(ずらすY値)：影に対してずらしたい縦のサイズを指定する。
      • 値(ぼかし値)：影に対してぼかしたいサイズを指定し、
        ぼかすほど影の幅は大きくなり色がぼかされる。
      • 値(拡大値)：影に対して拡大したいサイズを指定します。
        拡大するほど影の幅は大きくなる。
      • 値(色)：影に対して色を指定する。
      • 値(内側"inset")：値に文字列"inset"を指定すると、内側への影となる。
      • 値"none"： 値に文字列"none"のみ指定すると、影なしとなる。
      【 2025/09/15 13:40 更新 】