トップページ > 携帯端末関連 > スマートフォンやタブレット向けサイトの横幅の比較と CSS の切り替え方

スマートフォンやタブレット向けサイトの横幅の比較と CSS の切り替え方

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

スマートフォンやタブレット向けサイトの横幅の比較と CSS の切り替え方

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

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

  ディスプレイの横幅
~ 599px 600px ~ 959px 960px ~ 1,280px 1,280px ~
フィーチャーフォン向け 縦置きしたスマートフォン
縦置きしたタブレット向け
パソコン向けのブラウザの幅を狭くした場合
パソコン向け
横置きしたスマートフォン
横置きしたタブレット
パソコン向け

2. 携帯端末ごとに CSS を切り替える方法

Web サイトを作成する際に、パソコン向け、スマートフォン向けとそれぞれの端末サイズに合わせた Web サイトを作成できると管理は楽だが、作成規模が大きくなるデメリットがある。
そのため、パソコンやスマートフォンを問わずに 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 を利用した Web サイトを表示したとき、またはブラウザのサイズを変更するたに自動的に横幅に合わせた CSS が適用される。例えば横幅 1,280px 以上のパソコン向けサイトでは 2 列カラムのレイアウトとし、1,280px より小さいサイズの場合は 1 列カラムになるように CSS を定義すると 1 つの HTML でパソコン版とスマートフォン版のレイアウトを切り替えることができる。

関連記事