CSSボックスシャドウ
CSSで要素をデザインするときに、その要素のフレームの周りに影の効果を作成することを決定する場合があります。たとえば、画像の下に影がある画像を作成したい場合があります。
そこで、CSSのbox-shadowプロパティが役立ちます。 box-shadowプロパティを使用すると、要素のフレームの周囲に影の効果を追加できます。このチュートリアルでは、CSSbox-shadowプロパティを使用してWeb要素に影の効果を追加する方法を例を挙げて説明します。
CSSボックスシャドウ
box-shadowプロパティは、要素に影を追加します。 box-shadowプロパティは、ほとんどすべてのHTML要素に適用できます。また、このプロパティは、角が丸い要素でも使用できます。
box-shadowプロパティの構文は次のとおりです。
box-shadow: offset-x offset-y blur-radius spread color;
この構文を分解して、各要素について説明しましょう。
- offset-xは、シャドウの水平オフセットです（必須）。
- offset-yは、シャドウの垂直オフセットです（必須）。
- blur-radiusは、シャドウに追加されるブラー効果です（オプション）。
- Spreadは、ぼかし効果の拡散半径です（オプション）。
- colorは影の色です（オプション、デフォルトでは黒）。
box-shadowプロパティの構文がわかったので、実際のプロパティの例をいくつか見ていきます。以下の例では、スタイルを設定する次のHTML要素を使用します。
<html> <div> <p>This is a box.</p> </div>
HTML要素のスタイルは次のとおりです。
<html>
<div>
<p>This is a box.</p>
</div>
<style>
div {
height: 100px;
width: 200px;
padding: 10px;
background-color: lightblue;
}
デフォルトのボックスは次のように表示されます。 
上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>
参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。
平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。
私たちの箱は幅100px、高さ200pxです。ボックスの内容には10pxのパディングがあります。これは、ボックス内のテキストとボックスの境界線の間に10pxのギャップがあることを意味します。また、箱は水色です。
水平および垂直の影
box-shadowプロパティを使用して作成できる最も基本的なシャドウは、水平シャドウと垂直シャドウです。水平方向と垂直方向の影のあるボックスの例を次に示します。
<html>
<div>
<p>This is a box.</p>
</div>
<style>
div {
height: 100px;
width: 200px;
padding: 10px;
background-color: lightblue;
}
div {
box-shadow: 10px 10px;
}
上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>
このコードでは、offset-x属性とoffset-y属性を指定し、両方を10pxに設定しました。これにより、上記のように、黒で両方の軸に10ピクセルオフセットされたドロップシャドウが作成されます。
シャドウカラー
color属性を使用して、シャドウに色を指定できます。影を明るい灰色にしたいとします。次のコードを使用して、ボックスシャドウの色を変更できます：
<html>
<div>
<p>This is a box.</p>
</div>
<style>
div {
height: 100px;
width: 200px;
padding: 10px;
background-color: lightblue;
}
div {
box-shadow: 10px 10px;
}
div {
box-shadow: 10px 10px lightgray;
}
上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>
これで、ボックスに明るい灰色の影が表示されます。
シャドウブラー効果
ぼかし半径属性は、影にぼかし効果を追加するために使用されます。シャドウに3pxのぼかしを付けて、少しぼやけさせたいとします。このコードを使用して、ボックスのぼかしを定義できます。
<html>
<div>
<p>This is a box.</p>
</div>
<style>
div {
height: 100px;
width: 200px;
padding: 10px;
background-color: lightblue;
}
div {
box-shadow: 10px 10px;
}
div {
box-shadow: 10px 10px 3px lightgray;
}
上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>
このボックスは前の例のボックスと似ていますが、影をよく見ると少しぼやけていることがわかります。
拡散効果
box-shadowプロパティを使用している場合は、シャドウに拡散半径を追加できます。これは、影がすべての方向に広がることができる量を定義します。影を自分の周りに5px広げたいとしましょう。このコードを使用してこれを行うことができます：
<html>
<div>
<p>This is a box.</p>
</div>
<style>
div {
height: 100px;
width: 200px;
padding: 10px;
background-color: lightblue;
}
div {
box-shadow: 10px 10px;
}
div {
box-shadow: 10px 10px 5px 5px lightgray;
}
上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>
この例では、影が少し長くなっています。これは、指定した拡散半径により、シャドウが5px拡張されるためです。
このコードでは、指定した属性は次のように順序付けられています。
- offset-x
- オフセット-y
- ぼかし
- 半径
- 色
複数の影
box-shadowプロパティを使用して、要素に複数の影を追加できます。要素に複数のシャドウを追加する場合は、上記の構文を使用し、コンマを使用してシャドウを区切ることができます。複数のシャドウを作成するための構文は次のとおりです。
box-shadow: shadow1, shadow2;
複数のシャドウを操作する場合、オフセット値はシャドウごとに異なる必要があります。そうしないと、シャドウがオーバーラップし、特定のオフセット値のセットが割り当てられた最初のシャドウのみが表示されます。
ボックスの後ろにライトグレーとピンクの両方の影を付けたいとします。次のコードを使用して、これらのシャドウを作成できます。
<html>
<div>
<p>This is a box.</p>
</div>
<style>
div {
height: 100px;
width: 200px;
padding: 10px;
background-color: lightblue;
}
div {
box-shadow: 10px 10px;
}
div {
box-shadow: 5px 5px lightgray, 5px 5px pink;
} コードは次のようになります：
インセットシャドウ
insetキーワードを使用して、要素内に影を表示できます。ボックス内に明るい灰色の影を表示したいとします。次のコードを使用してこれを実現できます：
<html>
<div>
<p>This is a box.</p>
</div>
<style>
div {
height: 100px;
width: 200px;
padding: 10px;
background-color: lightblue;
}
div {
box-shadow: 10px 10px;
}
div {
box-shadow: 5px 5px lightgray inset;
}
上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>
insetキーワードを使用すると、上記のように影を外側の影から内側の影に変更できます。
ボックスシャドウ属性
CSSbox-shadowプロパティで使用できる属性は多数あります。これらの属性の参照表は次のとおりです。
| 属性 | 説明 |
| オフセット-x | 水平（x）軸上の影のオフセット。 |
| オフセット-y | 垂直（y）軸上の影のオフセット。 |
| ぼかし | 影のぼかし半径。 |
| 色 | 影の色。 |
| スプレッド | 影の広がり半径。 |
| 挿入図 | 影を内側の影に変更します。 |
| 継承 | 親要素からシャドウを継承します。 |
結論
CSS box-shadowプロパティは、HTML要素に影の効果を追加するために使用されます。
このチュートリアルでは、いくつかの例を参照して、box-shadowプロパティを使用してカスタムシャドウを作成する方法について説明しました。これで、プロのWeb開発者のように独自のCSSシャドウの作成を開始する準備が整いました。
-
CSSボックスモデルを理解する
HTMLドキュメントの各要素は、CSSによって長方形のボックスとして扱われます。これはデフォルトのレイアウトスキームであり、要件に応じてカスタマイズできます。要素、そのコンテンツ、およびそれらの周囲の要素の配置は、CSSのボックスモデルに従って行われます。 まず、次の画像に示すようなボックスモデルのレイアウトから始めましょう。 出典：w3.org コンテンツ これには、テキスト、画像、またはその他のメディアコンテンツの形式の実際のデータが含まれます。幅と高さのプロパティは、このボックスの寸法を変更します。 パディング コンテンツの外縁とその境界の間のスペースは、パディ
-
CSSシャドウ効果
text-shadowプロパティとbox-shadowプロパティをそれぞれ使用して、テキストと要素に影を追加します。 以下はCSSのシャドウ効果のコードです- 例 <!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } h2 { color: rgb(28, 0, 128); text-s