タグ: ウェブサイト作成

トップページ > 携帯端末関連 > スマホやタブレット用ウェブサイトの横幅の比較と CSS でのレイアウト切り替え方法

スマホやタブレット用ウェブサイトの横幅の比較と CSS でのレイアウト切り替え方法

[最新更新] 2021年10月16日
[初回公開] 2021年05月07日

ウェブサイトやアプリを作成する際にパソコンだけでなくスマートフォンやタブレットを利用する人ではどのように画面に表示されるか配慮する必要があり、利用される端末ごとにディスプレイのサイズが異なるため各端末の横幅の比較と CSS で端末ごとにレイアウトを切り替える方法について紹介する。

1. スマートフォンなど携帯端末ごとの横幅のピクセル比較

スマートフォンやタブレットなど機種によってディスプレイサイズが異なるため Web サイト作成の際には端末ごとに横幅が異なる点を考慮してデザインとレイアウトを行うと利用者にって見やすく、使いやすいサイトになる。
仮にパソコン向けに Web サイトを作成した場合、パソコンは横長であるのに対してスマートフォンやタブレット端末では縦長になるため横スクロールが発生して使いづらいサイトになってしまう。
端末ごとの詳しい横幅のサイズは下表となる。

2. スマートフォンの機種ごとの横幅のピクセル比較

スマートフォンの画面解像度は横幅が 600 ピクセルから 959 ピクセルほどであるが、機種を比較してみるとディスプレイサイズや画面解像度が異なっているためシェア率が高い機種の画面解像度を基準にデザインやレイアウトを決める必要がある。
下の表は iPhone の画面解像度を機種別にまとめたものである。

2-1. デバイスピクセルと CSS ピクセルの違い

画像解像度にはデバイスピクセルと CSS ピクセルの 2 種類があり、携帯機種のメーカーサイトの仕様など一般的にはデバイスピクセルで記載されていることが多い。
しかし、最近のディスプレイの性能が高くなったことで実際の解像度とブラウザで表示する場合の解像度が分けられることがあり、後者のことを CSS ピクセルと呼ぶ。

デバイスピクセルは実際のディスプレイの解像度で、ホーム画面の背景画像の大きさや撮影した写真の表示に影響する。
対して CSS ピクセルはブラウザで利用されるピクセルで、デバイスピクセルよりも小さい解像度となるため画像作成時には見え方が異なる点に注意が必要である。

デバイスピクセルと CSS のピクセルの比率はデバイスピクセル比と呼ばれ、CSS ピクセルを 2 倍または 3 倍したものがデバイスピクセルとなるが、機種によって同じデバイスピクセルでも機種が異なれば CSS ピクセルが異なることがある。

3. 携帯端末ごとに CSS でレイアウトを切り替える方法

ウェブサイトを作成する際に、パソコン向け、スマートフォン向けとそれぞれのディスプレイのサイズに合わせて HTML と CSS を用意すると制作過程での管理は楽になるが、パソコン向けとスマホ向けそれぞれの作業が必要となるため制作期間が長くなったり、制作コストが大きくなるデメリットがある。
そのため、パソコンやスマートフォンと端末を問わずに 1 つの HTML だけ用意して CSS のみで各端末ごとのレイアウトを切り替える方法がある。

/* パソコン向け（1,280px 以上） */
ここに 1,280px 以上向けの CSS を記載
/* パソコン向け（991px ～ 1,200px） */
@media( max-width: 1,280px ){
    CSS を記載
}
/* タブレット向け（768px ～ 991px） */
@media( max-width: 991px ){
    CSS を記載
}
/* スマートフォン向け（767px 以下） */
@media( max-width: 767px ){
    CSS を記載
}

CSS でパソコンやスマートフォンごとにレイアウトを切り替える場合には上記のように @media を利用する。
@media を利用したウェブサイトを表示した直後、またはブラウザのサイズを変更するたびに自動的に横幅を取得してそのサイズに合わせた CSS が適用される。
例えば横幅 1,280px 以上のパソコン向けサイト用に 2 列カラムのレイアウトとし、スマホやタブレット用に横幅 1,280px より小さいサイズの場合は 1 列カラムになるように CSS を用意すると、1 つの HTML でパソコン版とスマートフォン版のレイアウトを切り替えることができる。

関連記事