【５００Ｐ】※優良な回答
ビルダー12でホームページ作成をしています。
以下の点がわからなくて壁にぶつかっています。
①世の中には色々な大きさのホームページがありますが皆さんはどんな基準でページの大きさ（横幅）
を決めているのでしょうか？規格とかあるんですか？（※画像の①部分参照）
②以下に例をあげたサイトは両脇に空白があり、お気に入りを出して、領域を右へズズっと引っ張った時に
左の余白部分は右へ行くほど小さくなっていきます。ビルダー12ではこういうしくみのページ
を作るのは無理でしょうか？もしビルダーでこういったページを作るにはどうやったらいいでしょうか？
http://weather.yahoo.co.jp/weather/jp/13/4410.html
http://www.osake-shopping.com/
スタイルシート等を使用する関係でビルダーでは無理な場合はビルダーを使った邪道な方法でも構いません。
ちなみに私の作っているサイトはフレームを使って製作していますのでそれに合わせた回答だと助かります。
※ 画像は私の作っているフレームを使用したビルダー12で製作しているホームページです。
No.2
379
52
100pt
① 規格はありませんが、画面解像度の規格が参考になります。
http://ja.wikipedia.org/wiki/%E7%94%BB%E9%9D%A2%E8%A7%A3%E5%83%8...
利用者の多い解像度で、全体が表示されるサイズにするのが定石です。
以前は800px前後のサイトが主流でしたが、最近はモニタ解像度の向上に従って、横幅の広いものもでてきました。
http://lpclips.net/2008/04/post_58.html
960px前後も増えてきていますが、全ての人がブラウザを最大化しているとは限りません。
大体ですが、750～960pxあたりで作っておくのが無難だとは思います。
②フレームを使用している場合は少し大変かもしれません。
一般的なサイトでCSSを使った方法を書いておきます。
まず、HTMLの
<html> <head> (省略) </head> <body> (内容> </body> </html>
の内容の部分を
288
284
<html>
<head>
(省略)
</head>
<body>
<div id="box1">
<div id="box2">
(内容>
</div>
</div>
</body>
</html>
のようにし、次のようなCSSを追加します。
div#box1 {
text-align: center;
}
div#box2 {
width: 800px;
margin : auto;
}
以上で中央寄せになります。style要素してHTML中に埋め込む場合、HTMLの全体は大体次のような感じになります。
<html>
<head>
(省略)
<style type="text/css">
div#box1 {
text-align: center;
}
div#box2 {
width: 800px;
margin : auto;
text-align: left;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
(内容>
</div>
</div>
</body>
</html>
No.1
1314393
5pt
幅の基準は、Web を見る人の対象をどの程度考慮するかによると思います。
最近は大きなモニタを使用する人も増えていますが、横幅が1024を基準とすれば、大多数の人は画面で全体を見れると思います。
http://www.akiyan.com/blog/archives/2006/02/mixi800px.html
では800pxを推奨していますが、デザイン上横幅がこれではきついというように感じるのであれば、個人的には900px前後まで
ひろげてもよいと思います。
２に関しては、
Yahoo のサンプルではコンテンツ全体を
の固定幅内で表示し、これを中央に配置することで実現しているようです。なのでブラウザの横幅が変化した場合、div の幅を除いたサイズが左右に均等に割り振られます。
少し面倒ですが、Web のソースを表示し、そこにある css（もしくはそこで読み込んでいるcssファイル）は閲覧可能ですから、
それらをたどれば、どのような仕組みで実現しているかある程度知ることができます。
No.2
37952
ここでベストアンサー
100pt
① 規格はありませんが、画面解像度の規格が参考になります。
http://ja.wikipedia.org/wiki/%E7%94%BB%E9%9D%A2%E8%A7%A3%E5%83%8...
利用者の多い解像度で、全体が表示されるサイズにするのが定石です。
以前は800px前後のサイトが主流でしたが、最近はモニタ解像度の向上に従って、横幅の広いものもでてきました。
http://lpclips.net/2008/04/post_58.html
960px前後も増えてきていますが、全ての人がブラウザを最大化しているとは限りません。
大体ですが、750～960pxあたりで作っておくのが無難だとは思います。
②フレームを使用している場合は少し大変かもしれません。
一般的なサイトでCSSを使った方法を書いておきます。
まず、HTMLの
<html> <head> (省略) </head> <body> (内容> </body> </html>
の内容の部分を
<html>
<head>
(省略)
</head>
<body>
<div id="box1">
<div id="box2">
(内容>
</div>
</div>
</body>
</html>
のようにし、次のようなCSSを追加します。
div#box1 {
text-align: center;
}
div#box2 {
width: 800px;
margin : auto;
}
以上で中央寄せになります。style要素してHTML中に埋め込む場合、HTMLの全体は大体次のような感じになります。
<html>
<head>
(省略)
<style type="text/css">
div#box1 {
text-align: center;
}
div#box2 {
width: 800px;
margin : auto;
text-align: left;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
(内容>
</div>
</div>
</body>
</html>
一般的にプロの方々は質問のような仕様のサイトを作る時には回答に書いてもらったような
ものをタグうちで製作してるんでしょうか？それともドリームウィーバーのようなツールで
作ってるんでしょうか？
タグをいじらないで、尚且つビルダーで質問したようなサイトをつくるのは難しいですかねぇ…
ていうか無理？？
No.3
13110
8pt
①
大部分の環境で横スクロールが発生しないことが基準です。
基本的にはXGA(1024x768)を前提にすればよいですが、超小型PCやPSPなどで見やすくするためには640x480前提である必要があります。
具体的な数字は大体700px～1000pxくらいが標準ですが、本文の幅＋サイドバーの幅で逆算するとよいです。
（思いのほかサイドバーが大きすぎることがある）
②
・CSSでセンタリングしたいブロック要素のmargin-left、margin-rightをautoに設定する。
・同じくCSSで、親要素のtext-alignをcenter、センタリングしたい要素のtext-alignをleftに設定する。
http://www.mozilla.gr.jp/standards/webtips0004.html
・参考までに基本的な解説を行っているサイトをいくつか貼っておきます。
No.4
2293
5pt
今売っている「
プロとして恥ずかしくないWEBデザインの大原則 改訂版 (インプレスムック)
」のp.6にディスプレイ解像度の説明があります。WEBページの幅は最も普及しているディスプレイ解像度に合わせるべきです。現時点では、一世代前のXGA(1024×768)を最も多いので、WEBページの幅は1024ピクセル以内にするべきです。1024ピクセルにしてしまうと、XGAディスプレイの全画面表示になります。全画面表示はあまり好ましくないので、960ピクセル程度が適当だと思われます。
No.5
34928
5pt
私が作り方の参考の一つにしているサイトさんでは、横は600ピクセル以下を推奨しています。
http://web8341.info/yobi/visiter.htm
自分もサイトにアクセス解析をつけていますが、今現在でも800×600の環境からアクセスしている方がいるので、
もし固定するのであれば、横幅は600ピクセル程度がよいかもしれません。
（中にはどんなブラウザを使ったのかわかりませんが、240×320というモニターからアクセスされている方もいるようです。
たぶん携帯電話からだと思いますが、念のため自分の携帯電話から、
携帯電話用に作ったページではなく、PC用に作ったページにアクセスしても、
立てスクロールは多くなりますが、使用可能でした。）
なお、自分の場合は、横幅は（固定では）指定せず、スタイルシートで％で指定しています。
横幅を固定しない、また一つのページの大きさを10kb以下におさえると、
情報が必要になった時に（PCが手元になくて困っても、）携帯電話から
アクセスできると便利ですよ。
（たまに出先で情報ツールとして使っています。）
こちらのサイトさんではいろいろと悪い見本も書かれているので、参考になるかと思います。
http://web8341.info/index.html
本当はフレームは使わないほうがよいのですが、
もしフレームを使うのであれば、それぞれ％表示にされたほうがよいかもしれませんね。
（実は以前フレームを使っていて失敗したことがあり、
左サイドメニューを用いた2カラムのページに変更しました。）
なお、以下のページも参考になりそうなことが書いてあるのでリンクを貼っておきます。
http://www2.nict.go.jp/v/v413/103/accessibility/minna/
フレームに関することは
http://www2.nict.go.jp/v/v413/103/accessibility/minna/point8.htm...
に書いてあります。
参考になれば幸いです。
No.6
37952
5pt
>一般的にプロの方々は質問のような仕様のサイトを作る時には回答に書いてもらったような
>ものをタグうちで製作してるんでしょうか？それともドリームウィーバーのようなツールで
>作ってるんでしょうか？
普通はそうでしょう。
Dreamweaverは使っても、仕様とか関係なく、基本はタグ打ちです。
>タグをいじらないで、尚且つビルダーで質問したようなサイトをつくるのは難しいですかねぇ…
>ていうか無理？？
ビルダーでもCSSを扱う機能はありますよね？
あとはtaka560421さん次第でしょう。
No.7
13110
10pt
通常配置とスタイルシートをタグ打ちで作り、文章をデザイナで記述するものだと思います。
プロの人たちはデザイナを使っているときでもどんなタグが出力されているか脳内で計算しています。
そもそもHTMLというのはWordの文書のようにどんな環境でも同じように表示されるものではなくある程度環境依存なので、
デザイナとブラウザでの表示が一致するとは限らず、
なるべく単純かつ規格通りのHTMLにすることで環境の変化をカバーする必要があります。
しかしながら、デザイナだけで作業していると表示とタグの一致が追いづらくなるため環境依存なHTMLになりやすいのです。
結論として、デザイナは機械的に作成を補助するだけで、まともなものを作るにはある程度のタグの知識が必要だということです。
3
4
2
一般的にプロの方々は質問のような仕様のサイトを作る時には回答に書いてもらったような
ものをタグうちで製作してるんでしょうか？それともドリームウィーバーのようなツールで
作ってるんでしょうか？
タグをいじらないで、尚且つビルダーで質問したようなサイトをつくるのは難しいですかねぇ…
ていうか無理？？