2012年03月06日

【CSS3】スマホサイト制作 - 縦横表示切り替えに対応するためのCSS記述方法

   
便利な便利なスマホですが、サイトの作り手としては便利な分、気を使わなくてはいけないポイントも多く、疲れる対象になるコトもあります。そんな疲れるポイントの一つが「縦向きと横向きで表示サイズが異なる」事。全てをパーセント指定すれば難なく表示されるだろうが、そうはいかないのが困ったものです。

JSか?PHPか?何かしらプログラムで振り分けを検討していたところ。なんとCSSの記述で縦向きと横向きそれぞれの記述が可能なのですね。しかもその書き方はとてもシンプル。

例)
@media only screen and (orientation : landscape) { /*横向きの際に適用*/
#main{ width: 480px;}
}

@media only screen and (orientation : portrait) { /*縦向きの際に適用*/
#main{ width: 320px;}
}

見てすぐに分かるとおり、横向きの際に適用したい内容は『orientation : landscape』、縦向きの際に適用したい内容は『orientation : portrait』に、それぞれ書くだけでOK。簡単。素晴らしい機能ですね。

先日書いた『【CSS3】縦横の表示を切り替えた際にフォントサイズを同じにする記述』と合わせると、縦でも横でも同じイメージでの作成が容易に可能。分かれば便利なスマホ向けCSS3の記述でした。
posted by Liang Zhaohong at 00:55 | Comment(0) | TrackBack(0) | CSS | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。