MAJIDEKA.COM－文字(IEのみ)

● ２時限目 ●



[文字] or [★ HTML講座 ★] or [文章]

[文字(IEのみ)]

　文字が光っているようにするには

　文字に影をつけるには

　文字を浮かび上がったようにさせるには

　文字を滲ませるには

　文字を重ねるには

　文字をフェードイン・フェードアウトさせるにするには

　文字を半透明にするには

　文字の透明部分を指定色で塗りつぶすには

　文字を揺れているようにするには

　文字が水面に映って揺れているようにするには

文字が光っているようにするには

・<font>タグにstyle属性のfilter: glow()を指定する方法。
　　　　　　　　　　　　　　　　　　　　(<font style="filter: glow(color=xxx, strength=n)>～</font>)

　文字が光っているようにするには、<font>タグにstyle属性のfilter: glow()を指定します。
　glow()の()内のcolorには光の色を、strengthには光の強さを指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<font style="filter: glow(color=#ff0000, strength=5); font-size: 24pt; font-weight: bold; color: #ffffff; width: 300;">MAJIDEKA</font>
　ブラウザにはこのように表示されます。

文字に影をつけるには

・<font>タグにstyle属性のfilter: shadow()を指定する方法。
　　　　　　　　　　　　　　　　　 (<font style="filter: shadow(color=xxx, direction=n)>～</font>)

　文字が光っているようにするには、<font>タグにstyle属性のfilter: shadow()を指定します。
　shadow()の()内のcolorには影の色を、directionには影の角度を指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<font style="filter: shadow(color=#c0c0c0, direction=135); font-size: 24pt; font-weight: bold; color: #008000; width: 300;">MAJIDEKA</font>
　ブラウザにはこのように表示されます。

文字を浮かび上がったようにさせるには

・<font>タグにstyle属性のfilter: dropshadow()を指定する方法。
　　　　　　　　　　　　　　 (<font style="filter: dropshadow(color=xxx, direction=n)>～</font>)

　文字が光っているようにするには、<font>タグにstyle属性のfilter: dropshadow()を指定します。
　shadow()の()内のcolorには影の色を指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<font style="filter: shadow(color=#c0c0c0); font-size: 24pt; font-weight: bold; color: #0000ff; width: 300;">MAJIDEKA</font>
　ブラウザにはこのように表示されます。

文字を滲ませるには

・<font>タグにstyle属性のfilter: blur()を指定する方法。
　　　　　　　　　　　　　　　　　　 (<font style="filter: blur(strength=n, direction=n)>～</font>)

　文字を滲ませるには、<font>タグにstyle属性のfilter: blur()を指定します。
　blur()の()内のstrengthには滲ませる強さを、directionは角度を指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<font style="filter: blur(strength=5, direction=45); font-size: 24pt; font-weight: bold; color: #800080; width: 300;">MAJIDEKA</font>
　ブラウザにはこのように表示されます。

▲ページトップへ

文字を重ねるには

・<font>タグにstyle属性のposition: relativeを指定する方法。
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 (<font style="filter: relative>～</font>)

　文字を重ねるには、<font>タグにstyle属性のfilter: absoluteを指定します。
　topで文字列の上部の空間を、leftで文字の左部の空間を指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<font style="font-size: 24pt; font-weight: bold; color: #0000ff; width: 300;">MAJIDEKA</font> <font style="position: absolute; top: 30; left: 30; font-size: 24pt; font-weight: bold; color: #ffff00; width: 300;">MAJIDEKA</font> <font style="position: absolute; top: 45; left: 45; font-size: 24pt; font-weight: bold; color: #ff0000; width: 300;">MAJIDEKA</font>
　ブラウザにはこのように表示されます。

文字をフェードイン・フェードアウトさせるには

・<font>タグにstyle属性のfilter: alpha()を指定する方法。
　　　 (<font style="filter: alpha(opacity=n, finishopacity=n,
　　　　　　　　　　　　　　　　　　　　style=n, startx=n, starty=n, finishx=n, finishy=n)>～</font>)

　文字をフェードイン・フェードアウトさせるには、<font>タグにstyle属性のfilter: alpha()を指定します。
　alpha()の()内のopacityには透明度(1(透明)～100(不透明))を、finishopacityには透明度を指定します。
　styleはグラデーションのスタイルを、startx、starty、finishx、finishyはグラデーションをかける領域を指定します。
　また、styleはstartx、starty、finishx、finishyで指定した領域に対して、1は線形の、2は円形の、3は長方形のグラデーションをかけます。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<font style="filter: alpha(opacity=50, finishopacity=10, 　　　　　　　　　　　　　　 style=2, startx=0, starty=0, finishx=90, finishy=90); font-size: 24pt; font-weight: bold; color: #000000; width: 300;">MAJIDEKA</font>
　ブラウザにはこのように表示されます。

文字を半透明にするには

・<font>タグにstyle属性のfilter: alpha()を指定する方法。
　　　　　　　　　　　　　　　　 (<font style="filter: alpha(opacity=n, finishopacity=n)>～</font>)

　文字を半透明にするには、<font>タグにstyle属性のfilter: alpha()を指定します。
　alpha()の()内のopacityは透明度(1(透明)～100(不透明))を、finishopacityは透明度を指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<font style="filter: alpha(opacity=20, finishopacity=0); font-size: 24pt; font-weight: bold; color: #800000; width: 300;">MAJIDEKA</font>
　ブラウザにはこのように表示されます。

文字の透明部分を指定色で塗りつぶすには

・<font>タグにstyle属性のfilter: mask()を指定する方法。
　　　　　　　　　　　　　　　　　　　　　　　　　　　(<font style="filter: mask(color=xxx)>～</font>)

　文字を半透明にするには、<font>タグにstyle属性のfilter: mask()を指定します。
　mask()の()内のcolorは透明部分を塗りつぶす色を指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<font style="filter: mask(color=#00ffff); 　　　　　　　font-size: 24pt; font-weight: bold; width: 150;">MAJIDEKA</font>
　ブラウザにはこのように表示されます。

▲ページトップへ

文字を揺れているようにするには

・スタイルシートのfilter: wave()とfilter: alpha()を指定し、JavaScriptを使用する方法。

文字を揺れているようにするには、スタイルシートのfilter: wave()とfilter: alpha()を指定します。
　waveで文字が揺れるようにする指定をします。
　wave()の()内のfreqは揺れる速さを、lightstrengthは揺れている文字の明るさを、
　strengthは揺れの大きさを指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<html> <head> <title>揺れる文字</title> <style type="text/css">  </style> </head> <body> <div id="wasser" class="title">MAJIDEKA</div> <script type="text/javascript">  </script> </body> </html>
　ブラウザにはこのように表示されます。

文字が水面に映って揺れているようにするには

・スタイルシートのfilter: flipVwave()とfilter: alpha()を指定し、JavaScriptを使用する方法。

文字を揺れているようにするには、スタイルシートのfilter: wave()とfilter: alpha()を指定します。
　flipV wave()内のfreqは揺れる速さを、lightstrengthは揺れている文字の明るさを、
　strengthは揺れの大きさを指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<html> <head> <title>水面に映って揺れているように見える文字</title> <style type="text/css">  </style> </head> <body> <div class="title">MAJIDEKA</div> <div id="wasser" class="title">MAJIDEKA</div> <script type="text/javascript">  </script> </body> </html>
　ブラウザにはこのように表示されます。

▲ページトップへ

Copyright (c) 2006～ MAJIDEKA.COM. All Rights Reserved.