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
Facebookで反応が良かった6月のWeb制作者おすすめ記事


私がツイッターやブログなどでWeb関連の最新情報を収集していて、これは良いと思った記事を
Facebookに載せています。その中でも反応が良かった記事をピックアップしました。


1.Facebook公認:フェイスブックページを検索上位に表示させる6つのポイントを読み解く

2.画像の指定箇所からグラデーションを抽出し、スタイルシートを生成するオンラインツール -Gradient-Scanner

3.異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」

4.くぼんだような表現ができる14色のボタン&角丸長方形活用術【スタイルダウンロードつき】 | Fireworksマニア

5.和や京都っぽさを演出するのに使えるPhotoshopのパターンとブラシ 全321個 + ブラシファイルの中身が見れるアプリケーション

6.シンプルで使いやすいGitHub風のボタンを簡単に実装できるスタイルシート

7.少しざらっとした布地のテクスチャ素材とそれを創るPhotoshopのパターン素材

8.スタイルシートの量を少し減らした、新しいclearfix -micro clearfix

9.Youtube動画を透過(opacity)できるjQueryプラグイン・YTPLAYER

10.手軽にデザインを変更できるCSS3ボタンを作る為のフレームワーク・CSS3 Buttonize Framework
AD
今注目のメディアクエリを使ったWebサイトリンク集「Media Queries」

Media Queries

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


Clean Air Commute Challenge



Glitch




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

設計が難しそうですが、チャレンジしてみたいですね。
メディアクエリに対応したサイトをもっと見たい方はこちら
Media Queries
AD