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(メディアクエリ)」についてでした。
