はじめての親子ハイキングに挑戦!! >>

こんばんわ。
HP作り初級のものです。現在自分の所属しているサークルのHPを作るべく頑張っています。HPビルダーなどは使わずに勉強をかねてHTMLを使って作っています。スタイルシートは使っていません。

そこで質問なんですが、テーブルの幅などは調整できたのですが、ページ全体の幅を固定する仕方がわかりません。例えるならばヤフーTOPページのような感じです。

本やネットでも探してみたのですが自分ではみつけられませんでした。ぜひお力をお貸しくださいm(__)m
よろしくお願い致します。

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

A 回答 (6件)

正直、画面の幅を設定するようなことは、やめてほしいです。


今、私が使っている画面の横幅は800pixです。モバイルしているパソの横幅は640pixです。世間の大半の人は1024pixらしいですが、私のようにそれよりも狭い人もいます。
スクリプト使えば、指定した大きさに窓を広げたり、指定した大きさで窓を開いたり簡単に(敢えてやり方はここには書きません)できますが、そうして画面幅よりも大きな窓を開かれた場合、どうなるか。スクロールバーが出ていて、リサイズ可能ならば多少はまし(それでも見難い)ですが、そうでなければ操作不能。そういったページがしつこいエロ広告など嫌がらせのように流行しました。最近はブラウザ側に指定を無効にできる機能が付くようになりましたけど。

テーブルの大きさをピクセルで固定するのも、できたらやめて欲しいですね。いちいちスクロールして見るのはしんどいです。また、これによって文字サイズ変えたりした時に文字がはみ出たり重なったりするページもうっとおしいです。
文字の横幅は、ブラウザに設定している字体によっても変りますし、文字サイズの指定を無効にするブラウザもあります。
レイアウトに関しては、翻訳やふりがな等も考慮して欲しい点ですね。これらを使用すると、文字数も変化します。
    • good
    • 2
この回答へのお礼

とても勉強になりました。色んな人がいろんな状況でみているという事を考慮しないといけないですね。ありがとうございました。

お礼日時:2005/12/02 16:28

<table align="center" width="**px">


<tr><td>
内容
</td></tr>
</table>
**をお好みの数字にして内容の幅が固定されます。
align="center"で表が中央に表示されるから結果的に内容が中央になります。
スタイルシートを使わないならこれでいいのではないでしょうか?
後はテーブル内を適当に区切ればレイアウトの完成です。

ページ表示速度とかW3C云々は別の話しでご質問にお答えしただけですのであらかじめご了承ください。

もし、どうしてもこの際CSSに挑戦しようと思うからCSSでのやり方も書け!!と仰られるなら。(^^;)
headの中に下のようにかいてみてください。
-----------------------------------
<style type="text/css">
<!--
body {width:700px;margin:auto;}
-->
</style>
-----------------------------------
たったこれを書いただけで内容の両脇に同じ位の空白ができて内容の幅が固定されてしまうことでしょう。
まるでYahooのトップページのように・・・
    • good
    • 1
この回答へのお礼

勉強になりました。ありがとうございます!一度やってみますね^^

お礼日時:2005/12/02 16:24

まずは考え方から。


ページの幅とは何でしょう?。
ブラウザというツールで見るとして、大外(枠)はウィンドウですね・・・。
このウィンドウは大きさを自由に変えられてしまいます。とすると、その中のページの幅にどの様な意味があるというか何を求めるのでしょうか?
(それにより、無意味とかよした方が良いとしたり、それなりの対処法が出てきたりと違ってくるほど大事な事です。)
ヤフーのページもブラウザ側の設定次第で幅が伸びます。

次に技術的な点から。
これは目的別になります。
枠を画像みたいに完全にに固定して特定の条件で閲覧ときに最善の望む状況にしたい。想定外の閲覧は最低限見れれば良いという考えの場合は、
全体をテーブルで囲って、今迄 BODY 要素の中に書いていた物をまるごとセル (TD要素) の中に入れる。
あとはテーブルの幅の指定は体験済みなのでその通りに行えば良し・・・。

上記と異なり文字と絵が混在している為に IE で 「文字のサイズ」を変えられるとバランスが崩れるのを避けたいから横幅をという場合は、これもここの配置をテーブルを用いるという方法がよくとられます。
また、その状況から単純に考えると文字のサイズ指定をしてブラウザに文字のサイズを変更させないという対処方法もありますが、非常に不評となります・・・。

将来的には CSS を用いるといろいろと幅が目的にあわせて指定できると思います。
(HTML あっての CSS なので、まずは HTML から)
CSS が無効の場合の配慮も、そもそも CSS が無効ならデザインへの配慮は不要と思えるのでそれほど大変ではないでしょう。
(というか、適切な HTML を書く重みがより増しますが・・・。)
    • good
    • 0
この回答へのお礼

ありがとうございます。まだまだ知らないことがいいっぱいですね~私(><)勉強したいと思います!

お礼日時:2005/12/02 16:20

Yahoo!のトップページはテーブルで幅を710pxにして中央に表示しています。


<center>
<TABLE width="710"><TR><TD>・・・</TD></TR></TABLE>
</center>

IEなら[表示][ソースの表示]でソースを見ることができます
    • good
    • 0
この回答へのお礼

ありがとうございます!ヤフーのはそうなってるんですね~。一度見てみます!!

お礼日時:2005/12/02 16:18

HPは紙に印刷するものとは違い、見る側の環境によって違ってきます。


画面解像度(画面サイズ)が800×600の人もいれば、1024×768の方もおり、それ以上も以下の人もいるわけです。
解像度が違えば当然画面に表示できる領域も違います。
見た目の違いはビルダーの解説サイトですが、こちらが分かりやすいかと思います。
http://hpb.cool.ne.jp/hpbuilder/rule4.htm

ですので、HPにおいてページ幅という概念はありません。
例に出されているYahooの場合は、テーブルを使ってページレイアウトをしており、
そのテーブル幅を800×600の画面でちょうど横一杯に表示されるように設定されています。

ですので、HPのレイアウトをテーブルやスタイルシートのボックスなどを使って、幅を設定するしかありません。

他、もう一つ非推奨の方法としては、表示するウィンドウの幅をJavaScriptで固定してしまうというものもあります。
しかし、こちらは嫌われる手法である事と、ブラウザの設定でJavaScriptをオフにしていたり、
また、タブブラウザを使っている方には無効となりますので、お勧めできない方法になります。

ページレイアウトについては、こちらもご参考になるかと思います。
http://www.tagindex.com/hp_guide/table_layout1/0 …

参考URL:http://www.tagindex.com/hp_guide/table_layout1/0 …
    • good
    • 0
この回答へのお礼

とても勉強になりました。ありがとうございます!

お礼日時:2005/12/02 16:17

webpageは全世界の色々な環境下で閲覧されるものです。


パソコンの表示に合わせてレイアウトが伸縮するのがルールです。
ディスプレイの横を1200ピクセルにしている人も
800ピクセル程度にしている人も
画面が崩れずにほぼ同一のレイアウトになるには
幅が固定されているよりも
自由に変化させるほうがいいのです。
もちろん狭い表示の人の画面では
文字が勝手に改行されて送られてしまったりします
私は1000ピクセルの横幅できれいに見えるように
レイアウトしています。
14インチのディスプレイと21インチのディスプレイでも
ほぼ同一のレイアウトにできています。
固定してしまうと21インチで1500ピクセルなどで表示させていると
右端が余った状態で表示される可能性があります。
    • good
    • 0
この回答へのお礼

とても勉強になりました(°.°;ありがとうございます!

お礼日時:2005/12/02 16:16

この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...続きを読む

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...続きを読む

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の方も修正する方法でもよけ...続きを読む

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

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

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

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

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

Aベストアンサー

<select style="width: 200px">

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

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

Aベストアンサー

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

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複数のボタンを等間隔に、かつ中央に配置する

ホームページで、ボタンを横に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&Aを見た人がよく見るQ&A

人気Q&Aランキング