Home | 第82号 | 第83号 | 第84号 | 目次

初心者のためのホームページ作り　第83号

Web作成支援

メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。なお、疑問点や分からない点がありましたら、遠慮なく メールにてご質問ください。

＜第83号＞ 今週のおさらい
　　　　　　　　　　　　　　 　 毎週金曜日配信　What's New 2004/1/30
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
　　  ■ JavaScript講座 第16回 --- windowオブジェクト
　　　■ CSS講座 第４回 --- 色の扱い
◆ JavaScript講座 --- windowsオブジェクト
JavaScriptの windowsオブジェクトは、画面に表示されるウィンドウがもつ「モノ」を操作します。これによって、新たなウィンドウを開いたり、タイマーを設置したり、ウィンドウの座標などを調べたりします。
今回は、この windowオブジェクトについて取り上げます。
■ windowsオブジェクトのメソッド
オブジェクトがあらかじめ定義されているメソッドとは、機能（命令）を表わし、特別なプログラムを組むことなく、オブジェクトをコントロールすることができます。
◆ alet
alertというメソッドは、 のように、警告を意味するウィンドウを発生させます。このメソッドを利用することで、フォームなどのページでは、未入力がある場合に有効かもしれません。
◆ blur
新たに開くウィンドウなどや、アクティブなウィンドウを他の非アクティブなウィンドウの後ろに回すメソッドが、この blurです。ただし、閲覧者に断りもなく勝手に現在のウィンドウを非アクティブにするのは考え物です。
◆ setInterval
タイマーを設定する場合に、このメソッドを使います。このメソッドでタイマーを開始したとき、必ず clearIntervalメソッドで終了させます。一定時間ごとに処理をさせるときに利用するメソッドです。
◆ setTimeout
タイマーを設定する場合に、このメソッドを使います。このメソッドでタイマーを開始したとき、必ず clearTimeoutメソッドで終了させます。一定時間後に処理をさせるときに利用するメソッドです。
◆ close
ウィンドウを閉じるメソッドです。例えばこのウィンドウを閉じたい場合、 を押すと、簡単に閉じることができます。（状況によっては、警告が発せられる場合もあるかもしれませんが・・）
◆ confirm
確認のためのウィンドウが出ます。例えば、 のように alertと似たような確認ウィンドウが出ます。
◆ open
新たなウィンドウを開きます。例えば、 ここでは新たなウィンドウを開きます。各種パラメータを利用すれば大きさやスクロールバーなどの表示について細かく設定することが可能です。
◆ resizeBy、resizeTo、moveBy、moveTo
現在のウィンドウの幅と高さを変えます。閲覧者が自分なりに設定しているウィンドウサイズを変えてしまうのは、どちらかといえば嫌がれる傾向にありますので、お勧めできるメソッドではありません。
このサンプルボタンを、　押すと、現在のこのウィンドウがあなたのモニターサイズいっぱいにまで広がります。まぁ、やめておきましょう。なお、自動的に元に戻りません、ご了承ください。
◆ scroll、scrollBy、scrollTo
ウィンドウのスクロールを自動的に行うメソッドです。長い文章などのコンテンツを含んだ際に利用すると効果的かもしれませんが、人によって読むスピードが違うので、あまりお勧めできません。勝手にスクロールすると読みにくいのも事実です。乱視の方には迷惑なメソッドでしょう。
■ windowsオブジェクトのプロパティ
オブジェクトのプロパティとは、あらかじめ備えられた「属性」をあらわします。メソッド同様に、特別のプログラムなしに、オブジェクトを扱うことができます。
◆ defaultStatus、status
Webブラウザのステータスバーにメッセージを表示します。
ステータスバーは、インターネット接続時の情報を表示させる重要な場所です。そこに、メッセージを流すのはうざったく感じられるばかりか、そうした情報を表示させることができなくなります。決してお勧めできるプロパティではありません。
以下、name、opener、closed、length、などのプロパティは、windowオブジェクト のページを参照してください。

windowオブジェクトを使ったJavaScript

（詳しいスクリプトとHTMLは、今週のメールマガジン「第83号」をお読みください。）

PageTop
◆ CSS講座 --- 色の扱い
スタイルシート (Cascading Style Sheet) では、色の指定の仕方がいくつかあります。最もポピュラーな方法は 16進数を6桁で指定するというものですが、これ以外にも有用な方法があります。
■ 3桁による色の指定
スタイルシートの場合、3桁の記述でも色を指定することができます。0〜F までの16進数の1桁を、RGBに当てはめます。そのため、この指定方法では、16Ｘ16Ｘ16＝4096色が設定できます。
Webセーフカラー では、0、3、6、9、C、F までの6つの値で色を設定しますので、その総数は 6Ｘ6Ｘ6＝216色になります。
 p { color: #000 }  RGBそれぞれが発光しないので黒色になる
■ 数値による色の指定
16進数は、0〜255 までの256段階でRGBそれぞれを発光させます。つまり 256Ｘ256Ｘ256 で、その総数は16,777,216色が表現されるわけです、これを24ビットフルカラーと呼びます。
こうした1677万色以上の指定を、数値を使って指定する方法が、以下のとおりになります。利用できる数値は、0〜255 までです。
 p { color: rgb(255,255,204) }  16進数 #FFFFCC となる
■ パーセントによる色の指定
RGB各色の発光度合いをパーセント単位で指定する方法です。この指定方法では、100Ｘ100Ｘ100＝100万色が指定できます。以下が、パーセント単位で指定する書式です。
 p { color: rgb(100%,100%,80%) }  16進数 #FFFFCC となる
スタイルシートでは色の指定方法がこのように用意されているということがお分かりいただけたと思います。あなたにとって使いやすい単位で利用するといいでしょう。
■ 背景色の指定
背景色を指定する属性は background、あるいは、background-color です。ただし、Macintoshの場合、後者の background-color に設定すると、うまく表示できない可能性があります。（OSのバージョンによる）そのため、前者の属性を利用する方が安全といえるでしょう。
色を指定する場合には、文字色と背景色を同時に指定することが推奨されています。閲覧者側であらかじめ、文字色や背景色を指定していた場合、文字色が背景色を同じになる、または背景色が文字色と同じになる可能性があります。
特に背景色を指定する場合には、必ず文字色も一緒に指定するクセをつけましょう。
スタイルシートを指定する属性と値のペアは、セミコロンをつけることで複数設定することができます。以下のサンプルは、文字色と背景色を指定しています。
 p { color: #000;  background: #ffc }  このボックスの同じ指定
背景色を指定する場合の注意点として、文字色とのコントラストのバランスに注意してください。また、色の再現性は、閲覧者の環境に依存します。必ずしも制作者側で指定した色が、閲覧者のブラウザで同じようにレンダリングされるわけではありません。その点を含んで色を扱うようにしてください。
次回は、スタイルシートで扱う長さの単位について解説します。
This page is Valid HTML 4.01! 初版更新日 2004/1/30
Copyright（C） 2002-2004 banban@scollabo.com