Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 riference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial

 徐々に大きく表示されるタイトル文字を作成する

IE5.0以降のみ(Macintosh版IE5.0では正しく表示されない場合があります)

JAVA Scriptを使って、文字のフォントサイズを増減させると、文字が拡大・縮小していくように表現させることができます。ここでは、フォントサイズを一定間隔で大きくし、タイトル文字を徐々に拡大して表示させる方法を考えてみましょう。

■ フォントサイズを拡大させる定義

フォントサイズを拡大させていくには、最初に表示するフォントサイズを設定し、徐々にサイズ(ポイント)を増加させるようにJAVA Scriptで定義します。

<SCRIPT Language="JavaScript">
<!--
a = 2;
function bigword(){
if(a < 60){
document.all.bigger.style.fontSize= a;
a+=2;
setTimeout("bigword()",100);
}
}
//-->
</SCRIPT>

■ 文字サイズを変更するタイミングの設定

上で設定した関数(不透明度を上げる)をいつ実行するかを設定します。

<BODY onLoad="bigword()">

上例では、ホームページを読み込んだタイミングで実行するように設定しています。

■ サイズを変更する文字列の設定

表示する文字内容にIDとして名前をつけ、文字の設定をします。

<DIV ID="bigger" STYLE="font-weight:bold;text-align:center;">
<p><font color="#CC3333">Welcome to Shirley's Pettit Case</font></p>
</DIV>
例では、文字内容に"bigger"という名前を付け、太字、文字色は赤(#CC3333)、表示位置は画面中央に設定しています。
最終的なフォントサイズ(60ポイント)に到達するまで、一定の間隔でフォントサイズを2ポイントずつ足していく容量で、文字列を徐々に拡大表示させています。
このとき、文字数によってはフォントサイズを拡大すると、1行では収まらずに改行されてしまう場合があります。最終的に拡大するサイズによって、事前に表示位置を確認してから決定するのが良いでしょう。なお、画面解像度が1024×768ピクセルの場合には、60ポイントの文字列は約17文字表示できます。

<<<戻る

R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box