盗用も勉強
いきなり変な画面が出てきたので驚かれたかもしれないが、別に「面白半分」が模様替えをしたというわけではない(^^;)
「面白半分」をオープンしたのが、今から約2年半前。当時は初歩的なテクニックしかなく、しかもほとんどのコンテンツをテキストエディタで書いていたので、トップページのレイアウトなどは、かなり地味である。
それでも、自分の気に入ったレイアウトにできるし、手直しも楽だし、ファイルサイズも小さくできるので、これからもトップページは変更する予定はないのだが、仮にいじってみるとしたらこんな具合にということで作ってみたのが、上の画面である。
ためしに、「うんちく講座」等の文字の部分にマウスをあてていただきたい。けっこうカッコイイアクションが起きるのではないだろうか。(実際にはリンクしませんが)
これは、JavaScriptを使ったテクニックである。
この種の効果を出すものとしては、ダイナミックHTML・スタイルシートなどの方法もあるが、残念なことに、Internet Explorerでしか動作しないので、Netscape Navigatorで見た場合には全く効果がない。
誰が見ても(よほど旧式のブラウザを使っていない限りは)同じような効果を表現するには、結局この方法を使うしかないようである。
ところで、私が「JavaScript」に堪能なのかというと、実はそうではない(^^;)
少し勉強してみようと本は買ったのだが、難しくてよくわからない。自分でソースを書いてみようともしたのだが、1日や2日、本を読んだだけでは無理であった。
では、どうやって上のような表示ができるようになったのかというと、なんのことはない。よそのホームページからパクったのである(^^;)パクったというと聞こえが悪いので言いかえると盗用したのである(うーん、こっちのほうがもっと聞こえが悪い‥‥)
私がソースをもらったのは、NHK教育テレビの番組サイト「インターネットスクール・たったひとつの地球」である。このページのほうがずっとかっこよく仕上げられてはいるが、「なんとなく同じ感じ」というのはわかるだろう。
この「JavaScript」が便利なのは、コンパイラなどの特別なアプリケーションを必要としない、全くのテキストタイプであることだ。したがって手本となるソースを保存して、その中の「JavaScript」の部分を自分のHTMLソースの中にペーストするだけで使えるのだ。
もちろん、そのままでは使えないので、細かい部分は自分で書き換えることになる。また、マウスをあてると表示が変わる部分は、実際には文字表示ではなく全てGIF画像を使っているので、かなりの枚数の画像を自作しなくてはならない。
しかし、基本的な部分はそのままなので、JavaScriptがよくわからない私のようなものでも、手間を惜しまず試行錯誤すれば、なんとか上の例のようなものが作れる。また、作っているうちに、次第にJavaScriptの仕組みもわかってくる。
こういうことができるのは、テキストエディタを使っているからである。
ホームページ作成の専用ソフトだけを使っていて、HTMLのソースを見ることがないという人には、ちょっと無理かもしれない。また、実際にホームページ作成ソフトを使ってみると、よそのホームページのソースを拝借して使ってみるというのができないこともあるようだ(私の使っているものでは、元のソースのまま取り込むことができなかった。したがって、このページは全てテキストエディタだけで作っている)
「かっこいいなぁ!」「真似したいなぁ!」というページを見つけたら、そのソースを表示してみることをお勧めする。
Netscape Navigatorでは表示して見るだけしかできないが、Internet Explorerでは「ソースを表示」にすると自動的にメモ帳などのテキストエディタが起動するので、そのまま「名前をつけて保存」するとよい。
これを少し手直しするだけで、自分のページを作ることもできるし、上の例のように必要な部分だけを利用することもできる。(必要な方は、このページのソースを保存して使ってみてください。画像を作るのは少々めんどうですが‥‥。新しくホームページを作ったり、今までのページを手直ししてみようという方には参考になるかもしれません)
ある意味では、まさに盗用なのだが、罰せられるような行為ではない(^^;)
ホームページ作りの実力をつけるには、こういった盗用をたくさんやって、勉強することも良い方法である。
<99.12.30>
ホームページに戻る
うんちく目次へ