6.1 プロパティ box-shadow
CSSのプロパティ box-shadow は要素に影を追加するために使われるよ。このプロパティを使うと、ウェブページの見た目を改善する多様な視覚的効果が作れるんだ。box-shadowの構文、値、および使用例について詳しく見ていこう。
box-shadowの構文
プロパティ box-shadow は一つまたは複数の値を受け取って、各値が影のパラメータを設定するんだ。基本的な構文は次の通り:
element {
box-shadow: offset-x offset-y blur-radius spread-radius color;
}
値の説明:
offset-x: 影の水平オフセット。プラスの値は影を右に移動させ、マイナスの値は左に移動させるよ。offset-y: 影の垂直オフセット。プラスの値は影を下に移動させ、マイナスの値は上に移動させる。blur-radius: 影のボカシ半径。値が大きいほど、影がぼやけるんだ。デフォルト値は0（ボカシなしの影）。spread-radius: 影の広がり半径。プラスの値は影のサイズを大きくし、マイナスの値は小さくする。デフォルト値は0。color: 影の色。CSSのすべての色フォーマットがサポートされているよ。
6.2 使用例
基本的な影:
CSS
.shadow-basic {
width: 200px;
height: 200px;
background-color: #3498db;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
margin: 20px;
}
HTML
<body>
<div class="shadow-basic">基本的な影</div>
</body>
ボカシのある影:
CSS
.shadow-blur {
width: 200px;
height: 200px;
background-color: #2ecc71;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
margin: 20px;
}
HTML
<body>
<div class="shadow-blur">ボカシのある影</div>
</body>
広がった影:
CSS
.shadow-spread {
width: 200px;
height: 200px;
background-color: #e74c3c;
box-shadow: 10px 10px 20px 10px rgba(0, 0, 0, 0.5);
margin: 20px;
}
HTML
<body>
<div class="shadow-spread">広がった影</div>
</body>
内側の影:
CSS
.shadow-inset {
width: 200px;
height: 200px;
background-color: #f1c40f;
box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5);
margin: 20px;
}
HTML
<body>
<div class="shadow-inset">内側の影</div>
</body>
6.3 box-shadowの設定
box-shadow の設定の詳細:
影のオフセット (offset-x と offset-y)
- プラスの値: 影が右 (
offset-x) と下 (offset-y) に移動するんだ。 - マイナスの値: 影が左 (
offset-x) と上 (offset-y) に移動する。
影のボカシ (blur-radius)
- 値が0: 影がハッキリしていて、ボカシがないよ。
- プラスの値: 値が大きいほど、よりぼやけた影になるんだ。
影の広がり (spread-radius)
- プラスの値: 影が大きくなるよ。
- マイナスの値: 影が小さくなる。
影の色 (color)
色はいろいろなフォーマットで指定できるよ: 色名、16進コード、RGB、RGBA、HSL、HSLA。
内側の影 (inset)
キーワード inset は要素の内側に影を作るんだ。くぼんだ効果を作るために使えるよ。
異なるパラメータの影を複数:
CSS
.multiple-shadows {
width: 200px;
height: 200px;
background-color: #bdc3c7;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 15px rgba(0, 0, 0, 0.3);
margin: 20px;
}
HTML
<body>
<div class="multiple-shadows">異なるパラメータの影を複数</div>
</body>
GO TO FULL VERSION