見出しをCSSで装飾する(背景に影をつける)

見出しをCSSで装飾する(背景に影をつける)表示例

見出しの背景色に影をつけるには「box-shadow」というプロパティを使います。ボックスに影をつけるプロパティです。IE8以前やFx3.6、Safari5は非対応です。

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;

見出しをCSSで装飾する(背景に影をつける)値の記述内容の順序は以下の通り。

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

HTML/XHTML

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

<h1 class="back-shadow1">見出しh1に「back-shadow1」の影をつける</h1>
<h1 class="back-shadow2">見出しh1に「back-shadow2」の影をつける</h1>
<h1 class="back-shadow3">見出しh1に「back-shadow3」の影をつける</h1>
<h1 class="back-shadow4">見出しh1に「back-shadow4」の影をつける</h1>
<h1 class="back-shadow5">見出しh1に「back-shadow5」の影をつける</h1>
<h1 class="back-shadow6">Safari5、Fx3.6対応</h1>

CSS記述例

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

<style type="text/css">
<!--
h1 { padding: 10px; margin: 30px; background: #DDD;}
h1.back-shadow1 { box-shadow: 5px 5px 7px 3px #666; }
h1.back-shadow2 { box-shadow: 20px 10px 7px 10px #666; }
h1.back-shadow3 { box-shadow: 5px 5px 7px 3px #666 inset; }
h1.back-shadow4 { box-shadow: 20px 10px 7px 10px #666 inset; }
h1.back-shadow5 { box-shadow: 5px 5px 7px 3px #C00 , 5px 5px 7px 3px #666 inset; }
h1.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>

見出しをCSSで装飾する(背景に影をつける)表示例

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