66歳パソコン教師の日記 NO.1455 (2004.06.19)


 数日前から「ホームページ楽々講座」に書くために、仕事の合間に試行錯 誤を繰り返していました。ブラウザのサイズに合わせて角丸四角形の枠を表 示させようと考えたのです。

 画面の解像度やブラウザの表示サイズに関係なく、常にブラウザのウイン ドウサイズ比で表示させるには、そのサイズを取得しなければなりません。 「Internet Explorer」の場合は「clientWidth」と「clientHeight」で取得 出来ます。

 角丸四角形の枠は画像を使わずに「ベクターグラフィック」で表示します。 角丸四角形は「roundrect」を使います。 取得したブラウザのウインドウサ イズを「ベクターグラフィック」の 「width」と「height」にどのようにし て取り込むかが問題でした。

 タグ入力でホームページを作成していない人にはお分かりにならないでし ょうが、角丸四角形は画像を使わずに「ベクターグラフィック」で表示して います。ソースに記述するだけで表示できるのです。

 普通は画像の角丸四角形を使って表示しますが、ホームページを見る人の ブラウザの画面サイズによって左に偏ってしまいます。これを克服するため に「ベクターグラフィック」の使用を思い付きました。

 画面サイズに関係なく、画面の周囲に10ピクセルを空けて角丸四角形を 表示するには、ブラウザの画面サイズを取得して、縦横の幅が20ピクセル 小さい角丸四角形にします。

 昨日の夕方になってやっと成功、久しぶりに完成の興奮を味わいました。 早速、そのソースを「ホームページ楽々講座」に書きました。今日は、それ をSALTYのトップページに用いて久しぶりに更新しましたのでぜひご覧 ください。

 最近はパソコンの制作に興味が移り、ホームページの更新はしていません でしたが、思い付いたアイデアを実現するために、あれこれ考えるのはとて も楽しいものです。ソフトを使ってホームページを作っていては、この喜び は味わえません。

 今回は 「ベクターグラフィック」と「Java Script」を使って実現しまし たが、トップページの「走る列車」のように、アイデア次第では簡単なタグ でも画期的なことが可能です。

 歳をとると考えることが億劫になりますが、目的があれば考えることが楽 しくなります。考えることを怠れば脳が退化します。ホームページの制作に 限らず、目的を持つということは素晴らしいことです。