IE5.0以降のみ（Macintosh版IE5.0では表示されない場合があります）
スタイルシートで文字の見える範囲を限定し、文字列を移動させる設定を行うと、映画のエンドロールのように四角い枠内を下から上へスクロールしていく文字列を表示させることができます。ここでは、文章の内容を下から上へ流れるように表示させる方法を考えてみましょう。
文字列をスクロールさせるために、文字列（gyoji2）を移動させる方法（スピードや方向）と移動後の処理をJAVA Scriptで定義します。
<SCRIPT LANGUAGE="JavaScript">
<!--
function roll(){
if(document.all["gyoji2"].style.pixelTop > -480){
document.all["gyoji2"].style.pixelTop -= 1;
setTimeout("roll()",50);
}
if(document.all["gyoji2"].style.pixelTop == -480){
document.all["gyoji2"].style.pixelTop = 150;
}
}
//-->
</SCRIPT>上で設定した関数（文字列を上に移動させる）をいつ実行するかを設定します・
<BODY onLoad="roll()">
例では、ホームページを読み込んだタイミングで実行させるように設定しています。データを見せる範囲を限定する設定（gyoji1）と、移動させる文字列の設定（gyoji2）を定義します。
<DIV ID="gyoji1" STYLE="position:absolute;left:29px;top:254px;width:400px;height:90px;clip: rect(0px 400px 90px 0px)">
<DIV ID="gyoji2" STYLE="position:relative;left:4px;top:158px;width:400px;height:90px;font-size:14pt;color:ffffff;">
<font color="#333333"><BR>
<CENTER>
5月の行事内容
</CENTER>
<BR>
<font size="-1"> 1日（木） 家庭訪問（下校1：30）<BR>
2日（金） 家庭訪問（下校1：30）<BR>
3日（土） 憲法記念日<BR>
4日（日） 国民の休日<br>
5日（月） こどもの日 <BR>
6日（火） 家庭訪問（下校1：30）<BR>
7日（水） 集金日<br>
9日（金） お話タイム<br>
14日（水） 研究会のため下校1：30<br>
15日（木） スポーツテスト、代表委員会<br>
16日（金） スポーツテスト、お話タイム<br>
19日（月） クラブ活動<br>
20日（火） スポーツテスト、眼科検診（抽出）<br>
21日（水） 腎検診１次、下校指導<br>
22日（木） 腎検診1次もれ<br>
23日（金） お話タイム<br>
26日（月） リーダー会<br>
28日（水） ギョウ虫検査、4時間授業<br>
29日（木） 歯科検診<br>
30日（金） お話タイム、なかよし活動、代表委員会 </font></font></DIV>
</DIV>映画のエンドロールのような文字列は、徐々に上方向に移動する文字列をスタイルシートの属性「clip」で窓のような見せる範囲を限定させることによって作成しています。このため、表示させる文字サイズや移動範囲によっては、文字列が切れてしまったり中途半端にスクロールが終了してしまうことがあります。「clip」で設定する場合は、表示する文字列の内容と移動範囲を決定してから設定すると良いでしょう。
