2015年9月26日(土) 13時09分04秒 [仕事]

ウェブを閲覧しているスマートフォンが縦向きか横向きかをCSSで判別してデザインを分ける方法

ウェブサイトで、モバイル端末向け(その中でも特に小型のスマートフォン向け)のデザインを作成するとき、アクセス者の端末が横向き(画面が横長)なのか縦向き(画面が縦長)なのかによってデザインを分けたい場合があります。具体的にはメニューの位置とか。スマートフォンの場合、(当たり前ですが)縦向きだと横幅が狭すぎて、横向きだと高さが狭すぎるので。(^_^;;;

閲覧者の端末が横向きなのか縦向きなのかに応じてデザインを分けるには、JavaScript等を活用するまでもなくCSSだけで実現できます。CSS3のメディアクエリを使うだけです。実際には端末の向きを判別するわけではなく、画面(ブラウザの描画領域)の縦横比から「横長」か「縦長」かを判別しているだけですが。(まあ、結果は同じことです。)

というわけで、CSSを使って画面の向きに応じてデザイン(スタイルシート)を分ける方法をAll Aboutで解説しました。

■CSSで画面の横向き/縦向きを判別して表示を分ける方法（＠All About ホームページ作成）

他にも、見栄えに凝ったデザインのページを作る際などに（閲覧者の画面が横長なのか縦長なのかによって）スタイルを調整したい際にも活用できると思います。