超入門:Webデザインと解像度のハナシ

文:Tony Patton(TechRepublic) 翻訳校正:原井彰弘
2008-01-07 17:45:00
  • このエントリーをはてなブックマークに追加

適切なデザイン

 HTMLやCSSのようなウェブ標準技術をうまく利用すれば、解像度に関係なく利用できるサイトを構築することが可能になる。またJavaScriptを利用すれば、訪問者の解像度を調べて、その値に応じてサイトの表示を調整することも可能になる。具体的には、JavaScriptのscreenオブジェクト(JavaScriptのランタイムエンジンによって自動的に作成される)を用いると、ディスプレイ画面のサイズや表示可能色数に関する情報が取得できる。screenオブジェクトには以下のようなプロパティが存在する。

  • availHeight -- 画面の高さから、OSのインタフェースとして(ほぼ)常に表示されるコンポーネントの高さを除いた値をピクセルで返す。
  • availWidth -- 画面の幅から、OSのインタフェースとして(ほぼ)常に表示されるコンポーネントの幅を除いた値をピクセルで返す。
  • colorDepth -- カラーパレットが使われている場合は、そのビット深度を返す。使用されていない場合は、screen.pixelDepthプロパティの値が返される。
  • height -- ディスプレイ画面の高さを返す。
  • pixelDepth -- ディスプレイ画面の画面解像度(ビット/ピクセル)を返す。
  • width -- ディスプレイ画面の幅を返す。

 以下のスクリプトでは、screenオブジェクトの値によって読み込むページを決めている。

<SCRIPT language="JavaScript">
<!--
if ((screen.width >= 1024) && (screen.height >= 768)) {
window.location="high_resolution_version.html";
} else {
window.location="low_resolution_version.html";
}
//-->
</SCRIPT>

選択を行おう

 多くのウェブ開発者やウェブデザイナは、800x600の画面解像度を用いることに疑問を感じている。彼らはより高い解像度に移行したいと思っているのだ。しかし、それは必ずしも認められるものではない。適切な解像度は対象としている利用者層によって異なるのである。ただし、一般的なウェブ標準に従って、解像度にかかわらず適切に表示されるようにサイトを設計すれば、この問題は回避できるかもしれない。

この記事は海外CNET Networks発のニュースをシーネットネットワークスジャパン編集部が日本向けに編集したものです。海外CNET Networksの記事へ

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]