widthを100%にした時の画面調整について

質問

こんにちは、

WEB制作に関する質問です。

今制作しているサイトをフルスクリーンにしようと考えています。

#wrapper {
width: 100%;
height: 任意の値
}

また#header、#content、#footerなどにもwidth: 100%の値を同様に入れました。
その中にdivなどのブロックを置いてデザインをしました。

そこで、疑問なのですが、わたしが使っているPCの画像解像度が1366/768です。
この解像度に合わせて作っているので、自分のPCでは問題なく、画面に表示されますが、

例えば他の解像度のPCや、あるいは他のディスプレイのサイズだと、形が崩れていたり、自分のパソコンで映っていた時のものと見栄えが変わってしまいます。

そこでディスプレイや解像度が変わっても、それに合わせてサイトが自動で調節してくれるような、コード（例えばjavascript）のようなコード記述ってあるのでしょうか？

画像解像度やディスプレイサイズが変わっても、サイトのデザインを崩したくないです。

もしあれば、教えていただきたいと思っています。
よろしくお願いします。

回答No.2

ORUKA1951

そもそもHTMLは
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より
　なのですよ。一切スタイルシートを除けば、どのブラウザにも無関係に画面いっぱいに表示されるはずです。携帯電話のような240px幅でも、1900pxを超える幅広ディスプレイでも。もちろん点字端末でも、スクリーンリーダー(読み上げソフト)でも。

　そもそも「画像解像度やディスプレイサイズが変わっても、サイトのデザインを崩したくない」のでしたら、その目的の画像やPDFがあります。

　HTMLの目的は、ディスプレイのみならず、様々なユーザー--もちろん検索エンジンも含む---に対して、情報を伝えるためのもので、デザインを伝えるものではありません。
　幅の狭いディスプレイには、横並びして表示されていたものを縦に並ばせて表示させたり、あるいは一部のデータを表示させなくするなどします。
　また幅広ディスプレイには中央に1000px程度の幅で表示させるとか、視覚弱者がフォントサイズを大きくしたり、色をハイコントラスト--白黒ニ値--で表示させることもできます。

　私は、基本的に「CSSのレイアウトについて - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7847891.html#a2 )」で示したサンプルのように、640-900pxで中央表示としてscreen端末全般に対応させ、それ以下のscreen端末(スマホ縦)などはまったく余談(aside)は表示させないなど別のデザインにして、携帯電話などには素の状態で、印刷時にはA4に印刷できるように指定します。

「画像解像度やディスプレイサイズが変わっても、サイトのデザインを崩したくないです。」
　ではなくて、
「画像解像度やディスプレイサイズが変わったら、デザインを変えて情報が利用しやすい」ように考えるほうが良いです。そのためのHTML+CSSなのですから。
　もし前者のデザインを優先されるのでしたらHTMLはよい方法ではありません。

　#wrapper,#header,#content,#footerのようなHTMLのマークアップ、CSSの使い方は良くないです。
・idはclass名は文書構造を補完するためのものです。
　「id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」
・#(一意セレクタ)は詳細度が高く一箇所しか指定できませんから、CSSが冗長化します。
　HTML5を読めばわかるように、.header、.section、.footer、.articleなどです。

※「CSSのレイアウトについて - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7847891.html#a2 )」で示したサンプルのスタイルシートに
html,body{margin:0;padding:0;}
div.header,div.nav,div.section,div.footer{
width:100%;max-width:1330px;min-width:640px;
}
を最後に追加すれば、とりあえずは期待通りになるはずです。
最大1330px最小640px
それ以上だと、中央に1330px
それ以下だと、横スクロール

お礼

色々アドバイスありがとうございます。

そのようにマークアップしてみます。

今後の参考にさせていただきたいと思いますので、

また何かの機会にアドバイスをよろしくお願いします。

回答No.1

b0a0a

スクロールバーが出るようにページ幅を固定して
スクロールバーもいやならzoomなどを使ったりすればいいんじゃないですかね