人に聞けない痔の悩み、これでスッキリ >>

いつもお世話になります。
htmlもよく分からずに自分のサイトを作っている、初心者です。
生意気な事ですが、デザインの関係で
自分のサイトを開いた時にウィンドウのサイズを
固定して見てもらいたいのですが、
どうすればよいのか分かりません。
もしかしたらここで聞く事ではないのかもしれませんが
なにぶんにも初心者なのでおわかりの方がいらっしゃれば
ぜひご教授ください
よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

サイトトップでJavaScriptから新しいウィンドウを開いて、指定のサイズのウィンドウ上で展開する場合のソース例です。



<html>
<head>
<title>Top page</title>
<script type="text/javascript"><!--
function winopen(){
var MainWin=window.open("tester.htm","MyWebSite","width=600, height=400, statusbar=1, location=1, menubar=1, toolbar=1, resizable=0, scrollbars=1");
}
//--></script>
</head>
<body>
<p><a href="呼び出すページのURL" onClick="winopen(); return false;">ENTER</a></p>
</body>
</html>

このようなソースにすると、このページのリンクをクリックした時に、JavaScriptで新しいウィンドウをサイズを指定して開き、そこに次のページを読み込むようになります。
もしJavaScriptが有効ではない環境で閲覧する場合には、新しいウィンドウは生成されず、トップページを表示したウィンドウ上で次のページが表示されるようになります。

ウィンドウサイズは、window.open()の括弧内にある、widthとheightで指定します。 単位はピクセルです。
その他にもいくつか指定を入れてありますが、このスクリプトの部分については、参考URLが詳しいので、そちらを参照してみてください。


ここからはアドバイスですが、可能であれば、やはりウィンドウサイズをリサイズさせなくてもすむデザインにしたほうが無難と思います。
先ほど書いた、フレームを使ってページの表示領域を制限する方法でも、ウィンドウサイズに左右されないデザインに近づけることができると思います。

他に、テーブルで囲んだり、スタイルシートによって表示の横幅を決めてしまえば、内容を表示する領域を固定値として確保できるので、ウィンドウ幅の差によるデザインの崩れを排除できる可能性もあるでしょう。
テーブルの場合は、通常のテーブルで横幅を指定し、その中に内容をすべて入れてしまえばよいだけです。
スタイルシートの場合は、
<div style="margin: auto; width: 600px;"></div>
で全体を囲めば、ウィンドウの横幅が変わっても内容の表示幅は変わらないようにできます。
もし、デザイン上のウィンドウサイズ指定が、ウィンドウの横幅が変わることでレイアウトが崩れることの防止策であるとするなら、これらの方法も対策になると思いますよ。

参考になれば幸いです。

参考URL:http://tohoho.wakusei.ne.jp/js/window.htm#open
    • good
    • 1
この回答へのお礼

丁寧なアドバイス
ほんとうにありがとうございます。
素直にアドバイスに従って
フレームサイズを調整する事で
デザインを維持できるようにやってみたいと思います。

たいしたデザインでもないのですが、
凝り性なものですから(笑)

自分のような初心者には
本当に有り難いアドバイスでした。
また、何かの折にお世話になるやもしれませんが
その時も、またどうかよろしくお願い致します。

お礼日時:2003/08/24 20:52

ウィンドウそのもののサイズを制御するのは、HTMLのみでは不可能です。

JavaScriptを使う必要があるでしょう。
ただ、先の方も述べられているように、ウィンドウサイズを勝手に変えてしまうページは、閲覧側から見れば、歯に絹を着せぬ物言いをすれば、非常に鬱陶しいです。 ウィンドウサイズはユーザーの好みによるところも大きく、またウィンドウサイズを左右してしまうのは閲覧側のユーザビリティを阻害します。 あまりお勧めはしません。

サイトトップでJavaScriptからサイズを指定したウィンドウを開き、そこにサイトの内容を表示させるような形であれば、閲覧側の不便も多少は緩和できるかもしれません。 ただ、デザインの趣旨に沿うかどうかは別問題になりますが。


どうしても閲覧されるサイズをHTMLで規定したいというのであれば、フレームを希望のサイズになるように切って、その中でサイトを展開するのも方法の一つかと思います。 こちらの方法であれば、ウィンドウサイズは変更させずに表示枠のサイズを規定できると思います。
まずはこちらの方法を試されてみてはいかがでしょうか。

この回答への補足

はじめまして、lead1976さん。
早速回答いただいてありがとうございます。

>サイトトップでJavaScriptからサイズを指定したウィンドウを開き、そこにサイトの内容を表示させるような形・・・
実際にはどのような html になるのでしょうか?
もしよろしかったらお教えいただけませんか。

>フレームを希望のサイズになるように切って、その中でサイトを展開するのも方法の一つかと思います。
これだったら自分にもできるかもしれませんね。
ちなみに、htmlはかけないのでマイクロソフト・FrontPageで作っています。

でも、やはりデザインのためにリサイズするのは
やめておいた方がよいみたいですね。
つまり、リサイズしないですむデザインを考えるという事でしょうか。

補足日時:2003/08/24 15:09
    • good
    • 1

例えば、



<body onload="javascript:with(top){moveTo(0,0);resizeTo(256,128);}">
<h1>Test</h1>
</body>

――みたいな事ができますが、望みもしないのにウィンドウのリサイズを勝手に行うページ・デザインは、ほとんどの人に受け入れてもらえないでしょう。
見やすいウィンドウサイズは人それぞれですので。

この回答への補足

はじめましてosamuyさん。
早速回答いただいてありがとうございます。

お教えいただいた
3行のhtmlを書き出してブラウズしたところ
うまくいきません。
自分はjavascript がどういうものか理解していないからでしょうね。すいません。

たしかに自分もブラウズしていて
勝手にリサイズされるのはあまり気持ちのいいものではありません。
別の方法でデザインを考えた方がいいのだろうと思います。

補足日時:2003/08/24 15:01
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qウィンドウサイズ固定

いつもお世話になっております。

イントラネット上のコンテンツにおいて
TOP画面のサイズを固定したいと思っております。

子ウィンドウはオープン時に"resizable=no"で
サイズ固定できますが
親ウィンドウではどうでしょうか?

動作は以下のようになればよいのですが

obj = window.open(selfUrl, name, "resize=no");
self.opener = self;
self.close();

諸事情により
ブラウザのプロセスIDが変化してしまうと困るので
「親ウィンドウを開きなおす」技は使えません・・・。

CSSで
max-width:1024px;min-width:1024px;
と試してみてもサイズ固定にはならないしで
煮詰まってしまいました。

何か方法をご存知の方
いらっしゃいましたら宜しくお願い致します。

Aベストアンサー

前から気になっていた案件なので久しぶりに
真剣に考えていたら、こういう手を思いつきました。
どうでしょう?

<html>
<head>
<script language=javascript>
window.onresize=function(){
rw=document.body.clientWidth;
rh=document.body.clientHeight;
window.resizeBy((w - rw),(h - rh))
}
function loadFunc(){
w=document.body.clientWidth;
h=document.body.clientHeight;
}
</script>
</head>
<body onLoad="loadFunc()">
test
</body>
</html>

Qウィンドウのサイズを変えても表示を崩れないようにしたい

ウインドウサイズをドラッグドロップして大きさを変えると
表示が崩れまくって困ります
固定する方法はないですか?ウインドーの大きさにかかわらずに
常に表示が同じな。

Aベストアンサー

表というのはtableタグでしょうか?でしたら
<table width="">(幅)
<table height="">(高さ)
で大きさを指定するとウィンドウサイズを変えてもテーブルのサイズは変わらないと思います。

QWEBサイト作成:初心者です。画面サイズの設定について・・・

私はこれまでWEBページを作成したことがなかったのですが、今回WEBページを作成することになりました。
簡易ページではありますが、作る楽しさを感じ始めています。

そこで一つ質問したいのですが、画面サイズの設定はどのようにしたらよいのでしょうか?
ちなみに【画面サイズは横600ピクセル×縦400ピクセルを基本として、縦は最高800ピクセルまで】という指定があるので、この設定にしたいのです!
お願いします!!!

Aベストアンサー

ページ内内容を600×400で作りたいのでしたら、
サイズを決めたbox内に内容を書くと良いでしょう。
例:
~上略~
<body>
<div style="width:600px; height:400px;">
内容。横幅600px、縦幅400px以上の長さの内容(大きな画像とか多い文章とか)があると、広がってしまいます。
</div>
</body></html>

600×400の表示サイズのブラウザで確認しながら作りたいのでしたら、
まず1枚のhtmlファイルを用意します。
内容には
<body style="margin:0;">
<div style="width:600px; height:400px; border:1px splid #0000ff;">600*400</div>
<div style="width:600px; height:400px; border:1px splid #ff0000;">600*400</div>
</body>
だけ書きます。
ブラウザでこのページを表示し、枠線に表示領域の大きさを合わせます。
600×400もしくは600×800の画像でも可能です。
サイズをあわせたら表示している中身を、作成するページに切り替えます。
多少の誤差は出ますが、まあ許容範囲ではないかなと。

ページ内内容を600×400で作りたいのでしたら、
サイズを決めたbox内に内容を書くと良いでしょう。
例:
~上略~
<body>
<div style="width:600px; height:400px;">
内容。横幅600px、縦幅400px以上の長さの内容(大きな画像とか多い文章とか)があると、広がってしまいます。
</div>
</body></html>

600×400の表示サイズのブラウザで確認しながら作りたいのでしたら、
まず1枚のhtmlファイルを用意します。
内容には
<body style="margin:0;">
<div style="width:600px; height:400px; border:1px...続きを読む

Q表示するウィンドウのサイズを記憶させるには

Windows7を使っていますが、IEを起動したりデスクトップにある
サイトのショートカットを選択しウィンドウを表示すると、いつも小さなウィンドウが表示
され、しょうがないので、ドラッグして広げたり、最大化したりしています(かなり面倒 毎回なので..)。

表示されたウィンドウをドラッグして大きくしても、次の機会にIEを起動
すると、また元のウィンドウサイズになっています。最後に表示した
ウィンドウサイズをWindows7に記憶させるにはどうしたらよいでしょうか?

Aベストアンサー

Shiftを押しながらとかCtrlを押しながら「×」で記憶される。。。。のですが、前提条件があります。
まずサイズをリセットしなくてはいけません。
IEでページのリンクをたどるなどして新しいウインドウを開き、その新しいウインドウだけを残して他のウインドウを全部閉じます。
タスクバーを右クリックして「重ねて表示」とか「上下に並べて表示」「左右に並べて表示」などを選択します。このときにウインドウサイズがリセットされます。JavaScriptなどの影響でウインドウサイズを小さく固定されてしまったIEではこのウインドウサイズをリセットしないと、新しいウインドウサイズを覚え込ませることができません。

この後、四隅をドラッグして好みのウインドウサイズにしてからShiftやCtrlキーを押しながら「×」で閉じると、次からは新しいウインドウサイズで開くはずです。

Q画面サイズ変更時のレイアウトの崩れ

サイトをHTML+CSSで作成しているんですが
ブラウザのサイズが最大化のときは平気なのですがサイズを変更する(縮める)とライン画像がはみ出したりリストが縮める側に寄ってしまったりとレイアウトが崩れてしまいます。
これを直す方法はあるでしょうか?

背景は1024×50の画像をy軸でリピートさせています。
レイアウトのほうは見出し画像の右にリストを横に表示させ、その下にナビゲーションを配置しています。
最大化時、縮小化時ともに縦、横のスクロールがなぜか表示されません。

Aベストアンサー

スクロールバーが表示されないのが問題なのでしょうか?
テンプレートを使っている場合は、デフォルトで表示されないようにしてあったりする場合があると思います。

overflow-x:hidden;
overflow-y:hidden;
などがないか確認してみるといいと思います。

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

Q複数のボタンを等間隔に、かつ中央に配置する

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button">
<input type="submit" value=">> 進 む>>" />
</div>

↓CSSファイルです↓
div.button {
padding-right:35px;
float:left;
}

上記設定で、ボタンの左右間隔はいい感じにあいたのですが
全体的に左に寄ってしまってます。

よろしくお願いいたします。

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button...続きを読む

Aベストアンサー

<div class="button">
<input type="submit" value="<< 戻る <<" />
<input type="submit" value="選択リセット" />
<input type="submit" value=">> 進 む>>" />
</div>

div.button {
text-align:center;
}
div.button input {
margin: 0px 20px;
}

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Qボタンを横に並べて表示させる方法

<input type="button"> ←このボタンを、並べて表示させるにはどうしたら良いでしょうか? (tableは使わない方法で) よろしくお願いいたします

Aベストアンサー

ソースをください。

inputはインライン要素なので改行は入らないです。


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング