ウィンドウ 新しいウィンドウを開くときはちょっと考えちゃいますよね？同じ窓にするか別窓で表示させるか、サイズはどうするか、場合によっては自動で閉じたり他のページへジャンプしたりと色々できそうです。私の実例も交えて、工夫してみましょう。
新しいウィンドウを開くときはちょっと考えちゃいますよね？同じ窓にするか別窓で表示させるか、サイズはどうするか、場合によっては自動で閉じたり他のページへジャンプしたりと色々できそうです。私の実例も交えて、工夫してみましょう。
新しいページを別窓で表示するには、<A HREF="sample_1.html"> の中に続けて、 TARGET="_blank" と入れます。これはソフトが必ずサポートしていますから問題はないんですが、リンク集などでまとめて面倒を見る場合は、">html: を " TARGET="_blank">html: に置き換えるほうが楽です。次のジャンプさせる２例を除けば、別窓で表示するものについての工夫です。 サンプル
新しいページを別窓で表示するには、<A HREF="sample_1.html"> の中に続けて、 TARGET="_blank" と入れます。これはソフトが必ずサポートしていますから問題はないんですが、リンク集などでまとめて面倒を見る場合は、">html: を " TARGET="_blank">html: に置き換えるほうが楽です。次のジャンプさせる２例を除けば、別窓で表示するものについての工夫です。
ウィンドウを数秒開いておいてから指定のページに自動的に移動させる方法もよく見かけます。アクセスしたページの最初の画面が多いですね？私はクリスマスや年賀という季節の挨拶の初期画面や、このサイトでは黒猫の素顔に使っています。 サンプル 上のサンプルをクリックして、自動的にこのページに戻ってみてください。自動で戻らない場合も考えて、戻るためのリンクを設定しておくことも必要ですね？ サンプルページには次のものが METAタグ としてスタイルシートの書式で書いてあります。METAタグは、<HEAD> と </HEAD> の間（HEAD セクション）に入れる必要があります。サンプルのソースで確認してください。
ウィンドウを数秒開いておいてから指定のページに自動的に移動させる方法もよく見かけます。アクセスしたページの最初の画面が多いですね？私はクリスマスや年賀という季節の挨拶の初期画面や、このサイトでは黒猫の素顔に使っています。
上のサンプルをクリックして、自動的にこのページに戻ってみてください。自動で戻らない場合も考えて、戻るためのリンクを設定しておくことも必要ですね？
サンプルページには次のものが METAタグ としてスタイルシートの書式で書いてあります。METAタグは、<HEAD> と </HEAD> の間（HEAD セクション）に入れる必要があります。サンプルのソースで確認してください。
CONTENT="3 は、３秒で指定のURLに自動で移動することを指定しています。CONTENT="0 でも差し支えありません。あまり長いと訪問者がクリックしたり、イヤになって他のところに行ったりしかねませんから、程々の時間を設定しましょう。 URL=http://members.jcom.home.ne.jp/chat-noir/entrada/window.html"> がリンク先です。この場合はこのページそのもので、面白みがありませんね？同じサイト内でしたら、青色だけの相対的なURLで十分です。 訪問者を迷子にする目的でウィンドウのリフレッシュを使えば、ゲーム感覚で面白いページが作れるでしょう。が、それ以上に大切なこととして、検索エンジンに登録してあったり、訪問者がお気に入りに入れたりしたページを何らかの理由で移転しなければならないときに使うと効果的です。古いURLに移転先を明示して、同時に新しいURLにジャンプするように設定しておけば、さほどメモリーを消費せずに済みます。 サンプル サンプルは『コーヒー焙煎教室』ですが、コーヒー関連のファイルを一つにまとめるために、ディレクトリを新しく作りました。そこへリフレッシュすると同時に、ここの目次からも新しいページにジャンプできるようにしています。サンプルは新しいウィンドウで表示しますから、ブラウザのクローズボックスをクリックして閉じてください。 この方法でアルバムなどを作ると、スライドショーのように次々に新しいページを開いていくことができます。ただし新しいウィンドウから始める場合は途中で閉じることのできるように、そうでない場合は、いつでも元のページに戻れるようにしておきたいものですね？スライドショーに応用した例をイメージに載せてあり、下のボタンでご覧になれます。
CONTENT="3 は、３秒で指定のURLに自動で移動することを指定しています。CONTENT="0 でも差し支えありません。あまり長いと訪問者がクリックしたり、イヤになって他のところに行ったりしかねませんから、程々の時間を設定しましょう。
URL=http://members.jcom.home.ne.jp/chat-noir/entrada/window.html"> がリンク先です。この場合はこのページそのもので、面白みがありませんね？同じサイト内でしたら、青色だけの相対的なURLで十分です。
訪問者を迷子にする目的でウィンドウのリフレッシュを使えば、ゲーム感覚で面白いページが作れるでしょう。が、それ以上に大切なこととして、検索エンジンに登録してあったり、訪問者がお気に入りに入れたりしたページを何らかの理由で移転しなければならないときに使うと効果的です。古いURLに移転先を明示して、同時に新しいURLにジャンプするように設定しておけば、さほどメモリーを消費せずに済みます。
サンプルは『コーヒー焙煎教室』ですが、コーヒー関連のファイルを一つにまとめるために、ディレクトリを新しく作りました。そこへリフレッシュすると同時に、ここの目次からも新しいページにジャンプできるようにしています。サンプルは新しいウィンドウで表示しますから、ブラウザのクローズボックスをクリックして閉じてください。
この方法でアルバムなどを作ると、スライドショーのように次々に新しいページを開いていくことができます。ただし新しいウィンドウから始める場合は途中で閉じることのできるように、そうでない場合は、いつでも元のページに戻れるようにしておきたいものですね？スライドショーに応用した例をイメージに載せてあり、下のボタンでご覧になれます。
リンクにカーソルが乗るとジャンプさせることもできます。オンマウスというのは実は日本語で、英語では onmouseover とします。リンクは画像でも構いません。下の例の画像では、サンプルを <IMAGE SRC=MarilynMonroe-s.jpg> に変えているだけです。 ここで一大難問なんですが、PageMillは、ソースモードで入力した "" を勝手に "./" に変えてしまうんです。アラートでも同じことがあって、大丈夫かなと思って心配しながらチェックしたんですが、ちゃんと働いてくれました。もし心配でしたら、ソースモードのままで保存して、そのままアップロードするか、入力モードやプレビューモードにしないでFTPで送信すると変形されません。
リンクにカーソルが乗るとジャンプさせることもできます。オンマウスというのは実は日本語で、英語では onmouseover とします。リンクは画像でも構いません。下の例の画像では、サンプルを <IMAGE SRC=MarilynMonroe-s.jpg> に変えているだけです。
ここで一大難問なんですが、PageMillは、ソースモードで入力した "" を勝手に "./" に変えてしまうんです。アラートでも同じことがあって、大丈夫かなと思って心配しながらチェックしたんですが、ちゃんと働いてくれました。もし心配でしたら、ソースモードのままで保存して、そのままアップロードするか、入力モードやプレビューモードにしないでFTPで送信すると変形されません。
サンプル これには「戻る」と組み合わせたバージョンも可能です。画像をリンクボタンにする場合も同様で、サンプルの画像に仕込んであります。では空白にリンクさせたらどうでしょう？一見したところ何も無いところにマウスが乗ると戻ってしまいます。これはイタズラの種になりそうですね？
これには「戻る」と組み合わせたバージョンも可能です。画像をリンクボタンにする場合も同様で、サンプルの画像に仕込んであります。では空白にリンクさせたらどうでしょう？一見したところ何も無いところにマウスが乗ると戻ってしまいます。これはイタズラの種になりそうですね？
サンプル
上の例をちょっと変えれば、オンマウスで新しいウィンドウを開くこともできます。当然のことながら、オンマウスで別窓を開く を <IMAGE SRC=MarilynMonroe-s.jpg> とするだけで画像でも使えます。スペースにも使えますから、これもイタズラへの応用がききそうですね？新しいページは、自動で閉じるように設定したり、閉じるボタンを入れたりしたほうが親切でしょう。 ウィンドウのサイズを指定したり、toobarや statusbar などを整えたりする場合は、下の「ボタンでウィンドウをシンプルに開く」を参照してください。
上の例をちょっと変えれば、オンマウスで新しいウィンドウを開くこともできます。当然のことながら、オンマウスで別窓を開く を <IMAGE SRC=MarilynMonroe-s.jpg> とするだけで画像でも使えます。スペースにも使えますから、これもイタズラへの応用がききそうですね？新しいページは、自動で閉じるように設定したり、閉じるボタンを入れたりしたほうが親切でしょう。
ウィンドウのサイズを指定したり、toobarや statusbar などを整えたりする場合は、下の「ボタンでウィンドウをシンプルに開く」を参照してください。
オンマウスで別窓を開く
ウィンドウを閉じます。ステータスバーに表示する場合は、紫色の部分を入れます。黒の部分を画像の前に置いたらどうなるでしょう？テストしてみましょうか？
ボタンに入れるには、次のようにします。これも紫色の部分を入れることで、ステータスバーにコメントを出せます。このサンプルは上と同じです。 <P><CENTER><input type="button" value="閉じる" onclick="window.close()" onMouseOver="window.status='ウィンドウを閉じます';return true" onMouseOut="window.status='';return true"></CENTER></P>
ボタンに入れるには、次のようにします。これも紫色の部分を入れることで、ステータスバーにコメントを出せます。このサンプルは上と同じです。
ポップアップなど目障りなウィンドウは自動で閉じるようにしておくと嫌われないかもしれません。ちょっとだけ見せたいという場合もあるでしょう。黒猫の素顔では、ジャンプ先のojiichan.html に自動でウィンドウが閉じるように以下のものを入れてあります。 まず <HEAD> セクションに次のものを入れます。5000 は5000ミリ秒、つまり５秒で閉じるよう指示しています。10000とすれば10秒後に閉じます。tojiru は、適当につけたイベント名です。
ポップアップなど目障りなウィンドウは自動で閉じるようにしておくと嫌われないかもしれません。ちょっとだけ見せたいという場合もあるでしょう。黒猫の素顔では、ジャンプ先のojiichan.html に自動でウィンドウが閉じるように以下のものを入れてあります。
まず <HEAD> セクションに次のものを入れます。5000 は5000ミリ秒、つまり５秒で閉じるよう指示しています。10000とすれば10秒後に閉じます。tojiru は、適当につけたイベント名です。
次に <BODY> の中（BODYタグ）に次のものを入れます。これで新しく開いたページは自動的に消滅することになりますから、必ず別窓で表示させるように、リンク先を書いた後に TARGET="_blank" を入れておきます。そうしておかないと元のページも消えちゃいます。では少々照れますが、黒猫の素顔をどうぞ。オンマウスでウィンドウが開くサンプルにも入れてあります。
もっと簡単な方法がありまた。<HEAD> セクションには特別なにもせずに、<BODY> タグにしたの赤字を赤字の部分を入れるだけです。本当にこれで大丈夫かなと心配しながらテストしたら、大変快調でした。
もう一つの方法があります。TARGET="_blank で別ウィンドウで開いたページが待機状態になってアクティブでなくなったとき、つまり元のページやソース、アドレスなどがクリックされたときに、自動で閉じるようにもできます。<BODY> タグの中に onBlur="window.close();" と入れるだけです。onBlur は「霞んだら」の意味から「待機状態になったら」として使われています。黒猫の素顔の２つのページにはこのタグも入れてありますので、もう一度開いて、次のウィンドウが開かないうちに、そのウィンドウ以外のところをクリックしてみてください。ソースを開いたとたんに閉じちゃったでしょう？ポップアップなど目障りなウィンドウは自動で閉じるようにしておくか、このタグを入れておいてくれれば、嫌われないかもしれませんね？
ウィンドウを閉じると、新しいウィンドウが開くという経験はありませんか？あれってどうなってるのかなって、何度か調べてみたんですが、やっと分かりました。しつっこい方法なので、あまり使わない方がいいかと思いますが、訪れてくれたお礼の言葉を、小さなウィンドウで出すのもいいでしょうね？知っていても重荷にはなりません。 親のほうのウィンドウの <HEAD> セクションに次のものを入れます。ツールバーなどは必要に応じて yes としてもいいでしょう。NW は、適当につけた名前です。続いて <BODY> タグに onUnload="winopen()" と入れます。新しく開くウィンドウは自動で閉じるようにすると同時に、閉じるボタンもつけておくと安心です。
ウィンドウを閉じると、新しいウィンドウが開くという経験はありませんか？あれってどうなってるのかなって、何度か調べてみたんですが、やっと分かりました。しつっこい方法なので、あまり使わない方がいいかと思いますが、訪れてくれたお礼の言葉を、小さなウィンドウで出すのもいいでしょうね？知っていても重荷にはなりません。
親のほうのウィンドウの <HEAD> セクションに次のものを入れます。ツールバーなどは必要に応じて yes としてもいいでしょう。NW は、適当につけた名前です。続いて <BODY> タグに onUnload="winopen()" と入れます。新しく開くウィンドウは自動で閉じるようにすると同時に、閉じるボタンもつけておくと安心です。
onBlur には他にも利用法方があります。が、私のマックは Netscape Navigatorでなく Netscape6.2 ですが、全く効果を発揮しません。もしマック遣いでしたら、Netscape Navigator4 以上で開いて、サンプルを見てください。OSX対応の Internet Explorer ですと、意図した通りにいきます。 待機状態で閉じるという控えめなものとは正反対で、背後に押しやられると、途端に前面に押し出してきます。クローズボックスを押さない限り、いつも前面にいて邪魔ですから、「閉じる」などのボタンをつけておくといいでしょう。なおサンプルには、新しいウィンドウでサイズを指定するリサイズを入れてありますが、これもOS9.xまでのMac版では上手くいきません。
onBlur には他にも利用法方があります。が、私のマックは Netscape Navigatorでなく Netscape6.2 ですが、全く効果を発揮しません。もしマック遣いでしたら、Netscape Navigator4 以上で開いて、サンプルを見てください。OSX対応の Internet Explorer ですと、意図した通りにいきます。
待機状態で閉じるという控えめなものとは正反対で、背後に押しやられると、途端に前面に押し出してきます。クローズボックスを押さない限り、いつも前面にいて邪魔ですから、「閉じる」などのボタンをつけておくといいでしょう。なおサンプルには、新しいウィンドウでサイズを指定するリサイズを入れてありますが、これもOS9.xまでのMac版では上手くいきません。
ちょっとした説明など、小さなウィンドウで開くようにするには、次のようにします。この場合、window.html は現座のページ、sample_3.html は新しく開くページ、Marilyn は新しいページにつけた適当な名前です。『HTMLクイックスタートガイド』では、サンプル１のように現在のページを入れるようになっていますが、これだと新しいページを開くと同時にこれまでのページも更新されて、カーソルが先頭に戻り、どこまで読んでいたのか不明になって不都合です。じゃぁどうじゃと、window.html を含む茶色の部分と、scrollbars=yes を削除してみました。それがサンプル２です。私は後の方がいいなと考えています。 HEIGHT=318,WIDTH=444で、ウィンドウのサイズを指定しています。scrollbars=yes などでは、menubar, toolbar, location, status, scrollbar の表示の有りを、scrollbars=no などで無しを指定します。
ちょっとした説明など、小さなウィンドウで開くようにするには、次のようにします。この場合、window.html は現座のページ、sample_3.html は新しく開くページ、Marilyn は新しいページにつけた適当な名前です。『HTMLクイックスタートガイド』では、サンプル１のように現在のページを入れるようになっていますが、これだと新しいページを開くと同時にこれまでのページも更新されて、カーソルが先頭に戻り、どこまで読んでいたのか不明になって不都合です。じゃぁどうじゃと、window.html を含む茶色の部分と、scrollbars=yes を削除してみました。それがサンプル２です。私は後の方がいいなと考えています。
HEIGHT=318,WIDTH=444で、ウィンドウのサイズを指定しています。scrollbars=yes などでは、menubar, toolbar, location, status, scrollbar の表示の有りを、scrollbars=no などで無しを指定します。
ボタンで小さなウィンドウを開くには、別の方法もあります。こっちのほうが使いいいかもしれません。次のようにします。width=470,height=530" でサイズを指定しています。
上の例では、現在のページでウィンドウサイズを指定しましたが、開かれるほうのページで読み込まれるときにサイズを指定することも可能です。それには、新しいページの <BODY> タグに、onLoad="resizeTo(width,height)" を入れてリサイズを指定します。括弧内は、横幅,縦幅の順であることに注意します。この場合は、サンプルページに下のように入れてあります。
ボタンでウィンドウを開くには、onClick=window.open() として括弧の中にダブルクォーテンション " で括ったURLを入れます。サンプル「開けゴマ」をクリックしてみてください。この場合、ただシンプルでノッペラボーな画面になりますので、写真や宣伝などの、そういうほうが相応しいようなページに使うのがいいでしょうね？
ちっともシンプルじゃないですか？fullscreen=1 などが特に問題ですね？そこでウィンドウサイズ以外の茶色の部分を削除してみましょう。ウィンドウサイズも省略したものは、ボタンに載せてあります。今度はスッキリしたでしょう？ソースにコピー＆ペーストするときは一度ワープロにコピーして、改行が入らないように注意してください。
後の方で削除した menubar, toolbar, location, status, scrollbars には =0 を入れても同じ結果になります。それぞれの意味するものはお分かりと思います。必要に応じて使い分けるといいですね？新しいページには自動で閉じるタグと、待機状態で閉じるタグを入れてあります。
メッセージのところで、マーキーを利用したスタッフロールを試みましたが、ここではページが読み込まれるとスクロールを開始するものを見ます。面倒なことに、自動スクロールの実行中は、キーやマウスの操作を受け付けないということがあります。一見格好よさそうですが、ユーザーがコントロールできないというのは不都合にも思われ、私はまだ使っていません。それにマックOSX対応の Internet Explorer では、サポートしていないようです。とは言え、使い方次第でユニークなページができるかもしれませんね？
ここでは <BODY> に onLoad="Sukuroru()" と入れて、ロードされると同時に実行するようにしていますが、別個に実行ボタンを設けることも可能です。ここではどちらも設定しておきました。
