800*600の画面でもちゃんと見える横幅

質問

ただ今新しいＨＰを製作中です。
参考がてらいろんな大手企業さんのＨＰを見回ってると大概
内容物が画面の真ん中（例：ホンダ技研）だったり左端（例：日産自動車）に寄っていて
ブラウザを小さくしても端が切れることなく読むことができるようになっています。
これはどうやっているのか教えて下さい＞＜

あと、ウェブ定規で図ったところ各企業で幅が違うのですが（660px～720pxぐらいが多い）
この数字はどういった意図で決定されるのでしょうか。

すみませんがよろしくお願いいたします。

回答No.3

noname#60878 · ベストアンサー

800x600を想定するならば、800x600pixで作れば良いのです。実際には、窓の枠がありますから、少し狭くなります。
「最大化してください」と書かれているページもむありますが、ブラウザによって画面の有効面積は違います。横に「お気に入り」とか出している人もいます。

画像中心の場合は、上記の点を考慮して、画像サイズを中心にレイアウトすることになるでしょう。中央に寄せて左右に均等に余白を作るには、スタイル使うのが本筋です。緻密に良く考えて作れれば良いのですが。実際には昔ながらのテーブル使ったレイアウトの方が多少詰めが甘くても崩れにくいです。ブラウザによる違いも少ないですし。

文字中心であれば、画面幅に合せて伸び縮みするような工夫が必要でしょう。No2の方のように、％指定するのが有効です。
文字サイズは、ユーザ側で変えられます。一定の幅にぴったりする文字数は違ってきます。スタイル等使って文字サイズを固定する方法もありますが、mozillaなどこの指示を無視する設定ができるブラウザもあります。小さな文字を指定されると困る人もいるからです。翻訳サイトやふりがなソフトなど使われると文字数自体が変ります。

絶対にやって欲しくないのは・・・　強制的に窓のサイズを変えるサイト。画面の狭いパソコンにとっては、ブラクラ同然です。

参考URL：

http://www.suita.ed.jp/edc/bunsho/hp/make_hp01.html

お礼

基本はスタイルシートで設定は%指定がいいんですね。
詳しく教えていただいてありがとうございました。

回答No.2

sr-agent

そのページをローカルに保存し、スタイルシートを見てみてはいかがでしょうか？
（ファイル→名前を付けて保存でできると思います。）
ページ全体の幅を指定せず、
スタイルシートで余白のみを指定しているところもあるかと思います。
（ブラウザを小さくしても、それなりに小さくなってくれます。）

ちなみに自分の場合は、
body {
margin: 2% 10% 2% 10%;
}
と余白を指定し、ページ全体の幅は指定していません。

スタイルシートを使わず直接タグに書き込む方法もあると思いますが、
これから新しいサイトを作る場合には、スタイルシートにされたほうがよいと思います。（文法的には・・・）

お礼

スタイルシートの部分を見ればよかったのですね。
具体的な設定を教えていただき有難うございます。

回答No.1

moon_night

＞ブラウザを小さくしても端が切れることなく読むことができるようになっています。

ソースを読みましょう・・・
大概 800pxを基準として、それ以内を目処に作っていると思います。

＞各企業で幅が違うのですが（660px～720pxぐらいが多い）
＞この数字はどういった意図で決定されるのでしょうか。

作った人のデザインとかコンセプトによって変わります。
いまどき800の画面なんかほとんどいないよ
と思っているのならば1024を基準として作る場合もありますし。

どんな環境でも見れるようにするのでしたら widthを%で指定したほうがいいような気もします。
（デザインによってできなかったりするけども）

大体横幅が750pxでやっていけば問題ないと思います。

お礼

ソースを見てもよくわからなかったのでこちらに質問しました。
回答ありがとうございました。