HTML の ボックス要素 に 影 を 設定する

目的

• HTMLファイルのボックス要素に影を設定する方法をまとめる。

押さえるポイント

• ボックス要素に影を設定するにはbox-shadowプロパティを使用する。
• box-shadowプロパティに水平方向への影のピクセル数、垂直方向への影のピクセル数、影の色を与える。
• 影の色はカラーコードで設定する。

書き方の例

• 下記にCSSファイルの内容を記載する。

ボックス要素の名前かクラス名 {
  box-shadow: 水平方向の影のピクセル数 垂直方向の影のピクセル数 影の色;
}

より具体的な例

• h1要素に垂直方向に10pxの黒い影を設定する。
• HTMLファイルの内容を下記に記載する。

<h1>おはようございます。</h1>

• 下記にCSSファイルの内容を記載する。

h1 {
  box-shadow: 0 10px black;
}

p {
  font-weight: boid;
}