にしし ふぁくとりー(西村文宏 個人サイト)

Presented by Nishishi via Movable Type. Last Updated: 2015/09/27. 14:10:22.

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

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

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

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

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

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

コメント

コメント数: 0件

コメント投稿欄 この日記に対するコメント投稿を歓迎します。

保存しますか?



※本文中にURLは書けません。(書くと投稿が拒否されますのでご注意下さい。)

※投稿内容は、実際にページ上に掲載される前に、管理者によって確認される設定にしている場合があります。その場合は、投稿後にその旨が表示されます。たいてい1~2日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

トラックバック

このエントリーへのトラックバックURLを表示するにはここをクリック
※スパム防止のため、トラックバックURLは別ウインドウで表示します。(JavaScriptが有効でないと表示されません。)

--- 当サイト内を検索 ---