Box Shadow ジェネレーター

各CSSプロパティの説明

box-shadow

box-shadowプロパティは要素に影を設定することができます。

各値（value）は、次のように指定することができます
box-shadow: 影を内側に付ける（inset）水平方向のずらし量垂直方向のずらし量影のぼかし量影の大きさ影の色

• 水平方向のずらし量垂直方向のずらし量の値はマイナスの値を指定すると、それぞれ垂直方向の上と、水平方向の左に配置されます。
• 影の大きさはプラスの値を指定すると大きくなっていきますが、マイナスの値を指定すると小さくなっていきます。

記述例） box-shadow: inset 2px 2px 3px 4px #000;

insetの指定が不要な場合は、記述も不要です。

• 値を2つだけ指定した場合は、水平方向のずらし量垂直方向のずらし量として設定されます。
• 値を3つだけ指定した場合は、さらに3つ目の値が影のぼかし量として設定されます。
• また値を4つだけ指定した場合は、さらに4つ目の値が影の大きさとして設定されます。

水平方向のずらし量垂直方向のずらし量影のぼかし量影の大きさについてはそれぞれ初期値が０です。
影の色は初期値がcurrentColor（colorに設定されている値）となります。

border-radius が指定された場合は、影もその丸みを反映します。

影は複数指定することができます。
複数指定したい際は、カンマ「，」で区切って指定します。最初に指定された影が最も手前に来ます。
記述例） box-shadow: inset 2px 2px 3px 4px rgba(0, 0, 0, .5), 0px 0px 3px #ff0;

テキストに影をつける場合は、text-shadowを使用します。

before / after

beforeとafterは、要素の子要素として擬似要素を作成します。
beforeは要素の最初の子要素、afterは要素の最後の子要素として作成されます。
また、contentプロパティが必須です。
beforeを記述する場合、その前に「：」（コロン）を記述しますが、これは1つでも2つでも動作します。
しかし、疑似クラスと区別する為、2つで記述されることが多いです。
記述例）
.test::before {
content: "";
}

contentプロパティには、文字列の他・引用符・カウンタ・画像などを挿入することも可能です。
インライン要素として生成される為、widthなどのサイズ指定をする際はブロック要素などに変換する必要があります。

スクリーンリーダーからは疑似要素にアクセスできなくなる可能性がある為、ユーザーにとって必要な情報については、疑似要素を使うべきかどうかを検討する必要があります。

beforeとafterについて、さらに詳しく知りたい方はこちらの解説動画を参照してください。

position

positionプロパティは要素がどのように配置されるかを設定します。
static（初期値）以外の値が指定されている場合に top, right, bottom, leftの各プロパティが、配置された要素の位置を決めます。
また、static以外の値が指定されているように関しては、z-index（重なり順）を指定することができます。z-indexの初期値はautoです。数値を指定することができ、数値が大きいほど要素は上のレイヤー（手前のレイヤー）として表示されます。

positionプロパティは次の値を設定することができます。

• relative：指定してもその要素自体の位置は変わりませんが、static（初期値）と違い、topなどの指定がされていた場合にその影響を受けます。
• absolute：祖先要素にstatic以外の指定がされていた場合、指定されている一番近い祖先要素を基準に配置します。
• fixed：画面を基準に相対的に要素を配置します。
  スクロールしても位置が変わりません。
• sticky：fixedと同じようにスクロールしても位置を固定しますが、親要素の範囲から出ることはできません。

記述例） position: relative;

positionについて、さらに詳しく知りたい方はこちらの解説動画を参照してください。