[katyos.Lab]


1 | 2 | 3 | 4 | 5 |oldest Next >>

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)
最近の画像つき記事
 もっと見る >>

Facebookで反応が良かった6月のWeb制作者おすすめ記事

2011-07-01 08:52:11 Theme: 便利なCSSテクニック
AD
いいね!した人  |  Comments(0)  |  リブログ(0)

今注目のメディアクエリを使ったWebサイトリンク集「Media Queries」

2011-06-06 20:37:33 Theme: 便利なCSSテクニック
今注目のメディアクエリを使ったWebサイトリンク集「Media Queries」

Media Queries

今注目のCSS3のメディアクエリを使ったWebサイトが見れます。
ワンソースで複数のデバイスに対応させたいときに参考になります。
これを使うと、iPhoneやAndroidといったスマートフォンは画面サイズが違うため
スクリーンサイズに合わせてCSSを調整できます。
ワンソースですがiPhoneやAndroidで見ても綺麗に見ることができます。


Clean Air Commute Challenge



Glitch




マルチデバイス対応の振り分けは、ユーザーエージェントを判別して
iPhoneやAndroidに最適化されたサイトを表示します。
しかし更新やサイトの修正・変更があった場合にそれぞれメンテナンスを行わないと
いけません。
しかし、これを使うと「ワンソース・マルチユース」に対応することができます。

設計が難しそうですが、チャレンジしてみたいですね。
メディアクエリに対応したサイトをもっと見たい方はこちら
Media Queries
AD
いいね!した人  |  Comments(0)  |  リブログ(0)
1 | 2 | 3 | 4 | 5 |oldest Next >>

AD

Ameba人気のブログ

Amebaトピックス

      ランキング

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

      ブログをはじめる

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

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

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

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

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