web-tesign > html＋CSS3メディアクエリ
CSS3のMedia Queries（メディアクエリ）
phoneとipadに新しく搭載されたiOS5は、何故か高容量のgifアニメをプレビューしないみたいでiphoneとかでこのページを見るとblogのメインビジュアルが読み込み不良で途中で補色反転してしまっていた。そのままだと私のweb技量が疑われるのでやむなくCSSハックして静止画に差し替えるという手段に…
まず、基本的には読み込む際、端末やブラウザによって切り替える事になるのだがスマホを判別させる場合ピクセルサイズでCSSを切り替えるやり方が主流。（よって画面が小さいと効果が発動する）480ピクセルがiphoneで1024ピクセルがipadのサイズ色の差し替えはもちろん、画像の入れ替えやdispleynoneで要素を消し去る事も可能だ。もともとスマホではちまちましたギミックや小技は演出しなくていいので、細かいindex用gifアニメも消去しました。これで見事にメインビジュアルは静止画に、その他細かい素材は消去してスッキリバグも無しという感じです（以下に詳細があります）
- http://tsukapiko.sakura.ne.jp/のwebdesignインデックス
- http://tsukapiko.sakura.ne.jp/のhtml＋CSS3の記事
- [CSS]CSS3のMedia Queries（メディアクエリ）の使い方と実装例
XHTML+CSSスタイル記事
0
0