ほとんどのWebサイトがポートレートモードでの表示用に最適化されているのはなぜですか？
これを理解することはできません。ほぼすべてのモニターのアスペクト比は、幅が高さよりもはるかに大きくなっていますが、ほとんどすべてのWebサイトは正確に反対方向に設計されていますか？私は実際にはWeb開発者ではなく、現在実験を行っていますが、この狂気は私を困惑させます!!!
編集：ポイントは、私がウェブサイトの高さを制限したいということではありません。要点は、1920x1080を横長モードにしたときに、使用可能なすべてのスペースをどうにか埋めたいです。
編集2：これを見て、私が言っていることを理解してください 
現在の行の終わりに到達したときに、次の行の追跡を失うことなく、目をスキャンできる距離には制限があります。最適な線幅と読みやすさについては、多くの研究（ これを含む ）が行われています。
あなたはそれをある程度まで煮詰めることができるかもしれませんが、その時点で何が最適かを知るためには、ユーザーがモニターからどれだけ離れているかを知る必要があります。そのため、ほとんどの推奨事項はems、文字、または単語の測定に関するものです。ピクセル単位のサイズはフォントのサイズに依存しますが、一般的なコンセンサスは引き続き機能します。
個人的には、1080p画面の全幅を使用するようにフォーマットされている記事を読むのは非常に困難です。きっとあなたもそうすることでしょう。現在の規則は印刷レイアウト設計ガイドラインに基づいており、レイアウトガイドラインは実質的に変更されていません。唯一の違いは、ブラウザでページを操作できることです。
追加の解説：（コメントで提起された質問から）
画面上でHTMLができることには制限があります。一つには、ページがありません。スクロールバーのみ。ブラウザーがマークアップを表示する方法の適切な動作を設計することは、非常に難しい命題です。 マルチカラムのCSS3プロパティ レイアウトでは、まだ候補のレコメンデーション段階にありません。 この記事とは別のリスト で説明されている、それを試すためのハックがあります。しかし、ほとんどのサイトではまだゴールデンタイムの準備が整っていません。
コンテンツがスクロールを必要としない限り、問題はありません。それが行われるとすぐに、複数列のアプローチは、ユーザーがサイトと対話する方法にいくつかの課題を提示します。
現在の事実上の標準に関するコメント：
質問の書き直し方と提供した例に対処するには、Webデザインが競合する可能性のある多数の要件のバランスをとる必要があることを理解し、Webサイトを専門的に見せる必要があります。デザイナーとクライアントのニーズのバランスを取るために、ほとんどの開発会社は1つの解像度で設計します。その解像度は すぐに利用可能 になる可能性のあるデータに基づいています。これらは、過去のWebトラフィックレコード、またはターゲット環境の知識に基づくこともできます。
最も一般的な画面幅（1024、1280、1366）は十分に狭いため、最小（1024p）でデザインし、デザインをページの中央に配置すると、他のデザインでも少し見栄えがよくなります。 より大きな水平寸法。 すべてを任意の形式で正しく揃えるのは非常に困難です。画面幅に応じて複数の形式をサポートする必要ははるかに少ないです。 1080pユーザーの数は増加していますが、それでも、サポートする必要があるすべてのユーザーのごく一部を占めています。
興味がある場合は、 「A List Apart」のデザイン記事 の一部を熟読することを強くお勧めします。自分がやりたいことをするのは見た目よりも難しいという考えを理解し始めます。 私が投稿しました1080p用に設計 に関する質問の場合、最初の初期応答は「すべてを大きくする」に達しました。これは、ほとんどのWebデザイナーにとって、まだ注目されていないものです。
自然に下にスクロールしてより多くのコンテンツを読むことができるので、ほとんどのウェブサイトはそれよりも幅が広く、幅が広いです。私は個人的に水平スクロールバーを嫌います。彼らは廃止されるべきです！
ウェブサイトはまだ縦長ですが、サイトは画面の下部を超えています。サイトの高さに制限はありません。
現在、無限に長いWebページ（ありがとう、AJAX）があります。無限に広いページを見た場合はどうしますか？ （私は狩りをしてデザイナーを殺します、ページから離れてクリックするだけでは十分ではなく、デザイナーは死ぬ必要があります。）
スクロールして行ごとに戻ると、1人が自殺します。これが、人々がページめくりアプリのような豪華な本を作っている理由です。スクロールする必要はありません。
以前の回答を読んだ後、いくつかの点が欠落していることに気づきましたので、それらについて説明しようと思います。
難しいカラムの実装
幅の広いページについて話すとき、私は「物理的な」新聞に見られるようなテキスト列について話していると思います。これには2つの問題があります。
まず、実際のHTML 4およびXHTML 1.0/1.1は、列にテキストを表示することを目的としていません。 Firefox（およびその他の通常のブラウザー）にはハックがありますが、Internet Explhorrorでは機能しません。
次に、実際のFirefox実装または将来のHTML 5では、テキストを列に表示する必要がある場合、列の幅と列の数を指定する必要があります。高さ（たとえば、ページの高さからヘッダーの高さおよびフッターの高さを引いたもの）を指定して、ブラウザーに列数を調整させることはできません。
垂直方向のスクロールバーがなく、水平方向のスクロールバーのみの列で使用可能なレイアウトを作成することは事実上不可能になります。
高さ100％なし
実際のHTML/XHTMLは、ページの幅に応じて要素のサイズを調整することを目的としています。メトリックにページの高さを使用することは非常に困難です。
つまり、コンテンツを正しく表示するには、JavaScriptハックを使用する必要があります。言い換えれば、JavaScriptを有効にしていない人にとって、あなたのウェブサイトは完全に使用できなくなります。
半画面ページでのブラウジング
16：9/16：10の大きな画面では、2つのウィンドウを並べて操作することも珍しくありません（Win + ← / Win + → Windows 7の場合）。これは、ブラウザウィンドウの幅と高さが小さいことを意味します。
固定幅と動的幅
ほとんどのWebサイトが縦向きモードで表示するように最適化されているというあなたの仮定は間違っている可能性があります。
まず、ほとんどのウェブサイトはまったく最適化されておらず、一般的なウェブ開発について何も知らない、またはほとんど知らない人々によって書かれています。
第2に、固定幅のWebサイトとブラウザウィンドウの幅のパーセンテージに等しい幅のWebサイトの間には違いがあります。
最初のケースでは、ほとんどのWebサイトが縦向きにも横向きにも最適化されていないことに気付くでしょう。通常、幅は1024、800以下に固定されていますが、1920×1080解像度の24インチ画面で表示する場合は意味がありません。
2番目のケースでは、ページを24インチ画面の全画面モードで表示している場合、このWebサイトが縦向きでも横向きでも正しく表示される可能性があります。
例：写真のギャラリーがあるウェブサイトを想像してみてください。ページにはサムネイルがあり、サムネイルをクリックすると実物大の写真が表示されます。サムネイルがフロート左で、ページの幅が動的である場合、横向きモードでうまく表示されます。実物大の写真を見るのは特にいいでしょう。
なぜ現代のモニターは横向きになっているのですか？
- ビデオフォーマット。 HDビデオは、横向きのディスプレイに適しています。
- 読書。左から右、右から左のいずれの場合でも、横長モードの場合、スクロールせずに完全な行の大きなブロックを読みやすくなります。
編集：コメントを確認し、元の質問の意図を再構成した後、今日最も一般的である2列と3列のレイアウトの理由を考えているようです。これのために、ウェブサイトの歴史の簡単な短い要約：
なぜウェブサイトがポートレートモードで表示するように最適化されているのですか？
私はそれらがそれに最適化されているとはまったく思いません。多くの場合、特定の側面を常に利用可能にすること、特定の側面を利用可能にすること、特定の側面を特定のコンテキスト内でのみ利用できることの間の妥協です。せいぜい、あなたはそれを最適な妥協と呼ぶことができます。
コアの期待されるナビゲーションとセカンダリコンテンツをコンテキスト固有のコンテンツとともに各ページに配置できるため、2列と3列のレイアウトが広く普及しています。 Webの初期の頃、多くのサイトでは、動的ナビゲーションリスト（またはメニューは表示したいがメニュー）を使用して、単一列のレイアウトとして表示しようとしたレイアウトを試しました。メインコンテンツ。しかし、これは2つの部分からなる課題でした。a）ブラウザー間の互換性の欠如における技術的な課題。 b）使いやすさ：（大きな場合）技術的な課題が克服されたとしても、（ナビゲーションのための）直感的または不必要な狩猟ゲーム（ナビゲーションの場合）と破壊（一部のソリューションは、マウスクリック）。
これを克服するために、ほとんどのサイトは事実上の標準を採用し、その結果を受け入れました。ナビゲーションを1つに、コンテンツをもう1つに表示する2つの列、または3番目の列を追加して、主要な非ナビゲーションコンテンツを常に表示できるようにします（コンテキスト関連のヘルプ、メモ、広告、または最近の生の人を示すコミュニケーションストリームに関係なく）サイトまたはコンテキストに関連するアクティビティ）。コンテキストの実際のコンテンツは途中で止まっています。
これは固定幅レイアウトと呼ばれます。全幅レイアウトまたは流動的とも呼ばれます。固定幅を使用するのには理由があります。 1つは、モニターの解像度が使いやすさに影響することです。私が27インチのように巨大なモニターを使用している場合、サイトは恐ろしく見えます。すべてのテキスト、画像、およびすべてが非常に広がっているため、レイアウトまたはサイトを把握するのは困難です。固定レイアウト美しいデザインを可能にします。流動レイアウトは、主にサイトのリストまたはデータタイプで使用されます。たとえば、eBayは、より良いエクスペリエンスを提供するために、そのリストで流動レイアウトを使用します。フォーラムも流動レイアウトの恩恵を受けることができます。ただし、ブログ、クリエイティブ、写真、またはビジネスサイトは、固定幅のサイトよりもはるかにメリットがあります。
確かではありませんが、印刷されるほとんどの「ドキュメント」は縦向きで印刷されるように設計されており、多くの人々はまだWebサイトを「ドキュメント」としてデザインしています。これは文化的なものかもしれません。別の考えられる説明は、モニターの幅がモニターの高さよりも変化することです...
一般に、長い間活動が見られなかったスレッドに回答を投稿することはお勧めできません。ただ、まだ触れていないこともあると思います。
まず、数か月前に発見した次のFirefox拡張機能について説明します。ColumnReader
https://addons.mozilla.org/en-US/firefox/addon/column-reader/
なぜ垂直にスクロールするのですか？
比較のために、縦の列に書かれている言語を考えます。そのような言語では、現在のワイドスクリーンモニターが理想的です。つまり、それがうまくいくのです。線の方向に垂直にスクロールします。本のページは、行が水平であるため縦向きです。
以前の回答で指摘したように、ブラウザのレイアウトエンジンのリフロー機能は、垂直方向のリフローに合わせて調整されています。
マルチカラム機能
ブラウザの開発チームは、次の方法で複数列機能を追加することを選択できます。最初にページ全体を単一の列としてレンダリングし、次にそれを使用可能なウィンドウスペースのピクセルの高さでストリップに切り取り、それらのストリップを横に表示します。横に。しかし、どのくらいの幅で列を作成しますか？実際のテキストに使用される幅がごくわずかである場合でも、多くの場合、ページは、使用可能なウィンドウスペースの幅全体の特定の背景色をコード化します。
次に、レンダリングエンジンは安全に再生し、水平スペース全体を1つの列に割り当てる必要があります。
Webデザイナーがリフローする複数列レイアウトを実装することは可能ですか？
それは深刻な困難にぶつかるでしょう。利用可能なウィンドウスペースの高さと幅を取得し、JavaScriptでストリップを切り取って列に配置する必要があります。次に、2つの部分にカットされたイメージをどうするかを決定する必要があります。
そのようなことを処理することは、レイアウトエンジンが行うことです。複数列レイアウトのリフローを容易にするJavascriptライブラリを作成するには、JavaScriptでレンダリングエンジンを作成します。それはプラットフォームインプラットフォームを作成しています。
モニターサイズ
私は、実際にコンピューターモニターが過去数年間shrunkを持っていることに苛立ちを感じています。大型モニターの高さは1200ピクセルでしたが、現在は1050にすぎません。はい、幅は広くなっていますが、テキストではスペースを利用できません。
また、縦向きでは、これらのモニターは狭すぎます。
デュアルモニターを設定しています。どちらのモニターも縦向きで、どちらのモニターも1200x1600pxです。私にとって、これらの1200ピクセルは最小です。
CSSの条件付きステートメント
固定幅レイアウトに関する注意。
スクロールバーを避けて読みやすさを維持しながら、Webデザイナーが広い範囲の幅に対応できるようにするCSSコマンド「max-width」が気に入っています。 （そのような4つのコマンドがあります：最小幅、最大幅、最小高さ、最大高さ）。テキストを含むdivの場合、たとえば65emの最大幅を指定します。
If/elseを取得します。
利用可能なスペースが65em未満の場合、テキストはそれに応じてリフローされます。水平スクロールバーなし利用可能なスペースが65emを超える場合、それを含むdivは65emに設定されます。
ワイドスクリーンモニターが実際に登場したのは過去2年間だけで、以前はより高価なオプションでした。
デザイン面では、ユーザーが下にスクロールしなければならないほどWebページ（ドキュメント）が長くなることは、いくつかの理由で誰かにスクロールさせるよりもはるかに優れていると常に考えられてきました。まず、これはほとんどのコンピュータドキュメントが機能する傾向があるため、より「通常の」パターンです。ページダウンキーはあるが、ページアクロスキーはない。 2つ目は、最近のユビキタスマウスホイールがあるため、上下にスクロールするのは非常に簡単な操作で、スクロールするよりもはるかに簡単です。
最後に、ヒットするワイドスクリーンの解像度をどのように選択しますか？私のデスクトップは1920x1080です。私のラップトップは1440x900です。あなたはどちらのために設計しますか？
今日販売されているほとんどのモニターは横向きの方向にあることは事実ですが、ウェブサイトを設計するとき、視聴者が使用する画面解像度を正確に知る方法がないことも考慮する必要があります。幅1024以下の画面解像度で操作しているインターネットユーザーの15％はまだいます。これは、情報を表示するためにスクロールする必要がある前に、水平方向に拡張するための多くの余地を残しません。さらに、一部のユーザーは完全に最大化されたウィンドウでインターネットを閲覧しません。この問題の唯一の解決策は、ブラウザーウィンドウのサイズに基づいて動的なデザインを開発することです。あなたがこれをやろうとしたことがあるならば、それが絶対に必要とされない限り、その王室の痛みとして、あなたが再びそれを試みることを非常にためらうでしょう。すでに述べたように、幅を小さくする理由は他にもたくさんあります。
理由はいくつかあります。
主にテキストのドキュメントは伝統的に縦長の比率であるため、ウェブはそれを維持します。
短い行のテキストを読む方が簡単です。引用はしていませんが、ガイドラインというよりも標準であるという点で、非常に一般的な設計上のアドバイスです。
幅の狭いデザインの方が柔軟性があります。ブラウザーをワイドスクリーンモニターのフルスクリーンの半分だけにウィンドウ表示し、その横に何か（通常はテキストエディターまたは別のブラウザーウィンドウ）を置きます。私がcanのWebページの幅を1920ピクセルにしているからといって、常にそうである必要はありません。実際には、Webデザイナーが自分のページをどのように表示するか（または表示する必要があるか）について想定することは、少し大げさです。 「このページはIE6の800x600で表示するのに最適です」への不適切なフラッシュバックを教えてくれます。
より適切な選択は、任意の幅に拡大縮小できるリキッドデザインであり、CSSはそれをテキストに対して適切に機能させます（ほとんどの場合、ほとんどの最新のブラウザーでは）。しかし、画像、埋め込みビデオ、フラッシュ、およびその他の最新の埋め込みオブジェクトは、多くの作業をせずに常にこの種のデザインを台無しにします。適切なスケーリングに長い時間がかかる柔軟なスケーリング設計と、実際の狭い固定幅の実証済みの設計のどちらを選択するかを考えると、かなり簡単な（安価な）パスを選択する人がかなりいます。
最も柔軟な選択は、ユーザーが調整できるWebパーツキャンバスであるiGoogleのようなものです。次に、テキストの幅と幅を自由に設定し、テキストと画像のブロックを好きなように配置します。ここで、アクセスするすべてのサイトの悪夢を想像してみてください。読み込める前にカスタマイズが必要です。
現在のところ、サイトのWebデザイン標準は1024px以上の画面解像度に対応するために960px幅で開発することです（水平スクロールバーなし）。誰もが新しい24インチの新しいモニターを使用するわけではないので、これは最小要件です。 （解像度の小さい新しいハードウェアであるタブレットやネットブックを考えてください）
Webサイトのデザインの解像度は対象となる視聴者の影響を受け、それに応じて調整する必要があることを覚えておく必要があります。
また、使いやすさの点では、テキストの行は約11から14ワード幅（行の高さを調整するともっと長くなる可能性があります）にする必要があるため、すべてのWebサイトが流動的なデザインを処理できるわけではありません。
せいぜい、コンテンツゾーンの外側のページが空ではないという印象を訪問者に与えたくない場合は、ユーザーの画面のサイズに合わせて拡張され、テクスチャ/カラーのストリップを追加できます。 （たとえば http://www.cnn.com/ はヘッダーにのみ適用されますが、ページ全体に適用できます）
ほとんどのWebサイトがポートレートモードでの表示用に最適化されているのはなぜですか？
横向きも完全に実行可能なオプションであるのに、なぜ縦向きモードで紙を印刷するのですか？
多くの人が言っているように、2行または3行の長い行を読むよりも、短い行を多く読む方が簡単です。
それとは別に、1280 * xピクセルをコンテンツで埋める場合、Webページは乱雑になり、何に対処する必要があるか誰も知らないでしょう。 Webページは、すべてのタスクではなく、特定のタスクを実行する必要があります。
Web 2.0のトレンドは、ページに表示する情報を減らし、行動を促すフレーズを明確かつ簡潔にすることを教えてくれます。この一般に受け入れられている設計哲学は、あなたが提案しているものと正反対です。
1024解像度で開発する理由はたくさんありますが、クラッターファクターはより重要なものの1つだと思います。
私はあなたがWindows 7のように見えるものを使用していることに気付いたので、答えは： Win + ←
ただし、重大な注意事項：Webサイトが垂直方向に最適化される主な理由は、CSSで静的な幅のレイアウトをコーディングし、複数のプラットフォームで適切なクロスブラウザーに見えるようにするのが簡単なことです。流体幅は時々使用されますが、読みやすさには向いていません。
映画を見たりゲームで遊んだりするときは、横方向のスペースをすべて使い尽くすのは素晴らしいことですが、読書では、頭を回転させなくても目が自然にスキャンできるように、小さな列のテキストだけが本当に必要です。 Webページの左側と右側にクラップを追加すると、ページの主要コンテンツの邪魔になる傾向があるため、多くのデザイナーは、空白のままにして魅力的な空白を作成します。
さらに、あなたがNiceモニターを持っているからといって、大多数の人がNiceワイドスクリーンモニターを持っているとは限りません。レイアウトサイズを確認するのに最適なリソースは google's browsersize です。