人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

【500P】※優良な回答

ビルダー12でホームページ作成をしています。

以下の点がわからなくて壁にぶつかっています。

?世の中には色々な大きさのホームページがありますが皆さんはどんな基準でページの大きさ(横幅)
を決めているのでしょうか?規格とかあるんですか?(※画像の?部分参照)

?以下に例をあげたサイトは両脇に空白があり、お気に入りを出して、領域を右へズズっと引っ張った時に
左の余白部分は右へ行くほど小さくなっていきます。ビルダー12ではこういうしくみのページ
を作るのは無理でしょうか?もしビルダーでこういったページを作るにはどうやったらいいでしょうか?

http://weather.yahoo.co.jp/weather/jp/13/4410.html

http://www.osake-shopping.com/

スタイルシート等を使用する関係でビルダーでは無理な場合はビルダーを使った邪道な方法でも構いません。

ちなみに私の作っているサイトはフレームを使って製作していますのでそれに合わせた回答だと助かります。


※ 画像は私の作っているフレームを使用したビルダー12で製作しているホームページです。


1210908454
●拡大する

●質問者: nekodaisuki
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:お気に入り サイト スタイルシート ズズ ビル
○ 状態 :終了
└ 回答数 : 8/8件

▽最新の回答へ

1 ● Mook
●5ポイント

幅の基準は、Web を見る人の対象をどの程度考慮するかによると思います。

最近は大きなモニタを使用する人も増えていますが、横幅が1024を基準とすれば、大多数の人は画面で全体を見れると思います。

http://www.akiyan.com/blog/archives/2006/02/mixi800px.html

では800pxを推奨していますが、デザイン上横幅がこれではきついというように感じるのであれば、個人的には900px前後まで

ひろげてもよいと思います。


2に関しては、

Yahoo のサンプルではコンテンツ全体を

の固定幅内で表示し、これを中央に配置することで実現しているようです。

なのでブラウザの横幅が変化した場合、div の幅を除いたサイズが左右に均等に割り振られます。


少し面倒ですが、Web のソースを表示し、そこにある css(もしくはそこで読み込んでいるcssファイル)は閲覧可能ですから、

それらをたどれば、どのような仕組みで実現しているかある程度知ることができます。


2 ● wizemperor
●100ポイント ベストアンサー

? 規格はありませんが、画面解像度の規格が参考になります。


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>
◎質問者からの返答

一般的にプロの方々は質問のような仕様のサイトを作る時には回答に書いてもらったような

ものをタグうちで製作してるんでしょうか?それともドリームウィーバーのようなツールで

作ってるんでしょうか?

タグをいじらないで、尚且つビルダーで質問したようなサイトをつくるのは難しいですかねぇ…

ていうか無理??


3 ● hirotow
●8ポイント

?

大部分の環境で横スクロールが発生しないことが基準です。

基本的には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


・参考までに基本的な解説を行っているサイトをいくつか貼っておきます。

http://www.tohoho-web.com/

http://www.htmq.com/

http://www.marguerite.to/Nihongo/

http://www.mozilla.gr.jp/standards/


4 ● あひる
●5ポイント

今売っている「

プロとして恥ずかしくないWEBデザインの大原則 改訂版 (インプレスムック)

プロとして恥ずかしくないWEBデザインの大原則 改訂版 (インプレスムック)

  • 出版社/メーカー: MdN
  • メディア: 大型本

」のp.6にディスプレイ解像度の説明があります。WEBページの幅は最も普及しているディスプレイ解像度に合わせるべきです。現時点では、一世代前のXGA(1024×768)を最も多いので、WEBページの幅は1024ピクセル以内にするべきです。1024ピクセルにしてしまうと、XGAディスプレイの全画面表示になります。全画面表示はあまり好ましくないので、960ピクセル程度が適当だと思われます。


5 ● toku4sr4agent
●5ポイント

私が作り方の参考の一つにしているサイトさんでは、横は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...

に書いてあります。


参考になれば幸いです。


1-5件表示/8件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ