Webサイトに最適なピクセルサイズ

コンテンツ

• 静的VS流体レイアウト
• 標準画面サイズのフィルタリング
• モバイル画面
• ゴールデングリッド

携帯電話、タブレット、およびコンピュータモニタには、用途、ユーザー、および寸法が異なります。そのため、サイトの最適なレイアウトサイズは、そのサイトの主要ユーザーのニーズによって決まります。あるサイトが1680 x 1040ピクセルの解像度のワイドスクリーンディスプレイで標準ユーザーによって表示されることを意図している場合、サイトのサイズはメインブラウザ画面に合うように作られなければなりません。このサイトがモバイル機器での使用を目的としている場合は、はるかに小さい画面用に作成する必要があります。

あなたのウェブサイト、ユーザー、それにアクセスするために使用されたデバイスタイプのコンテンツは、最も適切な寸法を決定します （コムストック/コムストック/ゲッティイメージズ）

静的VS流体レイアウト

最初の考慮事項は、サイトでピクセル単位で定義された寸法が必要かどうかです。割合を使用して、ブラウザウィンドウのサイズに応じて動的に領域のサイズを変更する「流動的な」レイアウトを作成できます。テキストと組み合わせて使用​​する場合は、モバイルブラウザだけでなく標準的な画面解像度のサイトを作成するときにも、流動的なレイアウトを選択することをお勧めします。たとえば、CSSコンテンツの宣言で "width = 960x"の代わりに "width = 100％"を使用することで、流動的なレイアウトが実現されます。

標準画面サイズのフィルタリング

「固定」または流動的なレイアウトを作成するには、スクロールバーとツールバーの両方を考慮して、div、wrapper、またはメインコンテンツテーブルの幅をユーザーのブラウザウィンドウに合わせる必要があります。あなたはまた大多数のためにすることを検討するべきです。現在、ブラウザの80％以上が1024 x 768ピクセル以上の画面解像度を使用しています。それはあなたが1680×1024ピクセルのためにそれをすることができることを意味します、しかしそれは真ん中の地面に投影することが得策です。 960または980ピクセル幅は、1024 x 768以上の解像度を使用している人がブラウザで快適にコンテンツを表示するために使用される信頼できる2つの方法です。このシステムは、サイト全体を表示できるモバイルデバイスにも適しています。きつすぎる場合は、1080が次に最適な幅です。標準的なブラウザの高さを任意の解像度で思い出して、スクロールが必要になる「折り」またはポイントの上の最も重要な情報を保持してください。

モバイル画面

サイトをさまざまなモバイルデバイスで見栄えよくしたい場合は、そのデバイス専用にするか、モバイルブラウザでサイトの「モバイル」バージョンを表示するために使用される特別なスタイルを作成する必要があります。 240 x 320の解像度は、iPhoneなどのほとんどのスマートフォンおよびインターネットデバイスの現在の標準です。多くのデバイスはポートレートモードとランドスケープモードの両方をサポートしているため、「流暢な」パーセンテージまたはレイアウトを使用することをお勧めします。幅320ピクセルに設定されているWebサイトを作成すると、縦長モードでアクセスすると、そのWebサイトはユーザーにとって切り取られて表示されることがあります。

ゴールデングリッド

レイアウトの寸法を決定するための最善のシステムは、おそらくグリッドシステムを使用することです。グリッドは、所定の幅内で完全にバランスのとれた領域を計算して、メインレイアウトまたはコンテンツ領域内の要素をどのように拡大縮小するかを決定します。これらの要素には、宣伝用の箱、バー、広告スペース、または段落が含まれます。例として、合計幅1080ピクセルを使用し、金色のグリッドを使用して分割したレイアウトでは、両方ともマージンを使用して、ブログ投稿用の領域の幅を739ピクセル、右側のバーの幅を780ピクセルにします。 10ピクセルの。その結果、完璧に調整されたバランスのとれたレイアウトが完成します。 gridsジェネレータシステムにアクセスして、いくつかの異なるグリッドを試すことができます（「参考文献」を参照）。