- ベストアンサー
ディスプレイの解像度について。
ホームページを作成したいのですが、 ディスプレイの解像度により、デザインが崩れてしまいます。 この誤差は、どうしたら良いのでしょうか？ 最近のホームページは、画面がブラウザの「中央寄せ」または「左寄せ」 になっていると思いますが、やはりこれは、解像度の高いディスプレイで 見ている人への対応なのでしょうか？ あと、「横フレーム」の機能を使っていない気がするのですが、これも、 解像度と関係があるのでしょうか。 とても、困っています。 ご返答宜しくお願い致します。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
私の場合、横はできるだけ８００に収まるようにしています。どうしてもデザインを崩したくないときには、<nobr>のタグを使うか、目立たないように横８００のイメージファイルを貼ることにしています。 狭い画面で見ると、横スクロールして見づらいんですが、我慢してもらうことにしています。 もう一つ、ブラウザの文字サイズの関係でデザインが崩れてしまうことが有ります。 これも、どうしてもの場合には、スタイルシートの定義で文字の大きさを定義することにしています。 <STYLE TYPE="text/css"> <!-- .pt9 {font-size=9pt;} .pt10 {font-size=10.5pt;} .pt12 {font-size=12pt;} //--> </STYLE> ・・・ <font class="pt10">・・・ こんな感じです。ただし、これらは見てくれる人の画面やブラウザの機能を有る程度限定して、それ以外の人に我慢してもらうことになります。嫌う人もいますね。 横フレーム・・・、横に長くフレームを定義することでしょうか？ あまり横に長くすると、横スクロールしないと見えなくなって見づらいですよ。見てくれる人のことを考えると、使わない方が良いような気がします。
その他の回答 (4)
- dany
- ベストアンサー率35% (27/77)
内側のTABLEを％で指定してるとしても、現在収まっているセル（TD）に 対する％だからはみ出るってことはないはずです。 もしはみ出るのだとしたら、画像に％指定をしてないですか？ ブラウザにもよりますが、<img ～ width="100%" ～>とかやると セルではなくブラウザの幅に対する％になります。 TABLEが「width="620"」、中の画像が「width="100%"」になってる時 ブラウザが幅800とかになってたら画像の引き延ばしによってTABLEも800に なります。 左右フレームですが、％指定にせずに「120,*」とかにすればそんなに 崩れたりはしないと思います。あ、スクロールバーで隠れる分（ 18pixelくらい）の余白を確保しておきましょう。
お礼
詳しいご回答、大変に有難うございました！ イメージのWIDTH指定、フレームの指定の方法、知りませんでした。 挑戦してみます！
- dany
- ベストアンサー率35% (27/77)
私もwebでメシ喰ってる人間ですが横620に収まるようにしています。 ノートの人が観れなくて悲しいですから。といってもそれを言い出したら 横320のZAURUSはどうするとかいう話になりますが。^^; jubakoさんが書いたように固定テーブルを用いるのが一番いいです。 といっても <body><center> <table width="620" ～><tr><td> ～内容～ </td></tr></table> </center></body> 全体を囲ってしまうと表示が遅くなる（ブラウザによってはTABLE内を全部 読み込み終わらないと表示しない）ので、ヘッダ部分やフッタ部分、本文部分 でも分割できるところはTABLEを分割しましょう。 スタイルシートで文字サイズを絶対値指定すると、目の悪い人が見にくくなる ので、「文字を文字としてではなくデザインの要素として使う」という意図 でない限り使わないのが無難でしょう。あとはメニューとか。 「横フレーム」って私は「左右分割」のことだと思ったんですが「上下」 ですか？ どちらもよく見かけますよ。左右に関して言えば、スクロールバー が出現して描画範囲が狭くなるので私は使いません。 「人からリンクしてもらいたいページ」を考えて作っているのでフレームは 使えないんですよ。^^; 「このページにこんな情報あるぞ！」ってリンク されても、フレームがあるから該当ページじゃなくトップページになってたりね。
補足
早速のご回答有難うございます。 すみません、補足で質問させてください。 jubakoさんの補足質問にも書いたのですが、 テーブルの中にテーブルを入れてしまうと、 800×600では、きちんと収まっているのに、 1024×768でみると外側のテーブルより 内側のテーブルが「びよーん」とはみだしてしまうのですが…。 でも、テーブルって分割した方が良いのですね。 とても勉強になりました。 といことは、テーブルの中にテーブルを入れるのは、 あまりしないほうが、よいのでしょうか。 私、「固定テーブル」を理解できてないのでしょうか。 「一番外側のテーブルで、WIDTH指定がされているもの」と 解釈しているのですが、合ってますか？ でも、外側が「びよーん」ってなってしまうので、固定されていないですよねー。 私の「横フレーム」とは「左右分割」です。 良く見かけるんですねー。 でも、フレームのページを解像度の違うパソコンでみると、 すっごくデザインが、かわってしまいますよね。 どうにか、高い解像度のパソコンでも綺麗に見えるようにしたいのですが。 ご回答宜しくお願い致します。
仕事でWebデザインをしていますが、 暗黙の了解として800*600の画面でおさまるように作ります。 それより小さい画面の人はかわいそうなのですが… デザインが崩れないようにするためには、 テーブルタグを使用します。 例えば、画面いっぱいに横サイズ固定のテーブルを作ります。 その中でデザインをしていけば、 どんなにブラウザが小さくても、大きくてもデザインは崩れません。 ただ、デフォルトでは左寄りになってカッコ悪いので、 そのテーブル全体を中央寄せにすると、 大体どの環境でも同じ様に見えます。 横フレームというのは、横にスクロールするフレームですね。 これは解像度も確かに理由としてあるのですが、 なんといっても、スクロールをしにくいからです。 最近ではスクロールマウスもあるのですが、 ほとんどのスクロールマウスは横にはスクロールできません。 いちいちバーをドラッグしないといけないので、 あまり好まれないですね。
補足
早速のご回答有難うございました。 とても参考になりました。 更にお聞きしたいのですが、 「画面いっぱいに横サイズ固定のテーブルを作ります。」 と有りましたが、どのようにするのでしょうか。 ちなみに、私はWIDHT="75%"のテーブルの中に WIDHT="100%"のテーブルをいれてみました。 800×600でみたら、綺麗におさまるのですが、 1024×768でみたら、テーブルの中のテーブルが 「びよーん」ってはみ出てしまいました。 これを回避するにはどうしたら、良いのでしょうか。 ご回答宜しくお願い致します。
どうしようもありません(^_^; 製作者側がそういうことを意識して、「崩れても問題ない」デザインにする必要があります。 基本的には、「画面の横幅が６４０ピクセル未満のときに正しく表示される」ように設計すればＯＫです。これは、Ｗｉｎｄｏｗｓが動作する最低限の横幅が６４０ピクセルだからです。（最近はモバイル機器が普及してきてそうでもなくなってしまいましたが） 最近のパソコンは最低でも８００×６００はあるので、比較的新しめのパソコンでの閲覧を前提とするならば、横幅が８００ピクセルでもいいでしょう。 文字を中央寄せや左寄せ、あるいは横並びのフレームに関しては、これは解像度とは関係ないように思われます。横フレームって、割と今でもありますよ。問題になるのは割と「画面の横幅」ですから。 ブラウザの大きさは人によってまちまちです。大きな画面サイズいっぱいに作って、ちょっとでも小さな画面で見ている人が困るようなデザインは、「いいデザイン」とは言えません（あまりにも小さすぎる画面はさすがに閲覧者側の責任ですが）。 「見やすい」デザインとは、ある程度画面サイズが変わっても、柔軟に対処できるデザインだと俺は思います。もちろん、その「ある程度」というのがどの程度なのか、という指標を、自分の中で作っておく必要はあると思いますが。 もっとも、だからって「画面を単純化すればいい。テーブル不可、画像不可、音楽も不可、文字の大きさは大きくとって、小さい文字は不可だああ！」というような『不可だらけ』の持論は、ただの逃げの口実だと思いますけどね(^_^;
お礼
ご回答有難うございます。 「なぜ640ピクセルに合わせるのか？」と思っていた疑問が無くなりました。 有難うございます。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
ご回答有難うございました。 横８００のイメージファイルを貼ったら、とても良くなりました。 とても助かりました。有難うございます。