2014年11月2日

スマホ用サイト、縦向きと横向きでCSSの指定を切り替える記述方法

Media Queries

2014年現在、あるのが当たり前になりつつあるスマートフォン用サイト。PC用サイトとの大きな違いの一つに「縦向きと横向きで画面サイズが変わる」という点があります。

スマホ用サイトを制作する際は、同じ縦向きでも機種ごとに画面サイズが多少異なるため、元々ある程度横幅が変動しても対応できるように組はしますが、「この場所だけは、横向きの場合はwidth:460px、縦向きの場合はwidth:300pxにしたい」という時があります。

CSS記述例

@media only screen and (orientation : landscape) { /*横向きの際に適用*/
#main_visual{ width: 460px;}
}
@media only screen and (orientation : portrait) { /*縦向きの際に適用*/
#main_visual{ width: 300px;}
}

このように記述することで「#main_visual」は、横向きの場合はwidth:460px、縦向きの場合はwidth:300pxになります。

Media Queries(メディアクエリ)

これはMedia Queries(メディアクエリ)という書き方で、横向きの際に適用したい内容は『orientation : landscape』、縦向きの際に適用したい内容は『orientation : portrait』として、{}の中にそれぞれCSSを記述することで縦向きと横向きそれぞれのCSSを適用できます。

以上、縦向きと横向きでCSSの指定を切り替える記述方法「Media Queries(メディアクエリ)」についてでした。

, ,

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です