space
テクニック:影付き文字、影付きボタン
 
space
shadowフィルタを使用し、「影付き文字」や「影付きボタン」を手軽に作成する方法を紹介します。 「影付き文字」を作成する場合は、その文字をDVDタグで挟み、DIVタグに対してshadowフィルタを適用します。これで「DIV」〜「/DIV」の文字に対して影を付けることができます。このとき、影を付けるための余白(padding)を指定するのを忘れないでください。また、widthでDIVタグの横幅を指定しておく必要もあります。これを忘れると正しく影が表示されません。注意してください。

影のある文字
TABLEタグに対してshadowフィルタを適用すると、サンプルに示したような「切り抜きボタン」を手軽に作成できます。この場合、影を表示するための余白は、TABLEタグのcellpadding属性でも指定できます。ホームページを飾るワンポイントとして活用してみると面白いでしょう。

自己紹介 写真集 日記 リンク

影付きのボタンを作成する場合は、TABLEタグを「DIV」〜「/DIV」で挟み、DIVタグに対してshadowフィルタを適用します。この場合も、widthでDIVタグの横幅を指定するのを忘れないようにしてください。TABLEタグでは、border属性、cellpadding属性、cellspacing属性でボタンの間隔や罫線を指定します。さらに、スタイルシートのmarginで影を表示するための余白を設けておきます。あとは、各TDタグにbgcolor属性で背景色を指定すると、サンプルのような「影付きボタン」を作成できます。
ボタンA ボタンA
return