Webサイトの推奨解像度（幅と高さ）
一般的なウェブサイトの解像度に標準はありますか？
おそらく少なくとも1280px幅の新しいモニターをターゲットにしていますが、高さは異なる場合があり、各ブラウザーのツールバーの高さも異なる場合があります。
これには何らかの基準がありますか？
最近のアドバイスは次のとおりです。
1024x768に最適化する。ほとんどのサイトでは、これはほとんどの訪問者をカバーします。ほとんどのログは、訪問の92〜99％が1024を超える幅になることを示しています。 1280がますます一般的になりつつありますが、1024にはまだ多くがあり、その下にはいくつかあります。このために最適化しますが、他のものを無視しないでください。
1024 =〜960。スクロールバー、ウィンドウの端などを考慮すると、1024x768画面の実際の幅は 約960ピクセル になります。一部のツールは、わずかに小さいサイズ、約940に基づいています。これは、 Twitterブートストラップ のデフォルトのコンテナー幅です。
1つのサイズに対して設計しないでください。ウィンドウのサイズはさまざまです。画面サイズがウィンドウサイズと等しいと想定しないでください。合理的な最小値で設計しますが、調整されると仮定します。
レスポンシブデザインとリキッドレイアウトを使用します。ウィンドウのサイズが変更されたときに調整するレイアウトを使用します。特に大きなモニターでは、人々はこれをたくさん行います。これはちょうど良いCSSプラクティスです。これをサポートするいくつかのフロントエンドフレームワークがあります。
ファーストクラスの市民としてモバイルを扱います。常にモバイルデバイスからのトラフィックが増えています。これらはさらに多くの画面サイズを導入します。それでも960に最適化できますが、レスポンシブWebデザイン手法を使用すると、画面サイズに基づいてページが調整されます。
ログブラウザの表示情報。これに関する実際の数値を取得できます。いくつかの数字を見つけました here と here と here 。サイトをリグして、同じデータを収集することもできます。
ユーザーはスクロールするので、高さをあまり気にしないでください。古い議論は、ユーザーはスクロールせず、重要なことは「スクロールせずに見えるはず」だというものでした。これは数年前に覆されました。 ユーザーが大量にスクロールする 。
画面解像度の詳細：
レスポンシブデザインの詳細：
- レスポンシブWebデザイン （2010年5月25日）、Ethan Marcotte、A List Apart。
- レスポンシブWebデザイン ウィキペディア
- マルチデバイスレイアウトパターン （2012年3月14日）Luke Wroblewski。適応性のあるマルチデバイス画面レイアウトの最も一般的なパターンをカタログします。
レスポンシブデザインとリキッドレイアウトのためのツールとフロントエンドフレームワーク：
- Twitterブートストラップ
- Zurb Foundation
- レスポンシブWebデザインのための50の素晴らしいツール （2012年4月24日）デニスジェイコブス＆ピーターガスストン
悪い考えだと思う。コンテンツをレイアウトから分離する際の全体的なポイントは、Webページをあらゆる種類のブラウザで表示できるようにすることでした。
最小画面サイズなどの人為的な制限を加えると、市場が制限されます。
そうは言っても、すべてのデスクトップは1024x768を表示できるはずです。しかし、iPhoneやその他の画面に問題のあるデバイスで実行されているブラウザー、またはブラウザーにデスクトップ全体を使用しないブラウザーについてはどうでしょうか。
あなたの特定の質問に答えて、いいえ、ブラウザの最小または共通の表示領域に標準があるとは思いません。
ユーザーに水平スクロールを強制することは、重大なUI違反です。既知の画面サイズの人口向けにWebサイトを特に構築している場合を除き、幅800ピクセルの小さな画面（メモリが適切であれば、Webサーフィン人口の約8％）でデザインを機能させることが最も安全です。大きな画面にうまく適応させることは賢明ですが、800x600でサーフィンをしている人を犠牲にすることはできません。
考慮すべきもう1つの点があります。すべての人がブラウザをフルスクリーンで実行するわけではありません（私はしません）。したがって、ifが特定の（および大きな）「画面サイズ」用に設計するOkであるという考えは、いくつかの理由で実際には機能しません。
2010年12月15日に更新：この質問に最初に答えたとき、800ピクセルが適切な答えでした。ただし、この時点で、1024ピクセル（または誰かが指摘したように960ピクセル）をお勧めします。技術の進歩...
2008年のブラウザ表示の統計は次のとおりです。 http://www.w3schools.com/browsers/browsers_display.asp
約50％のユーザーがまだ1024x768を使用しています。あなたのサイトを高解像度で見栄え良くしたい場合は、柔軟なレイアウトを使用してください。
ここに素晴らしいツールがあります： Google Labs Browser Size
実際には幅に関する業界標準があります（少なくともyahooによると）。サポートされる幅は750、950、974、100％です
事前に定義されたグリッド（列レイアウト）にはこれらの幅の利点があります。これは、広告を含める場合に広告の標準寸法でうまく機能します。
見る価値のある興味深い話。
YUI Base を参照してください
ユーザーが800x600の解像度のモニターしか持っていないことを期待すべきだと思います。カナダ政府には、これを要件の1つとしてリストする標準があります。派手なワイドスクリーンモニターを持っている人にとっては、これは低いように見えるかもしれませんが、誰もがニースモニターを持っているわけではないことを覚えておいてください。私はまだ1024x768で実行している多くの人々を知っています。そして、特に旅行中に安いWebカフェで、800x600で走っている人に出くわすことは全く珍しいことではありません。また、必要ない場合は、ブラウザウィンドウを全画面にする必要があります。広いモニターでサイトを広くすることはできますが、ユーザーを水平にスクロールさせないでください。今まで。低解像度をサポートするもう1つの利点は、サイトが携帯電話で動作し、任天堂Wiiがはるかに簡単になることです。
あなたの少なくとも1280の幅に関するメモ、私はそれが船外の方法だと言わなければならないでしょう。ほとんどの17インチおよび19インチの非ワイドスクリーンモニターでさえ、1280x1024の最大解像度しかサポートしていません。そして、私が今入力している14インチのワイドスクリーンのラップトップは、たった1280ピクセルです。努力すべき最小解像度は1024x768ですが、800x600が理想的です。
これまでの回答はすべてデスクトップモニターについて述べていますが、iPhoneでスタックオーバーフローを使用しているため、1024または1280水平ピクセルを対象としてモバイルプラットフォームを除外する必要はないと思います。あなたのページをマークアップして、ブラウザがそれが何を意味するのかを知って、それを使用可能にすることは、スクリーンリーダーやあなたが考えていない他のキット上でも無料で提供されます。
ただし、たとえば、ボディの背景画像と一致する必要がある背景画像を使用する場合、柔軟なレイアウトまたはリキッドレイアウトではデザインが多少制限されます。
私はむしろ、サイトに異なるcssレイアウトを作成し、ユーザーの解像度に応じて適用するか、それが不可能な場合（まだ掘り下げていない場合）、選択可能なオプションにします。
特定の解像度をターゲットにするのではなく、多くの異なる解像度に簡単に適応することが最善です。
かなり広く使用されているようで、Googleアナリティクスから得られた数字によって裏付けられている、使用するガイドラインは、幅1024ピクセル、高さ768ピクセル（1024x768）の画面で動作するようにサイトを設計することです1280x800が最も一般的な解像度であり、すべてのトラフィックの少なくとも70％を占めています）。
これが、約1000ピクセル幅の中央の列を使用し、最も重要なコンテンツを上位500-600ピクセルで使用する多くのサイト（このサイトを含む）を表示する理由です。
1000ピクセル幅のレイアウトを使用すると、幅が最大約1680ピクセルの画面サイズ（通常は17インチの大型のものを除くノートパソコンと同じ高さ）で十分に機能しますが、1920ピクセルでは少しおかしく見えます幅の広いもの（ハイエンドコンピューター、通常はワークステーション）、ただし、これらの非常に高い解像度は、一般的なインターネットのトラフィックの大部分を占めません-2％以下（一方で、このサイトのような専門の聴衆がある場合） 、高解像度の図はやや高いかもしれません）。
最適な幅は1024までですが、さまざまなブラウザ設定（ナビゲーションツールバー、ブックマークツールバー、ステータスツールバーなど）とタスクバー設定のアカウントの高さを調整する必要があります。 768をすぐに約550に落とします。
ターゲットブラウザのサイズに関係なく、ブラウザツールバー、ステータスバー、およびスクロールバー用のスペースを上記のように含めるようにしてください。 Internet Explorer（IME）のツールバーとステータスバーには、多くの場合100pxを超える垂直方向のスペースがあります。通常、1024 x 768で撮影する場合は、安全のために幅960〜980ピクセル、高さ600ピクセルのデザインを作成しようとします。そうすることで、必要に応じてスクロールに対応し、ニースの空白（デザインで必要な場合）に対応できます。特定のサイズをターゲットにする必要がある場合は、YUIグリッドを強くお勧めします。
個人的には常にページの中央を中心に1000pxの最大幅に固定されています（マージン左/右：自動を介して）。
1024x768未満で実行している場合は、アップグレードする時が来ました。真剣に。ほぼ2010年です。1280x 1024のネイティブ解像度でバーゲンビン液晶モニターを購入できます。
メディアクエリをご覧になることをお勧めします。これは、CSSに新しく追加された便利な機能であり、非常に理にかなっています。なぜこれが早く実装されなかったのか不思議に思うでしょう。基本的には、CSSを介してブラウザー属性（最大幅や最小幅など）を直接ターゲットにし、そこからレイアウトコードを分岐できます。印刷スタイルシートの作成と同様に、デスクトップとモバイルのレイアウトを同じファイルに並行して作成できます。これにより、開発が容易になります。
さて、ここで多くの誤報が見られます。まず、特定の解像度（たとえば800x600）を使用してWebページを作成すると、その解像度のみを使用してページが適切にレンダリングされます。同じページが他の誰かのラップトップまたは自宅のPCモニターに表示される場合、ページは、ページの設計時に使用した解像度ではなく、その画面の現在の解像度を使用して表示されます。特定の解像度のWebページを作成しないでください！ Webデザインでは存在しない「1つのサイズですべてに適合する」シナリオを期待するには、さまざまなアスペクト比と画面解像度が多すぎます。ソリューションは次のとおりです。CSS3Media Queriesを使用して、解像度に適応可能なコードを作成します。以下に例を示します。
@media screen and (max-width: 800px) {
styles
}
@media screen and (max-width: 1024px) {
styles
}
@media screen and (max-width: 1280px) {
styles
}
ご覧のとおり、異なる解像度でレンダリングする3セットのスタイルを指定しました。この例の場合、画面の解像度が800pxより大きい場合、代わりに1024のCSSが実行されます。同様に、コンテンツを表示する画面が1224pxの場合、1224は1024より大きいため、1280は実行されます。現在作業中のサイトは、800x600〜1920x1080のすべての解像度で機能します。留意すべきもう1つのことは、同じ解像度のすべてのモニターが同じサイズの画面を持っているわけではないということです。 15.4台のラップトップを並べて配置することもできますが、両方とも同じように見えますが、異なるLCD画面ですべてのピクセルが同じサイズではないため、両方とも大幅に異なる解像度を持つことができます。そのため、メディアクエリを使用して、高解像度（特に1280+）のラップトップ画面でWebサイトの作成を開始します。また、ラップトップで異なる解像度を使用して各メディアクエリを作成します。 Windowsの解像度設定を使用して800x600を調整し、その解像度でメディアクエリを作成してから、1024x768に切り替えてその解像度で別のメディアクエリを作成できます。私は何度も続けることができますが、皆さんがポイントを得るべきだと思います。
更新：詳細を説明するメディアクエリを使用するためのリンクを次に示します。 メディアクエリを使用したモバイルデバイス向けの革新的なWebデザイン
そのチュートリアルでは、すべてのデバイスの設計方法を示します。特にメディアクエリのチュートリアルもあります。サブドメインを使用せず、CSSのみを使用して、すべてのデバイス、すべての画面、すべての解像度でレンダリングするサイト全体を開発しました私はまだタブレットとスマートフォンのサポートに取り組んでいます。このサイトはラップトップや50インチLCDテレビで完全にレンダリングされ、多くのページがすべてのモバイルデバイスで完全に機能します。すべてのコードをページに配置すると、ページの読み込みが速くなります！また、CSSの「background-size：cover;」に関する記事の議論にも注意を払ってください。または「含む」プロパティは、背景のグラフィックを滑らかにし、すべての解像度で完全にレンダリングできるようにします。
サイトのチュートリアルに従ってください。すべてをレンダリングする単一のWebページを作成できます。
幅だけでなく、「折り目より上にすべてを保つ」ために使用する高さについて、デザイナーから多くの質問を受けます。ここに私が最近与えた1つの答えがあります-
幅については、私はデザイナーではありませんが、960px幅が最近の道であると読みました。それは、見栄えの良い列に分割されるのに役立ち、ほとんどのディスプレイにうまく収まるからです。可能であれば、リキッドレイアウトを設計します。ただし、これは、デザイナー、CSSスキル、画像、テキストの量によっては常に実用的ではありません。
（行ごとに65〜80文字、行の高さを約1.15にする必要があります）。これはテキストの最適な列幅であり、非常に幅の広いまたは狭い列よりもはるかに高速で読みやすいことが実証されています）
「上」については、Webでこのような概念を使用しないように注意する必要があります。水平スクロールは回避できますが、回避する必要がありますが、垂直スクロールは100％回避できないものです。 1024x768のディスプレイ（少なくとも95％のユーザーがそれ以上を持っている）では、600pxの固定ブロックで問題ないはずです。しかし、さまざまな表示形式があり、ブラウザchromeは多くのスペースを占有する可能性があり、誰もがブラウザウィンドウを最大化するわけではありません。
ほぼ同じことを言っている他のサイトもいくつかありますが、実際の統計によると、400px程度しか持っていない可能性があるので、すべての人が絶対に「フォールド以上」になるように計画するのは困難です。
そして最後に、非常に詳細な詳細な記事になります（詳細は掲載しますが、SOは私はあまりにもいいと言います）- ブラウザサイズの設計方法-baekdal.com
アクセスしたすべてのクライアントサイトから画面解像度のサンプリングを行ったところです。これには、8以上の業界の20以上のサイトが含まれます：
alt text http://unkwndesign.com/so/percentScreenResolutions.png
これに基づいて、1024x768で見栄えが良くなることを確認します。また、高さについてはあまり気にしないでください。ただし、ほとんどのページがデフォルトのフォントサイズで1〜2ページ以上印刷されないようにしてください。縦方向のスペース、私の個人的な好みはそれが彼らの問題だということですが、私はそれが大したことではないと思います。
*パーセンテージは、丸めのために合計100.05％になります。
最小幅として1024をターゲットにしてみてください。 800でどのように見えるか試してみてください。 800x600では、主要なWebサイトはほとんど機能しません。そのため、その解像度で作業している人々は、とにかく常に問題を抱えています。
リキッドレイアウトを使用する場合は、行が長すぎると読みにくくなるため、テキストがtoo wideにならないようにしてください。これが、ほとんどのWebサイトの幅が固定されている主な理由です。
1024ピクセルのモニターをターゲットにしています（ただし、そのスペースを100％使用しないでください）。 800x600のものはあきらめました。必要に応じてスクロールさせることで、古いハードウェアで少数の人を罰するのではなく、スペースを無駄にしてすべての人を新しい機器で罰するのではありません。
視聴者やアプリの性質にもよりますが。
sbeamは、「1行に常に65〜80文字を入れたい」と言っています。それは真実ではありません。たとえば、ウィキペディアでは1行に180文字が含まれる場合があります。それとも特定のウェブサイトを意図していたのですか？
最終的に、これはマークアップの標準やベストプラクティスの問題ではなく、あなたの聴衆を知り、あなたのウェブサイトがあなたがやりたいことを確実に行うことです。 。
画面の解像度ではなく、ブラウザのビューポートの幅を考慮することがより重要です-ディスプレイ上のすべてのピクセルがブラウザに割り当てられると想定することはできません（ブラウザのクロムを差し引く必要がある場合でも）。ブラウザーの幅（n.b。ブラウザーの幅ではなく、画面の解像度）をレポートするアナリティクスにアクセスできる場合は、細心の注意を払ってください。
ビューポートの可能な限り広い範囲に対応しようとするのは良いことですが、いくつかの制限があります。 CSSメディアタイプ で処理できる課題もあれば、できないものもあります。一部は、流動的なレイアウトで処理できます。しかし、表示する情報の種類、行の長さ、読みやすさ、などに応じて、流体レイアウトはすべての状況で機能するわけではありませんワイドディスプレイで動作します。特定の幅以下にサイズ変更すると、ほとんどが壊れますetc。
私が個人的に〜960ピクセル以上のビューポート用に設計したいのと同じくらい、あなたは常にそれを行うことができるとは限りません。そのため、場合によっては、少なくとも760ピクセル以下（800ピクセル幅のディスプレイ、最大化）のビューポートを設計するのが最も安全です（ただし、少なくともデスクトップでは、この制限を最後に1回でも無効にできますが）。非常に高速で接近しています。
変換が問題であり、固定幅のレイアウトを使用している場合、ユーザーがクリックする必要があるものを配置して、レジが760thの東のどこかで「カチッ」と音を立てるのに十分な理由があります。ピクセル。
プライマリナビゲーションについても同様です。
最後に、手に入れることができるすべてのものでレイアウトをテストします。大きい。小さい。デスクトップ。ハンドヘルド。作品集。代替品はありません。
解像度が高いほど、インターネットブラウザが最大限に活用される可能性が低くなることに注意してください。
また、一部のブラウザには横バーもあります。
レンダリングする内容によって異なりますが、幅が800〜900程度で途切れない可変幅レイアウトを使用します。
高さは実際には問題ではありません。