モックン☆彡の部屋

モックン☆彡の部屋

文字に影を付けてみる？

文字に影を付けてみる？


このタグは
Internet Explorer
 のみサポートされており、

Netscape
などでは正しく表示されない場合があります。

タイトルは文字に影を･･･と書きましたが、影だけでなく色々な装飾を紹介します。

では、早速説明に入りましょう。

文字に影をつけるには、『 style="filter: dropshadow （）;" 』を使います。

使い方としては、少し長くなりますが

< DIV style="color: red ;font-size:16px;width:200px;height:30px;filter: dropshadow (color= blue )" > モックン☆彡の部屋 </ DIV >

と書くと下のように表示されます。

モックン☆彡の部屋

ここで使用している数字の単位はピクセルです。 （サイズについては こちら を参考にして下さい）

本来は < DIV ></ DIV > タグだけでなく、 < SPAN ></ SPAN > タグなどで使いますが、

楽天では < SPAN > タグに影の要素は使えないので使える形で紹介します。

< DIV > タグと < SPAN > タグの違いですが、 < DIV > タグだと強制的に改行されます。

つまり、文章途中にある文字へ影をつけると、そこで改行されてしまいます。

どうしても文章の途中に影文字を使いたい場合は、テーブルタグで区切りましょう。

「文字１」と「文字２」の途中に影文字を入れる場合は、こんな感じになります。

< TABLE cellpadding=0 cellspacing=0 >< TR >< TD > 文字１ </ TD >< TD > DIVを使ったタグ </ TD >< TD > 文字２ </ TD ></ TR ></ TABLE >


『 style="filter: dropshadow （）;" 』の『 （） 』には複数の物が入れられます。

通常は半角のカンマ「 , 」で書きますが、楽天では全角に変換されてしまうため、

楽天流
の表記と、 正しい 表記を下に書きます。


では、それぞれの役割について説明して行きます。 まず、『 color 』ですが、２つ使っています。

表示結果を見てもらえれば分かると思いますが、

１つめの『 color 』は
表
 の文字色、

２つめの『 color 』は
影
 の文字色になります。


『 文字に色をつける（高） 』にも書きましたが、色の指定方法は 16進数 でも書けます。

続いて『 font-size:16px; 』は文字の大きさを表し、数字が大きいほど大きくなります。

『 width:200px; 』は
横幅
 の大きさを表し、小さすぎると文字が改行してしまいます。

左右に文字を書かない場合は『 width: 100% ; 』と書く事をオススメします。

『 height:30px; 』は
縦幅
 の大きさを表し、小さすぎると同じく文字が切れてしまいます。

例えば、『 width:100px; 』や『 height:10px; 』とするとこんな感じです。

モックン☆彡の部屋
モックン☆彡の部屋


文字が改行されたり、影が切れているのが分かるでしょ！？


『 filter:dropshadow（）; 』は影の付き方を表していて、

現在は『 filter:dropshadow（color=blue）; 』となっていますが、『 （） 』の中には他に

影の横座標を表す『 offx=数字 』、影の縦座標を表す『 offy=数字 』、

文字をくり抜き表現する『 positive=0 』などがあります。


『 filter:dropshadow（）; 』以外にも文字を装飾するものがあるので、下にいくつか例をあげます。

楽天流の表記はブラウザによって正しく表示されない場合があります。

また、正しい書き方の「,」（カンマ）は、実際には半角で書かれています。

Dropshadow
影をつけることが出来ます。
要素
説明
OffX
横方向へ影を伸ばす位置を指定します。単位はpxとなり、デフォルト値は5です。
OffY
縦方向へ影を伸ばす位置を指定します。単位はpxとなり、デフォルト値は5です。
Color
影の色を指定します。
Positive
影の透過の有無を指定します。「positive=1」で影を隠す、「positive=0」で上から描画となります。デフォルトは「positive=1」になります。

例１．
< DIV style="color:red;font-size:18px;width:160px;height:30px;filter: dropshadow(positive=0) " > モックン☆彡の部屋 </ DIV >

結果１．
モックン☆彡の部屋

例２．（楽天流）
< DIV style="color:blue;font-size:18px;width:170px;height:30px;filter: dropshadow(offx=20 offy=10 color=red positive=0) " > モックン☆彡の部屋 </ DIV >
例２．（正しい書き方）
< DIV style="color:blue;font-size:18px;width:170px;height:30px;filter: dropshadow(offx=20,offy=10,color=red,positive=0) " > モックン☆彡の部屋 </ DIV >

結果２．
モックン☆彡の部屋

Shadow
影をつけることが出来ます。
要素
説明
Color
指定した色を影の色にします。
Direction
陰影をつける方向を指定します。0～360で調節し、デフォルトは270です。

例１．
< FONT style="color:yellow;font-size:18px;width:160px;height:30px;filter: shadow(color=blue) " > モックン☆彡の部屋 </ FONT >

結果１．
モックン☆彡の部屋

例２．（楽天流）
< DIV style="color:yellow;font-size:18px;width:170px;height:30px;filter: shadow(color=blue direction=135) " > モックン☆彡の部屋 </ DIV >
例２．（正しい書き方）
< DIV style="color:yellow;font-size:18px;width:170px;height:30px;filter: shadow(color=blue,direction=135) " > モックン☆彡の部屋 </ DIV >

結果２．
モックン☆彡の部屋


Blur
文字を立体的な影付き文字にします。画像の場合はぶれさせたようにします。
要素
説明
Add
元の要素を重ねるかを指定します。「add=0」なら重ねず、「add=1」なら重ねます。デフォルトは「add=0」です。
Direction
ぶれの方向を指定します。時計方向に角度を変更でき、0～360の間で指定します。
Strength
ぶれの距離を設定します。単位はピクセルで、デフォルトは5です。

例１．
< DIV style="color:blue;font-size:18px;width:100%;height:20px;filter: blur(add=0) " > モックン☆彡の部屋 </ DIV >

結果１．
モックン☆彡の部屋

例２．（楽天流）
< DIV style="color:blue;font-size:18px;width:100%;height:20px;filter: blur(strength=10 direction=135 color=red positive=0) " > モックン☆彡の部屋 </ DIV >
例２．（正しい書き方）
< DIV style="color:blue;font-size:18px;width:100%;height:20px;filter: blur(strength=10,direction=135) " > モックン☆彡の部屋 </ DIV >

結果２．
モックン☆彡の部屋


Wave
波状にします。
要素
説明
Add
元の要素を重ねるかを指定します。「add=0」なら重ねず、「add=1」なら重ねます。デフォルトは「add=0」です。
Fleq
波の数を指定します。デフォルトは3です。
LightStrength
波に当たる光の強さを指定します。0～100の範囲で調節でき、デフォルトは100です。
Phase
波の開始場所を指定します。0～100で調節し、デフォルトは0です。
Strength
波のゆれ具合を指定します。1～指定でき、デフォルトは5です。

例１．
< DIV style="color:blue;font-size:18px;width:100%;height:20px;filter: wave(add=1) " > モックン☆彡の部屋 </ DIV >

結果１．（文字をドラッグするとわかります）
モックン☆彡の部屋

例２．（楽天流）
< DIV style="color:blue;font-size:18px;width:100%;height:20px;filter: wave(add=0 fleq=3 lightstrength=50 phase=0 strength=5) " > モックン☆彡の部屋 </ DIV >
例２．（正しい書き方）
< DIV style="color:blue;font-size:18px;width:100%;height:20px;filter: wave(add=0,fleq=3,lightstrength=50,phase=0,strength=5) " > モックン☆彡の部屋 </ DIV >

結果２．
モックン☆彡の部屋

「add=1」にすると下のようになります。
モックン☆彡の部屋

例３．（楽天流）
< DIV style="font-weight:bold;background-color:pink;color:blue;font-size:18px;width:160px;height:20px;filter: wave(add=0 fleq=3 lightstrength=20 phase=0 strength=2) " > モックン☆彡の部屋 </ DIV >
例３．（正しい書き方）
< DIV style="font-weight:bold;background-color:pink;color:blue;font-size:18px;width:100%;height:20px;filter: wave(add=0,fleq=3,lightstrength=20,phase=0,strength=2) " > モックン☆彡の部屋 </ DIV >

結果３．
モックン☆彡の部屋

「strength=0」にすると背景だけ変わってお洒落かもしれません。
モックン☆彡の部屋


Glow
輝いているような表示をします。
要素
説明
Color
輝く色を指定します。
Strength
輝かせる色の強さを指定します。1～255で調節し、デフォルトは5です。

例１．
< DIV style="color:blue;font-size:18px;width:100%;height:20px;filter: glow(color=yellow) " > モックン☆彡の部屋 </ DIV >

結果１．
モックン☆彡の部屋

例２．（楽天流）
< DIV style="color:blue;font-size:18px;width:100%;height:30px;filter: glow(color=yellow strength=10) " > モックン☆彡の部屋 </ DIV >
例２．（正しい書き方）
< DIV style="color:blue;font-size:18px;width:100%;height:30px;filter: glow(color=yellow,strength=10) " > モックン☆彡の部屋 </ DIV >

結果２．
モックン☆彡の部屋



この他にも書き方は色々ありますので、興味のある人は調べて下さい。

あまり良く分からない人は上に書いてあるタグの文字だけを変えて書くと良いでしょう。

また、少し似たような事を『 画像の加工 』でも使っているので、良かったら見てください。






© Rakuten Group, Inc.
X
Mobilize your Site
スマートフォン版を閲覧 | PC版を閲覧
    Share by: