出産前後の痔にはご注意!

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

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

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

A 回答 (2件)

ページ内内容を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の画像でも可能です。
サイズをあわせたら表示している中身を、作成するページに切り替えます。
多少の誤差は出ますが、まあ許容範囲ではないかなと。
    • good
    • 0
この回答へのお礼

とても助かりました!!!!
さらに勉強になりました!!

ありがとうございます☆

お礼日時:2007/08/19 01:31

その「画面サイズ」はツールバーやアドレスバーなどを含めたサイズですか?


それともhtmlファイルを表示する領域のみですか?

この回答への補足

回答ありがとうございます!

「htmlファイルを表示する領域のみ」です!!

補足日時:2007/08/18 10:21
    • good
    • 0

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

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

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

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

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

Q自分のサイトを開いた時にウィンドウのサイズを固定したい

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

Aベストアンサー

サイトトップで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

サイトトップで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...続きを読む

Qdiv領域をウインドウサイズに合わせる

divタグで生成された3つの領域を横に並べたいのですが、
左2つは幅をピクセル指定で固定し、3つめをウインドウサイズに合わせて残りの幅全てを使う、という指定はどうすればいいでしょうか?
高さもやはりウインドウサイズにあわせるようにしたいです。
また、左2つの領域は固定したまま、3つめの領域のみスクロールができるようしたいです。

現在下記で試していますが、うまくいきません。
お分かりになる方、知恵をお貸しくださいo(_ _*o)


【HTML側】

<div id="left">1</div>
<div id="center">2</div>
<div id="right">3</div>


【CSS側】

html,body{
  height:100%;
  width:100%;
      }
div#left{
  width:150px;
  height:100%;
  float:left;
}
div#center{
  width:160px;
  height:100%;
  float:left;
}
div#right{
  width:100%;
  height:100%;
  float:left;
}

divタグで生成された3つの領域を横に並べたいのですが、
左2つは幅をピクセル指定で固定し、3つめをウインドウサイズに合わせて残りの幅全てを使う、という指定はどうすればいいでしょうか?
高さもやはりウインドウサイズにあわせるようにしたいです。
また、左2つの領域は固定したまま、3つめの領域のみスクロールができるようしたいです。

現在下記で試していますが、うまくいきません。
お分かりになる方、知恵をお貸しくださいo(_ _*o)


【HTML側】

<div id="left">1</div>
<div id="center">2</...続きを読む

Aベストアンサー

できません。
 そうなるとHTMLではなくてPDFなどの他の仕様の範疇です。
 HTMLは、元来さまざまなプラットホームで利用できるように考案されたものです。すなわちさまざまな解像度、ウィンドウ幅、点字端末、読み上げブラウザ・・検索エンジンも・・
 HTMLの基本中の基本です
【引用】____________ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )]より

 それはともかく、HTMLはワープロやDTP ( http://ja.wikipedia.org/wiki/DTP )のようなデザインのためではありません。これを最も間違える部分です。

 ですのでマークアップは(インデントがわかりやすいようにタブを全角スペースで置き換えてあります)
<div class="section">
 <h1>サンプル</h1>
 <div class="body">
  <h2>見出し</h2>
  <p>段落</p>
  <p>段落</p>
 </div>
 <div class="nav">
  <ul>
   <li>あいう</li>
   <li>えおか</li>
  </ul>
 </div>
 <div class="contentTable">
  <h2>目次</h2>
  <ol>
   <li>きくけ</li>
   <li>こさし</li>
  </ol>
 <div>
</div>
</body>


とかになるはずですね。HTMLは文書構造を示すもの。CSSはプレゼンテーションを示すものという明確な区別があります。id=leftなんて、しないこと。先で右に配置したくなったらどうするの・・

 さて、div要素の幅はウィンドウ幅を認識できますが、高さはウィンドウの高さを認識しません。IEの互換モードにすれば、IEのバグ(仕様?)でウィンドウ高さを使えます。そのときdivの親要素がbodyなので、body{height:100%;}が必要。
 ★ただしこの方法は非推奨です。他のブラウザではうまくいきません。

 ディスプレイ幅が小さなブラウザ、あるいは目が悪くてフォントを拡大して見られる訪問者のことも考えれば高さは指定すべきではありません。

 よって幅だけを指定する方法を上記HTMLでしたら
html,body{margin:0;padding:0;}
div.section{width:100%;position:relative;background-color:gray;padding-left:320px;}
div.section div.nav,
div.section div.contentTable{position:absolute;top:0px;height:1000px;}
div.section div.nav{left:0px;width:150px;background-color:green;}
div.section div.contentTable{left:150px;width:160px;background-color:blue;}
でよい。

 floatは、ここで使うべきじゃありません。あくまで文章中の画像の周囲に本文を回りこませるためや(小さなブロックをウィンドウ幅に合わせて並べるとか)に使うものです。もし本文でfkoatの必要がでてきたとき、clearできなくなっちゃう。


 

できません。
 そうなるとHTMLではなくてPDFなどの他の仕様の範疇です。
 HTMLは、元来さまざまなプラットホームで利用できるように考案されたものです。すなわちさまざまな解像度、ウィンドウ幅、点字端末、読み上げブラウザ・・検索エンジンも・・
 HTMLの基本中の基本です
【引用】____________ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機...続きを読む

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>

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

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

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

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

Aベストアンサー

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

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

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)はこれら以外にも
いろいろな設定方法があります。

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

QHTMLファイル同士での値渡し

困っています。

HTMLファイルからHTMLファイルへ移動するときに、
HTMLファイル1でJavaScript で算出された値を
HTMLファイル2へ渡して使用したいのです。

showModalDialogだとダイアログにしか渡せないし・・・。
このように、値をそのまま次のページに渡すための方法を教えてください。
お願いします。

Aベストアンサー

すみません。うっかりしてました。

document.write(FORM[v1]);
では、v1を変数と認識してしまうので、エラーになってしまいますね。

document.write(FORM.v1);  // 「FORM.v1」です
あるいは
document.write(FORM["v1"]);
としてください。

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化したほうが、可読性が高くなると
思います。

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

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

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

Aベストアンサー

<select style="width: 200px">


人気Q&Aランキング