高解像度環境で作っってしまったサイト！

質問

いつもお世話になります。
自宅のPCの画面を高解像度で設定しており、
そのチェック環境にて作ったHPがあります。
今、友人宅のpc1024×768、22インチのモニタで見たところ
でかく表示されておりが～～ん！これ以下だったらいったい
どんなことになってるのでしょうか。。
ショックをうけました。。
内容はシンプルなもので、縦スクロールが出無いくらい
１画面内に収まるものだったはずなのですが、
ぜんぜんスクロールも出現してます。
今までいろんな所の環境のpcで
見ても問題無かったし、（たまたま1024×768以上の画面
だったのかも。。）今までお仕事などでも
1からサイトを作るというより既存サイト内の1ページ、とか、
そんなレベルでしたので、異なる画面解像度での閲覧に関しても
あまり気にしてなかったのですが、完全にあほでした。失敗です。

そこで質問なのですが

1：web製作されてる方で解像度ってどのぐらいの設定してますか？
ディスプレイをフルで使いたいし、web製作のお仕事などされてるような方だと、
高解像度にしてる方が多いような気がします。。
私は経験が浅く、ブラウザでチェックしつつ作ることが
すごく多いのですが、もしかしてみなさん
モニタ2つとかでチェック環境と、製作環境を分けてたり
するのでしょうか。

2：ちなみにdreamweaverは自宅では持っておらず、
Crescent EveというフリーのテキストHTMLエディタで作りました。
直したいのですが、画像が多く、それ自体でかい気がするので
また１から作らなくてはだめでしょうか。
サイト自体はCSSで作っており、ヘッダーをいくつかの画像で
、その下に画像のリンクバー、コンテナを横780pxで設定
メインにでかい700×400とかの画像、下にテキストが
あるような感じです。

どなたか経験者の方！2：は答えようが無いかもしれないですが
今後新規でサイトを作る場合など気をつけるべきことなど
アドバイスいただけませんでしょうか。

よろしくお願いいたします。

回答No.2

ORUKA1951 · ベストアンサー

私は、HTML4.01strictないしXHTMLを基本にして、CSSで製作することが多いです。(大きなサイトは、サーバーサイドでXML→XSLT）

≫モニタ2つとかでチェック環境と、製作環境を分けてたりするのでしょうか。

　ディスプレイサイズですが、標準的なサイズは1024×768ですが、800×600でも、1600を超える幅でも、問題ないように注意しています。
　これは、別にディスプレイを用意しなくても、ウィンドウサイズを変えれば・・確認できるので、それで確認しています。大きいほうは解像度を変えればデスクトップからははみ出るけど確認だけは出来る。--問題になるのは小さいディスプレイだけなので大きいほうはほとんど未確認。

★プレゼンテーションは、CSSだけで制御している。
　本文エリアの幅は、パーセントとmax-widthで指定している。具体的にはウィンドウ幅の80%程度・・1024幅のディスプレイで800位になる。
　mediaはscreenを指定
★携帯端末、PDA用には別のスタイルシートが適用されるが、対応していない端末は素のHTMLとして表示される。
　・・・素のHT<Lでも、内容が伝わるように適切なマークアップを心がける。
★印刷が想定されるページは印刷用タイルシートを用意しておく

≫ヘッダーをいくつかの画像で、その下に画像のリンクバー、コンテナを横780pxで設定。メインにでかい700×400とかの画像、下にテキストがあるような感じです。
　ヘッダーではなくヘッドライン(見出し)でね。これはきちんと<h1></h1>でマークアップする。
　<h1></h1>に文字列で記載し、画像はCSSの背景で設定するか
　<img alt="見出しレベル1">で指定する。
のいずれか

　まあ、HTMLがきちんとマークアップされていれば、CSSを変更するだけですから、そんなにむつかしくはないと思います。
　私の製作したサイトのHTMLは、驚くほどシンプルですよ。divの入れ子なんて、多くて３段階まで、プレゼンテーション制御のためのclass,idなんて、ほとんどない。
　でないとメンテナンスで泣くことになるから・・・。

（例）
<ol id="menue">
<li>メニュー１</li>
<li>メニュー２</li>
<li>メニュー３</li>
<li>メニュー４</li>
</ol>
　これだけのHTMLで、メニューをページの上端にボタンで配置して、しかも一つずつボタンの色を変えるとかしてます。<li class="red">なんてしない。

お礼

回答ありがとうございます！
とても参考になります！
ディスプレイに関しては標準的な利用者が多いサイズは1024×768
のようですね・・ウィンドウサイズを変えつつチェックというのは
めんどうで効率悪そうで、（ただでさえ私はチェックばかりしてるので）皆さんどうしてるのかな、と聞いてみました。

＞★プレゼンテーションは、CSSだけで制御している。
＞　本文エリアの幅は、パーセントとmax-widthで指定している。具体
＞的にはウィンドウ幅の80%程度・・1024幅のディスプレイで800位になる。
すいません、仰せの「プレゼンテーション」とはこの場合
どういう意味でしょうか。すいません。
min-width,max-widthはIE6には対応してないようですが
なんとかやりようがありそうですね。
今ちょっとテストできる環境にいないのですが
今後試してみますね！

＞　<h1></h1>に文字列で記載し、画像はCSSの背景で設定するか
＞　<img alt="見出しレベル1">で指定する。
＞まあ、HTMLがきちんとマークアップされていれば、CSSを変更するだ＞けですから、そんなにむつかしくはないと思います。
＞私の製作したサイトのHTMLは、驚くほどシンプルですよ。divの入れ
＞子なんて、多くて３段階まで、

わたしもhtmlはシンプルで、画像はCSSの背景で設定してるのも多く、CSSで変更するだけですむならよいのですが・・(泣)menuのHTMLも記載頂いたような物なのですが
一枚画像でオンマウスとかを3段階position指定していたりと・・
やはり画像はすべてリサイズしてやり直したほうがよさそうです・・

独り言のようになってしまいましたが
ありがとうございました！

回答No.1

noname#83877

普通に大きな画面の方が作業はしやすいんじゃないでしょうか。
広いディスプレイにも対応したサイトを作ろうとすると、狭いディスプレイではできませんが、広いディスプレイではウインドウサイズを変えれば擬似的にチェックできるので。

私は19インチなので1280×1024ですが、作る時のサイトの幅は780px～1000pxですね。
一応作業の時にはaltdeskという仮想ディスプレイを作るソフトを使って画面を切替ながら作業しますが、別に無くてもあまり問題ないです。

モニタを複数用意する場合としては、正しい色を確認したりするためなので

・sRGBが正確に表示できる液晶モニタ
・安い液晶モニタ
・CRTモニタ

あたりで確認をとるという人はいるかもしれません。
最近ではナナオから目の不自由な方を考慮して、色の出方をチェックできるディスプレイもありますし、ディスプレイの確認は時と場合によります。
私は19インチで作っていますが、解像度とサイズの関係で17型の方がフォントサイズが小さくなるので、そういうことも考えながら作っています。

2は都合が悪い場合は大変でしょうがリサイズされる方が良いと思います。
私としては1024px×780pxのディスプレイで画面最大化で表示できるサイトが最低限だと思っているので、スクロールバーとウインドウ枠を引いて、大体横幅は1000pxが限界だと思っています。

お礼

早速の回答ありがとうございます！
なるほど～いろいろいちいち参考になります！

横幅は780ぐらいからと漠然と認識していたのですが
今回のサイトには該当せず、ちょっとでかすぎたかもしれないです。

今チェックできる環境にいないのですが
altdesk入れて色々試してみますね。
リサイズも視野にいれ作りなしてみます。
ありがとうございました。