メインコンテンツにスキップ

ボックスの外観:影(シャドウ)を設定する

ボックスにドロップシャドウやインナーシャドウを設定する方法と、色・位置・ぼかし・広がり・対象など各項目の意味を説明します。

今日アップデートされました

ボックスに影(シャドウ)を設定する

注意:1つのボックスにインナーシャドウとドロップシャドウを同時に設定することはできません。

  1. 対象のボックスを選択します。

  2. 右パネルで[ボックス]タブを選択します。

    パネルが閉じている場合は、右パネルを開いてください。

  3. ボックスタブ内の[外観]メニューの[影]フィールドで設定を行います。


シャドウの設定項目

設定できる項目は次の通りです。

  • 位置

    • X:左右にずらす

    • Y:上下にずらす

  • ぼかし(Blur)

  • 広がり(Spread)

  • 対象

    • 内側(Inset)

    • 外側(Outset))


色を設定する

色の設定にはカラーパレットを使用します。

RGBA・HEXコード指定やカラーピッカーなど様々な方法で色の設定ができます。

使用方法などの詳細は、カラーパレットで色を設定するを参照してください。


位置を設定する

  • Xで左右方向の位置を調整します。値を正にすると右方向、負にすると左方向に影が移動します。​

  • Yで上下方向の位置を調整します。値を正にすると下方向、負にすると上方向に影が移動します。


ぼかしを設定する

  • ぼかし(Blur)の値を大きくすると影の輪郭がなめらかになり、柔らかい印象になります。​

  • 値を小さくすると影の輪郭がはっきりした印象になります。


広がりを設定する

  • 広がり(Spread)は影の大きさを調整します。​

  • 値を大きくすると影がボックスより広く表示され、小さくするとボックスに近い範囲に収まります。


対象を設定する

  • 内側(Inset)を選択すると、ボックスの内側に影(インナーシャドウ)がかかります。​

  • 外側(Outset)を選択すると、ボックスの外側に影(ドロップシャドウ)がかかります。

こちらの回答で解決しましたか?