[katyos.Lab]


CSSのみでスマフォ、タブレットの縦横を判別してデザインを切り替える

2012-10-11 10:50:49 Theme: 便利なCSSテクニック


iPhoneやAndroidのスマートフォン端末やiPadのタブレット端末の特長を活かしてWebサイトを縦・横でデザイン・レイアウトを切り替えたいときに簡単に実現できる方法を紹介。
javascriptを使わずに縦長なのか横長なのかを判別してスタイルシートで切り替えることができます。

縦で持っている

外部スタイルシートの場合
<link rel="stylesheet" media="all and (orientation:portrait)" href="tate.css">

スタイルシート内に記述する場合
@media screen and (orientation:portrait) {
body { color: #000; }
}

横で持っている

外部スタイルシートの場合
<link rel="stylesheet" media="all and (orientation:landscape)" href="yoko.css">

スタイルシート内に記述する場合
@media screen and (orientation:landscape) {
body { color: #ff0000; }
}
AD
いいね!した人  |  Comments(0)  |  リブログ(0)

yopiさんの読者になろう

ブログの更新情報が受け取れて、アクセスが簡単になります

最近の画像つき記事
 もっと見る >>

Comments

[Publish Your Comment]

Add your comment

AD

Ameba人気のブログ

Amebaトピックス

      ランキング

      • 総合
      • 新登場
      • 急上昇
      • トレンド

      ブログをはじめる

      たくさんの芸能人・有名人が
      書いているAmebaブログを
      無料で簡単にはじめることができます。

      公式トップブロガーへ応募

      多くの方にご紹介したいブログを
      執筆する方を「公式トップブロガー」
      として認定しております。

      芸能人・有名人ブログを開設

      Amebaブログでは、芸能人・有名人ブログを
      ご希望される著名人の方/事務所様を
      随時募集しております。