tsukalogo0000

alt

CSS3のMedia Queries(メディアクエリ)

iphoneとipadに新しく搭載されたiOS5は、何故か高容量のgifアニメをプレビューしないみたいでiphoneとかでこのページを見るとblogのメインビジュアルが読み込み不良で途中で補色反転してしまっていた。そのままだと私のweb技量が疑われるのでやむなくCSSハックして静止画に差し替えるという手段に…
まず、基本的には読み込む際、端末やブラウザによって切り替える事になるのだがスマホを判別させる場合ピクセルサイズでCSSを切り替えるやり方が主流。(よって画面が小さいと効果が発動する)480ピクセルがiphoneで1024ピクセルがipadのサイズ
@media only screen and (max-device-width: 480px){
.任意のclass {
iphoneサイズ用CSS指示
}
}maxは480pxより小さい場合にスタイルが適用されるという事
@media only screen and (max-device-width: 1024px){
.任意のclass {
ipadサイズサイズ用CSS指示
}
}maxは1024pxより小さい場合にスタイルが適用されるという事
※オレンジ文字は通常のCSSを入れ込む
色の差し替えはもちろん、画像の入れ替えやdispleynoneで要素を消し去る事も可能だ。もともとスマホではちまちましたギミックや小技は演出しなくていいので、細かいindex用gifアニメも消去しました。これで見事にメインビジュアルは静止画に、その他細かい素材は消去してスッキリバグも無しという感じです(以下に詳細があります)
[CSS]CSS3のMedia Queries(メディアクエリ)の使い方と実装例
http://coliss.com/articles/build-websites/operation/css/css3-media-queries.html

要は、flashを付けた時にswf読み込めないブラウザではjpg画像に入れ替えるのと同じ要領です。
ついでにadbeflashについてこんな記事が…。


Steveの哄笑が聞こえる–Adobeが
モバイルデバイス用のFlashを断念

by MG Siegler on 2011年11月9日

【抄訳】
それは2008年のことだった。あるモバイル関連のイベントでぼくは討論会に招待され、業界の主立った企業の人たちと席を共にした。その一人が、 Adobeから来た紳士だった。その前年にiPhoneが出たが、Flashのサポートがないことが、大きな話題になった。怒る人のほうが、多かった。そ の討論会にも、怒れる人が何人かいた。Adobeから来た男は、みんなに確言した: モバイルのFlashはもうすぐ出ます。すばらしいできばえになるでしょう。Appleがパフォーマンスを理由にiPhoneに乗せないのは、ばかげてい ます。

Adobeは、2009年にも同じことを言った。
2010年にも言った。
2011年になっても、まだ言っていた。

Adobeが、モバイル用のFlashプレーヤーの開発をやめる、というニュースを今夜(米国時間11/8)読んだとき、ぼくは不謹慎ながら、思わずニ ターッと笑ってしまった。それは、ZDNetに載ったJason Perlowのスクープ記事だった。こんな発表が、Adobeからあるらしい:
モバイルデバイス上のFlashの今後の力点は、Flashデベロッパが、すべての主要なアプリストア向けのネイティブアプリに、Adobe AIRをパッケージできるようにすることに置かれる。モバイルデバイス用のFlash Playerを新しいブラウザや、OSの新バージョン、あるいはデバイスの新しい構成に向けて適応させる作業は、今後行わない。弊社のソースコードをライ センスされている一部の者は、作業を続行し、独自の実装をリリースしてもよい。現在のAndroidとPlayBookの構成に対しては弊社がサポートを 続行し、重要なバグフィクスやセキュリティアップデートを提供していく。
この声明には、HTML5への注力も言及されていて、Perlowによれば発表は明日(米国時間11/9)あたりらしい。Adobeは、モバイルデバイス上にFlashを載せる努力を、終わらせるのだ。
これまで3年あまりも、モバイルFlashはもうすぐ出る、もうじき完成する、と言い続けていたのだから、これはおかしい。やっと2010年6月にAndroid用が出たが、完成にはほど遠かった。もっとあっさり言えば、ひでぇものだった。
【中略】
2010年の4月には、Steve JobsがAppleのWebサイトでFlashに最後通牒を突きつけた。Thoughts on Flashというシンプルなタイトルの記事でJobs は、Flashという技術を、わずか1700語そこらで破壊した。とくに痛烈な2点は、(1)Flashはモバイルデバイス上でまともに動いたことがな い、(2)Adobeは2009年以降、年に何度も、出す出すと言ってて結局出さないオオカミ少年だ。今や、誰も本気にしない。
【中略】
Steveが、天国で大笑いしている声が、聞こえる。
[原文へ][jpTechCrunch最新記事サムネイル集]
[米TechCrunch最新記事サムネイル集](翻訳:iwatani(a.k.a. hiwa))

そうこうしてるうちにiOS5.0.1修正版届けられましたね♪


 

コメントを追加

お名前:
メールアドレス:
Webサイト:
件名:
コメント: