スタイルシートの技
文字列に影をつける(Internet Expolorer 4.0~)
さて、文字列の影を付けたりできたらよりバリエーションの富んだウェブサイトを作れるようになります。 Internet Explorer 4.0以降ではfilterというスタイルシートが存在します。 このfilterを使えば文字列や画像に対してさまざまな効果を付ける事ができます。
しかし、メインで使ってしまうとOperaなどのブラウザでは表現されませんので注意してください。 例えば、半透明化した画像の後ろに文字列を乗せる場合には、Internet Explorerでは綺麗に表示されますが、 Operaではまったく表示されなくなってしまう恐れがあります。 更にfilter属性はCPUパワーに負荷をかけてしまうので乱用するとノートＰＣや古いＰＣなどでは処理が遅くなってしまいます。 コンテンツすべての文字を影付きにする…などと言った事は避けましょう。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>filter属性の練習</title>
<style type="text/css">
*.shadow
{
width: 100%;
filter: dropshadow( color=#cccccc, offx=1, offy=1, positive=1 );
}
</style>
</head>
<body>
<h1>filter属性の練習</h1>
<p class="shadow">This is the sample.</p>
</body>
</html>
filter属性の練習
This is the sample.
Internet Explorerで見ていますか？それならば、影付き文字で表示されているはずです。 ここで、スタイルシートの指定で「width: 100%;」を必ず忘れないようにしましょう。 これを忘れると適応されません。
- color
- 影の色を指定します。
- offx
- 影の位置（X方向）をピクセル数で指定します。
- offy
- 影の位置（Y方向）をピクセル数で指定します。
- positive
- 影の透過の有無を示し、「1」または「true」で影を隠し、「0」または「false」で影を隠さずに上から描写します。
ではそれぞれの値を変えてみて、影の見え方をテストしてみましょう。
- offx=1, offy=1, positive=1
- This is the sample.
- offx=1, offy=2, positive=1
- This is the sample.
- offx=2, offy=1, positive=1
- This is the sample.
- offx=2, offy=2, positive=1
- This is the sample.
できましたか？これは文字列に対してのみフィルタをかける事ができます。 画像に対してのフィルタはできませんので注意してください。