ディスプレイの解像度について。

Question

ホームページを作成したいのですが、
ディスプレイの解像度により、デザインが崩れてしまいます。
この誤差は、どうしたら良いのでしょうか？

最近のホームページは、画面がブラウザの「中央寄せ」または「左寄せ」
になっていると思いますが、やはりこれは、解像度の高いディスプレイで
見ている人への対応なのでしょうか？
あと、「横フレーム」の機能を使っていない気がするのですが、これも、
解像度と関係があるのでしょうか。

とても、困っています。
ご返答宜しくお願い致します。

ikeuchi · Accepted Answer

私の場合、横はできるだけ８００に収まるようにしています。どうしてもデザインを崩したくないときには、のタグを使うか、目立たないように横８００のイメージファイルを貼ることにしています。狭い画面で見ると、横スクロールして見づらいんですが、我慢してもらうことにしています。もう一つ、ブラウザの文字サイズの関係でデザインが崩れてしまうことが有ります。これも、どうしてもの場合には、スタイルシートの定義で文字の大きさを定義することにしています。　　・・・・・・こんな感じです。ただし、これらは見てくれる人の画面やブラウザの機能を有る程度限定して、それ以外の人に我慢してもらうことになります。嫌う人もいますね。横フレーム・・・、横に長くフレームを定義することでしょうか？あまり横に長くすると、横スクロールしないと見えなくなって見づらいですよ。見てくれる人のことを考えると、使わない方が良いような気がします。

noname#25358 · Answer

どうしようもありません(^_^;　製作者側がそういうことを意識して、「崩れても問題ない」デザインにする必要があります。

　基本的には、「画面の横幅が６４０ピクセル未満のときに正しく表示される」ように設計すればＯＫです。これは、Ｗｉｎｄｏｗｓが動作する最低限の横幅が６４０ピクセルだからです。（最近はモバイル機器が普及してきてそうでもなくなってしまいましたが）
　最近のパソコンは最低でも８００×６００はあるので、比較的新しめのパソコンでの閲覧を前提とするならば、横幅が８００ピクセルでもいいでしょう。

　文字を中央寄せや左寄せ、あるいは横並びのフレームに関しては、これは解像度とは関係ないように思われます。横フレームって、割と今でもありますよ。問題になるのは割と「画面の横幅」ですから。

　ブラウザの大きさは人によってまちまちです。大きな画面サイズいっぱいに作って、ちょっとでも小さな画面で見ている人が困るようなデザインは、「いいデザイン」とは言えません（あまりにも小さすぎる画面はさすがに閲覧者側の責任ですが）。

　「見やすい」デザインとは、ある程度画面サイズが変わっても、柔軟に対処できるデザインだと俺は思います。もちろん、その「ある程度」というのがどの程度なのか、という指標を、自分の中で作っておく必要はあると思いますが。

　もっとも、だからって「画面を単純化すればいい。テーブル不可、画像不可、音楽も不可、文字の大きさは大きくとって、小さい文字は不可だああ！」というような『不可だらけ』の持論は、ただの逃げの口実だと思いますけどね(^_^;

noname#5824 · Answer

仕事でWebデザインをしていますが、
暗黙の了解として800*600の画面でおさまるように作ります。
それより小さい画面の人はかわいそうなのですが…

デザインが崩れないようにするためには、
テーブルタグを使用します。
例えば、画面いっぱいに横サイズ固定のテーブルを作ります。
その中でデザインをしていけば、
どんなにブラウザが小さくても、大きくてもデザインは崩れません。
ただ、デフォルトでは左寄りになってカッコ悪いので、
そのテーブル全体を中央寄せにすると、
大体どの環境でも同じ様に見えます。

横フレームというのは、横にスクロールするフレームですね。
これは解像度も確かに理由としてあるのですが、
なんといっても、スクロールをしにくいからです。
最近ではスクロールマウスもあるのですが、
ほとんどのスクロールマウスは横にはスクロールできません。
いちいちバーをドラッグしないといけないので、
あまり好まれないですね。

dany · Answer

私もwebでメシ喰ってる人間ですが横620に収まるようにしています。ノートの人が観れなくて悲しいですから。といってもそれを言い出したら横320のZAURUSはどうするとかいう話になりますが。^^; jubakoさんが書いたように固定テーブルを用いるのが一番いいです。といっても

　～内容～

全体を囲ってしまうと表示が遅くなる（ブラウザによってはTABLE内を全部読み込み終わらないと表示しない）ので、ヘッダ部分やフッタ部分、本文部分でも分割できるところはTABLEを分割しましょう。スタイルシートで文字サイズを絶対値指定すると、目の悪い人が見にくくなるので、「文字を文字としてではなくデザインの要素として使う」という意図でない限り使わないのが無難でしょう。あとはメニューとか。「横フレーム」って私は「左右分割」のことだと思ったんですが「上下」ですか？　どちらもよく見かけますよ。左右に関して言えば、スクロールバーが出現して描画範囲が狭くなるので私は使いません。「人からリンクしてもらいたいページ」を考えて作っているのでフレームは使えないんですよ。^^;　「このページにこんな情報あるぞ！」ってリンクされても、フレームがあるから該当ページじゃなくトップページになってたりね。

dany · Answer

内側のTABLEを％で指定してるとしても、現在収まっているセル（TD）に
対する％だからはみ出るってことはないはずです。
もしはみ出るのだとしたら、画像に％指定をしてないですか？

ブラウザにもよりますが、<img ～ width="100%" ～>とかやると
セルではなくブラウザの幅に対する％になります。

TABLEが「width="620"」、中の画像が「width="100%"」になってる時
ブラウザが幅800とかになってたら画像の引き延ばしによってTABLEも800に
なります。

左右フレームですが、％指定にせずに「120,*」とかにすればそんなに
崩れたりはしないと思います。あ、スクロールバーで隠れる分（
18pixelくらい）の余白を確保しておきましょう。

ディスプレイの解像度について。

どうしようもありません(^_^; 製作者側がそういうことを意識して、「崩れても問題ない」デザインにする必要があります。

私の場合、横はできるだけ８００に収まるようにしています。

仕事でWebデザインをしていますが、

この回答への補足

私もwebでメシ喰ってる人間ですが横620に収まるようにしています。

この回答への補足

内側のTABLEを％で指定してるとしても、現在収まっているセル（TD）に

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

　どうしようもありません(^_^;　製作者側がそういうことを意識して、「崩れても問題ない」デザインにする必要があります。