シャドウはページに深みを与え、Webサイト
特定部分に注意を引くために使用できます。

STUDIOでは、シャドウはトップバーから設定できます。

あらかじめ用意されているシャドウを使う

要素にすぐに適用できる、あらかじめ用意された4つのシャドウがあります。

トップバーのシャドウ設定のドロップダウンにあります。

シャドウをカスタマイズする

シャドウをカスタマイズするには、下図のようにグラフ上の四角をドラッグします。 これによってシャドウの位置とぼかしの値が変化します。

グラフのロックボタンを外すことで、ぼかしの値を変えずにシャドウの位置を操作することができます。

ぼかしの調整だけを行いたい場合は、表示されている外側の線をドラッグします。

あるいは、グラフの下に数値を入力することもできます。

  • XとY軸:この値は、水平軸と垂直軸上のシャドウの始点を表しています
  • Blur:値が大きいほどシャドウがぼけます
  • Spread:シャドウの広がり
  • Color:シャドウの色

Inset(内側)シャドウ

Insetは、ボックスの外側ではなく内側にシャドウが適用されます。

内側シャドウを作成するには、シャドウ設定のドロップダウンの「Inset」にチェックをします。

シャドウを外す

要素に設定されているシャドウを外すには、シャドウ設定のドロップダウンのスラッシュアイコンをクリックします。

シャドウが正しく表示されない場合

シャドウが十分に表示されない、または全く表示されない可能性があります。

シャドウが要素のコンテナボックスを「オーバーフロー」させないために、親ボックスはシャドウを適応させるために十分な大きさが必要である可能性があります。

シャドウが正しく表示されない場合は、親ボックスのサイズを修正する、またはマージンやパディングを追加してみてください。

Did this answer your question?