段落を設定する(背景に影をつける)

段落を設定する(背景に影をつける)の表示例

記述は以下のようになります。
box-shadow: 5px 5px 7px 3px #666;

なお、Fx3.6に対応させる場合は「-moz-box-shadow」Safari5に対応させるには「-webkit-box-shadow」と言うプロパティを使います。以下のように記述します。

-moz-box-shadow: 5px 5px 7px 3px #666;
-webkit-box-shadow: 5px 5px 7px 3px #666;
box-shadow: 5px 5px 7px 3px #666;

値の数と適用範囲

段落を設定する(背景に影をつける)値の記述内容の順序は以下の通り。

1つ目の数字
X軸方向へのすれを指定します。正の値は右方向へのずれ、負の値は左方向へのずれを表します。
2つ目の数字
Y軸方向のずれを指定します。正の値は下方向のずれ、負の値は上方向のずれを表します。
3つ目の数字
影をぼかす範囲を指定します。
4つ目の数字
影を広げる距離を指定します。
色の指定
カラーコードで影の色を指定します。
inset
この値を指定すると影が内側に表示されます。

HTML/XHTML

<body> ~ </body>内に以下を記述します。

<p class="back-shadow1">天の原ふりさけ見れば春日なる 三笠の山に出でし月かも</p>
<p class="back-shadow2">わが庵は都の辰巳しかぞ住む 世をうぢ山と人はいふなり</p>
<p class="back-shadow3">花の色は移りにけりないたづらに わが身世にふるながめせしまに</p>
<p class="back-shadow4">これやこの行くも帰るも別れては 知るも知らぬもあふ坂の関</p>
<p class="back-shadow5">わたの原八十島かけて漕ぎ出でぬと 人には告げよ海人の釣船</p>
<p class="back-shadow6">天つ風雲の通ひ路吹きとぢよ 乙女の姿しばしとどめむ</p>

CSS記述例

<head> ~ </head>内に以下を記述します。

<style type="text/css">
<!--
p {
padding: 20px;
margin: 40px;
background: #DDD;
}
p.back-shadow1 { box-shadow: 5px 5px 7px 3px #666; }
p.back-shadow2 { box-shadow: 20px 10px 7px 10px #666; }
p.back-shadow3 { box-shadow: 5px 5px 7px 3px #666 inset; }
p.back-shadow4 { box-shadow: 20px 10px 7px 10px #666 inset; }
p.back-shadow5 { box-shadow: 5px 5px 7px 3px #C00 , 5px 5px 7px 3px #666 inset; }
p.back-shadow6
{ -moz-box-shadow: 5px 5px 7px 3px #666;
-webkit-box-shadow: 5px 5px 7px 3px #666;
box-shadow: 5px 5px 7px 3px #666;
}
-->
</style>

段落を設定する(背景に影をつける)の表示例

はてなブックマーク数 このエントリーをはてなブックマークに追加 Yahoo!ブックマークに登録