Computer Programing

2004-08


スタイルシートで文字列の色を変えてみる

 今回は JavaScript で文字列を飾ってみます.その手始めにまずスタイルシートを用いて文字列の色を変えてみます.スタイルシートとは web ページ内の構成要素を飾る,現在推奨されている方法です.次の HTML コードは文字列の修飾を行っていません.

<HTML>
<BODY>
<P>
わたしのホームページ
</P>
<HR>
<P>
ここは私のホームページです.よろしく.
</P>
</BODY>
</HTML>

このタイトルの部分を赤色にしてフォントサイズをちょっと大きめにするには,

<SPAN STYLE="color:red; font-size:20px;">わたしのホームページ</SPAN>

と,SPAN タグで文字列を囲み,STYLE オプションで様々な指定を行います.このように指定すると JavaScript から,文字の色と大きさを制御できるようになります.ちなみに font-size:20px は文字の大きさを 20 ピクセル(ピクセルは画面上の最小点)にするという意味です.


JavaScript で文字の色を変更してみる

 次の HTML ファイルは単に黒色で標準の大きさで文字列が表示されます.スタイルシートでパラメータを省略すると標準のパラメータが設定されるからです.

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
function main()
{
}
-->
</SCRIPT>
</HEAD>
<BODY onLoad="main()">
<P>
<SPAN STYLE="color; font-size;">わたしのホームページ</SPAN>
</P>
<HR>
<P>
ここは私のホームページです.よろしく.
</P>
</BODY>
</HTML>

このタイトルの部分の色を JavaScript で赤に変えるには,次のようにします.

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
function main()
{
  document.all.item( "title" ).style.color = "red";
}
-->
</SCRIPT>
</HEAD>

<BODY onLoad="main()">
<P>
<SPAN ID="title" STYLE="color; font-size;">わたしのホームページ</SPAN>
</P>
<HR>
<P>
ここは私のホームページです.よろしく.
</P>
</BODY>
</HTML>

まず,修飾しようとしている文字列を挟んでいる SPAN タグに

<SPAN ID="title" STYLE="color; font-size;">わたしのホームページ</SPAN>

と,ID オプションが追加されています.これによって,この文字列に title という名前をつけています. JavaScript でこの文字列の色を変えようとするときに,「この文字列」を指すために利用します.

 そして,関数 main の中のコード

document.all.item( "title" ).style.color = "red";

で,title と名づけた文字列の色を緑に変更しています.document.all.item( "title" ) の部分で title という名前のオブジェクト(文字列)を指定しています.そして続く style.color の部分で,そのオブジェクトのスタイルのうち色を指定しています.そして,その色スタイルに red を代入しています.また,次のように書くこともできます.

document.all.title.style.color = "red";

 同様に文字列の表示サイズを 50px に変えたいのであれば,

document.all.item( "title" ).style.fontSize = "50px";
または
document.all.title.style.fontsize = "50px";

というコードを実行します.


動的に大きさを変えてみる

 これだけではつまらないので,JavaScript の機能を使って動的に文字のサイズを変えて見ましょう.具体的にはフォントサイズを 0px から 50px まで変化させて,文字が浮かんで出てくるようにしてみましょう.

 document.all.item( "title" ).style.fontSize に代入するものを 0px から 50px まで変化させればよいのですから,for 文を使えば簡単ですね.次にそのコードを示します.

var i;
for( i = 0 ; i <= 50 ; i++ )
{
  document.all.item( "title" ).style.fontSize = i + 'px';
}

なお,最初の表示を 0px にしておいたほうがよいので,タイトルの部分を

<SPAN ID="title" STYLE="color; font-size:0px;">わたしのホームページ</SPAN>

としておきます.


タイマーの利用

 先ほどのコードでは,あまりにも早く色を変化させすぎたため,その変化がわからなかったと思います.そこで,一定間隔,ここでは 50ミリ秒ごとに変化させるようにしてみます.このために,setInterval関数を利用します.これは,たとえば,

var timerID;
timerID = setInterval( "change()", 50 );

というコードが実行されると,以後 50ミリ秒ごとに関数 change が呼び出されます.なお,この呼び出しを止めたい場合は次のコードを実行します.

clearInterval( timerID );

 このタイマ関数を使って,関数 change が呼ばれるごとに色を変化させればよいはずです.

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
var size, timerID;

function change()
{
  size++;
  if( size <= 50 ) document.all.item("title").style.fontSize = size+'px';
              else clearInterval( timerID );
}

function main()
{
  size = 0;
  document.all.item("title").style.fontSize = size+'px';
  timerID = setInterval( "change()", 50 );
}
-->
</SCRIPT>
</HEAD>
<BODY onLoad="main()">
<P>
<SPAN ID="title" STYLE="color; font-size:0px;">わたしのホームページ</SPAN>
</P>
<HR>
<P>
ここは私のホームページです.よろしく.
</P>
</BODY>
</HTML>

 最初に呼ばれる関数 main の中で変数 size を 0 に初期化し,50ミリ秒ごとに関数change を呼び出すようにタイマーを始動させます.50ミリ秒ごとに呼ばれる関数 change の中では変数 size の値を 1 増やし,まだ 50px になっていない場合はフォントサイズを size に変更します.もし 50px になっていたらタイマーを停止させます.

 ここで,変数 size と timerID が関数の外で宣言されています.これは両方の変数が関数 main と関数 change の両方で利用されているからです.このように関数の外で宣言した関数は JavaScript コード全体で利用できます.前回,変数は必ず関数の中で宣言するようにと書きましたが,複数の関数で同じ変数を使いたいときは,このようにするのが一つの方法です.


表示位置を変えてみる

 JavaScript で文字列の表示位置を制御することもできます.JavaScript で表示位置を制御するためには,STYLE オプションに position:absolute; を加えます.

<SPAN ID="title" STYLE="color; font-size; position:absolute;">

そして次のコードを実行すると,X座標が100ピクセルに,Y座標が200ピクセルの位置に表示されます.これらの座標は文字列の左上隅の座標を指定しており,座標系はウィンドウのクライアント領域の左上隅を原点として,右方向をX軸正方向,下方向をY軸正方向としています.

document.all.item("title").style.left = "100px";
document.all.item("title").style.top = "200px";

演習

 タイトルの表示位置を(0,0)から(200,200)に移動するようにしてみよう.


発展課題

 色を動的に変えてみよう!!    例)red -> blue -> black -> red -> ...

  ヒント)配列を使う(if 文でもできるけど...)


超発展課題

 色を動的に変えてみよう!!

  例)白(見えない)-> 徐々に -> 黒

  ヒント)色は color="#RRGGBB"(RR,GG,BB=00〜FF) で指定可能です.