ＨＴＭＬでページの幅を設定したい。

質問

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

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

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

回答No.6

noname#60878

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

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

お礼

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

回答No.5

cyokokichi

<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のトップページのように・・・

お礼

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

回答No.4

koutarou504

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

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

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

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

お礼

ありがとうございます。まだまだ知らないことがいいっぱいですね～私（＞＜）勉強したいと思います！

回答No.3

noname#65286

Yahoo!のトップページはテーブルで幅を710pxにして中央に表示しています。
<center>
<TABLE width="710"><TR><TD>・・・</TD></TR></TABLE>
</center>

IEなら［表示］［ソースの表示］でソースを見ることができます

お礼

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

回答No.2

nyonyon

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

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

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

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

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

参考URL：

http://www.tagindex.com/hp_guide/table_layout1/01.html

お礼

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

回答No.1

aatw

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

お礼

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