目的
- HTMLファイルのテキストに影を設定する方法をまとめる。
押さえるポイント
- テキストを縁取るように影を設定するにはtext-shadowプロパティを使用する。
- box-shadowプロパティに水平方向への影の大きさ、垂直方向への影の大きさ、影の色を与える。
- 影の大きさはピクセル数かremまたはemで設定する
- 水平方向の影の大きさの設定をする際、正の値を設定すると右に、負の値を設定すると左に影を作ることができる。
- 垂直方向の影の大きさの設定をする際、正の値を設定すると下に、負の値を指定すると上に影を作ることができる。
- 影の色はカラーコードか色の名前で設定する。
書き方の例
- 下記にCSSファイルの内容を記載する。
ボックス要素の名前かクラス名 {
text-shadow: 水平方向の影のピクセル数かremまたはem 垂直方向の影のピクセル数かremまたはem 影の色;
}
より具体的な例
- h1要素の文字に水平方向2px、垂直方向に10pxの黒い影を設定する。
- HTMLファイルの内容を下記に記載する。
<h1>おはようございます。</h1>
- 下記にCSSファイルの内容を記載する。
h1 {
box-shadow: 2px 10px black;
}