ホームページの画面サイズ

アダプティブデザインとレスポンシブデザイン
画面のスクロール
ホームページの文字や画像のサイズ
どのような画面サイズでの利用が多いのか?
デバイスタイプ別のシェア（日本）

アダプティブデザインとレスポンシブデザイン

数年前までは、各デバイス毎（PC、スマホ、携帯）に合わせた固定の大きさのページ（アダプティブデザインのページ）を制作する事が主流でした。
昨今はインターネット端末の種類も増え、多種の端末の画面サイズに対応する必要がでた結果、レスポンシブデザインが主流となってきました。
レスポンシブデザインとは、デバイスの画面サイズに合わせて表示を自動的に切り替えることで、どんなデバイスからでも見やすく使いやすいホームページを構築する手法です。
レスポンシブデザインのホームぺージは、ページの記事内容はHTMLと言う言語で記載して、予め決定したデバイスサイズの範囲で、CSS（スタイルシート）を自動切り替えするように制作します。
例えばデバイスの横幅370px以下であったらスマホ用に適したサイズのCSSを利用し、371px～800pxであったらタブレット用に適したサイズのCSSを利用、801px以上だったらPC用に適したサイズのCSSを利用するなどの指定をCSS（スタイルシート）に記載する事で実現します。
この例の様にデバイスの横幅のパターンを数種類用意してデザインを行います。また複数種類用意したCSSでは、スマホサイズならメニューを折り畳み表示させ、PCならサイド部にメニューを表示するなどの制御を行います。
端末デバイスの進化のスピードが早く、各デバイスに適した表示サイズは、年々変化しますが、レスポンシブデザインを採用していればCSSの変更だけで対応できる利点もあります。
※pxはピクセルの事で、デジタル画像を構成する単位です。各デバイスのカタログ等に画面の大きさを示す値で記載されています。

画面のスクロール

一般的に利用者は画面の横スクロールを好みません。（横スクロールの操作は違和感がある人が多いです。）画面の縦のスクロールは違和感を持つ人は少ないです。
この点もレスポンシブデザインは満たしているので、採用される要因となっています。

ホームページの文字や画像のサイズ

ホームページ内の文字サイズは、CSSではpxや、emまたは%（上位のpxに対する比率）や、rem（大元のpxに対する比率）と言う単位で記載されます。
CSSでこれらの指定を使って、各デバイスに表示する文字サイズを変化させています。
（Windows等のPCではptで指定され、pxとptは違う大きさです。）

ホームぺージ内の画像は、画像の横幅を%指定する事で自動的に幅を調整するようにHTMLで指定します。
例えば横幅1000pxでインターネットブラウザを利用していたならば、HTMLで画像に80%指定されていれば、画像は800pxで表示されます。このように画面内に画像がピッタリと収まるように制作されます。