簡単ですが、こんな感じで動きのあるページが出来あがります。
それではここまでのソースを解説したいと思います。
デフォルトの状態で動作が同じ物に対してはなるべく必要な部分だけを記述してみました。
p.s.
第１回でテキストエディタ（メモ帳など）と述べましたが、私が使ってきたなかで一番、使い勝手の良いテキストエディタを紹介します。
それは、シェアウェアですが 「秀丸エディタ」 と呼ばれるものです。ＨＴＭＬを手書きで入力する場合自動的に色分けされて表示され、まことに使い勝手が良いです。
| <html> | ＨＴＭＬの開始 |
| <head> | ＨＥＡＤの開始 |
| <title>第１回から第５回までのまとめ</title> | ウィンドウタイトル |
| <style type="text/css"> | スタイル定義の開始 |
| body{background:url(../back.gif) fixed repeat-y} | スタイルシートで壁紙の指定 |
| p{margin-left:130px} | タグＰの左マージン指定 |
| hr{margin-left:130px} | タグＨＲの左マージン指定 |
| table{margin-left:100px} | タグTABLEの左マージン指定 |
| </style> | スタイルの定義終了 |
| <script language="JavaScript1.2"> | スクリプトの開始 |
| <!-- | コメント開始 |
| var cnt = 20; | 変数cntの宣言と値の代入 |
| function MovCss(){ | MovCss関数の開始 |
| if(cnt > 0){ | もし、cntが0を超えるなら |
| cnt--; | cntの値をデクリメント（1引く） |
| document.all["css1"].style.left = 150 + 10 * cnt; | それぞれのleft,topプロパティーの最終座標への移動量をここで計算させている。 たとえばcss1のleftの最終的な座標を150として、そこへの移動量をカウンター用の変数cntがデクリメントの結果0になるまで続けられる。 setTimeoutは、50/1000秒後にMovCss関数を実行せよという意味の関数 |
| document.all["css2"].style.left = 150 - 10 * cnt; | |
| document.all["css3"].style.left = 220 + 10 * cnt; | |
| document.all["css3"].style.top = 170 + 5 * cnt; | |
| document.all["css4"].style.left = 240 - 10 * cnt; | |
| document.all["css4"].style.top = 200 - 5 * cnt; | |
| setTimeout("MovCss()",50); | |
| } | もし、cntが0を超えるならここまで実行される |
| } | MovCss関数の終了 |
| function ChgBGColor(cBGColor){ | 背景色変更用の関数の開始 |
| document.all["cbg1"].style.backgroundColor = cBGColor; | IDがcbg1という名の背景色に指定職を代入 |
| } | 関数終了 |
| //--> | コメント終了 |
| </script> | スクリプト終了 |
| </head> | HEAD終了 |
| <body onload="MovCss()"> | BODY開始、開始時にMovCss関数の実行 |
| <div ID="css1" STYLE="position:absolute; width:400; height:4;top:150;"> | 400*4のサイズを持ったt_line10.gifという画像をcss1という名のスタイルシートに絶対座標で上から150ピクセル目のところに設定 |
| <img src="t_line10.gif"> | |
| </div> | |
| <div ID="css2" STYLE="position:absolute; width:400; height:4;top:250;"> | 同じように各画像のサイズでスタイルシートを作成しIDを定義しているleft,topのうちスクリプトで書きかえられないものについてだけ前もって宣言している 絶対座標指定のスタイルシートと通常のタグのずれをどのように指定すれば良いのかわからなかったのでとりあえず改行タグで調整ジオガイドも計算に入れてみました |
| <img src="t_line10.gif"> | |
| </div> | |
| <div ID="css3" STYLE="position:absolute; width:256; height:35;"> | |
| <img src="dareka.gif"> | |
| </div> | |
| <div ID="css4" STYLE="position:absolute; width:221; height:48;"> | |
| <img src="hp.gif"> | |
| </div> | |
| <br><br><br><br><br><br><br><br><br><br><br><br> | |
| <center> | 中央揃え |
| <marquee width="50%" behavior="alternate"> | マーキー、ブラウザ横幅の50%で往復表示 |
| ようこそ誰かさんのホームページへ | 表示させる文字列 |
| </marquee> | マーキー終了 |
| </center> | 中央揃え終了 |
| <p> | 通常のタグ |
| 簡単ですが、こんな感じで動きのあるページが出来あがります。<br> | |
| それではここまでのソースを解説したいと思います。<br> | |
| デフォルトの状態で動作が同じ物に対してはなるべく必要な部分だけを記述してみました。 | |
| </p> | |
| <p> | |
| p.s. | |
| </p> | |
| <p>第１回でテキストエディタ（メモ帳など）と述べましたが、 | |
| 私が使ってきたなかで一番、使い勝手の良いテキストエディタを紹介します。</p> | |
| <p>それは、シェアウェアですが | |
| <a ID="cbg1" href="http://hidemaru.xaxon.co.jp/" | マウスカーソルが載った場合背景色を変わるように細工してある |
| onMouseOver="ChgBGColor('#80ffff')" onMouseOut="ChgBGColor('#ffffff')"> | |
| 「秀丸エディタ」</a> | |
| と呼ばれるものです。ＨＴＭＬを手書きで入力する場合自動的に | 通常のタグ |
| 色分けされて表示され、まことに使い勝手が良いです。 | |
| </p> | |
| <hr> | |
| ・・・ |
とまあ、こんな感じです(笑)