Media Queries を使うときに参考にしたいサイト

Category : CSS

CSS3 の Media Queries を使ってみたいと思ったので、関連サイトを集めてみました。
いつもどおり有名どころが多いので見ている方も多いかもしれません。

仕様・解説など

Media Queries
W3C にある Media Queries の仕様。
CSS3 Media Queries
Web Designer Wall の記事。サンプル多め。
Different Stylesheets for Differently Sized Browser Windows | CSS-Tricks
CSS-Tricks の記事。非対応ブラウザ用に jQuery を使ってスタイルシートを切り替える方法も紹介されている。

ライブラリ・プラグインなど

css3-mediaqueries.js
CSS3 Media Queries 非対応ブラウザでも Media Queries を使えるようにするための JavaScript ライブラリ。他のライブラリには依存していない。
Respond.js
同じく非対応ブラウザでも Media Queries を使えるようにするための JavaScript ライブラリ。他のライブラリには依存していない。
320 and up
これも単体で動く。Media Queries を使えるようにする。機能をサポートする他のスクリプトを同梱している。機能が多いので少し容量が大きい。
Adapt.js – Adaptive CSS
正確にはちょっと違うけど、似たような機能を提供するための JavaScript ライブラリ。単独で動く。link 要素で指定した CSS を切り替えるタイプ。960 Grid System の人が作ったみたい。
Media Queries / Dynamic resolution dependent layouts
同じく非対応ブラウザでも Media Queries を使えるようにするためのスクリプト。こちらは jQuery プラグイン。
Window Size bookmarklet to test/debug CSS3 Media Queries
JossCrowcroft.com によるブックマークレット。現在のウィンドウサイズを表示してくれる。
Media Queries
Media Queries を使っているサイトのまとめ。ドメイン名が素敵w

Media Queries でモバイル対応することに関する記事

英語だし長い記事ですけど、目を通しておいたほうがいいかと思います。

Leave a Reply