【コピペ用】レスポンシブに使うときのCSSメモ書き(Media Queries)

[最終更新日]2013年3月25日

wordpressカスタマイズ

今はなんといってもレスポンシブwebデザインでしょ!
スマホ用、タブレット用など画面幅に応じて対応できるCSSの分岐です。
Media Queriesっていうやつです。
うろ覚えですぐ忘れるのでコピペ用に保存しておいておこう。
作るときこの参考になるメモ書きがないとちょっと不安ですので。

そして、これをワードプレスのテンプレに反映すれば、
今っぽいレスポンシブwebデザインというのができるのだ!

非常に重要なのでコピペ用としてまとめておきます。
毎回これを見ながらサクサク作っちゃおう!

必要な分岐だけ使えばいいだろう。

なんといってもスマホの勢いは年々増すばかり。
iphoneやandroidのスマートフォンや、ipadなどのタブレットとか。
いろいろ対応できますね。

スマートフォン(縦長・横長)の場合

@media only screen and (min-device-width : 320px)
and (max-device-width : 480px) {
/* ここにスタイルが入ります */
}

スマートフォン(横長)の場合

@media only screen and (min-width : 321px) {
/* ここにスタイルが入ります */
}

スマートフォン(縦長)の場合

@media only screen and (max-width : 320px) {
/* ここにスタイルが入ります */
}

iPad(縦長・横長)の場合

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* ここにスタイルが入ります */
}

iPad(縦長)の場合

@media only screen and (min-device-width : 768px) and
(max-device-width : 1024px) and
(orientation : portrait) {
/* ここにスタイルが入ります */
}

デスクトップのブラウザ用(横長)の場合

@media only screen and (min-width : 1224px) {
/* ここにスタイルが入ります */
}

大きいモニター用の場合

@media only screen and (min-width : 1824px) {
/* ここにスタイルが入ります */
}

iPhone4などの高解像度用の場合

@media only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* ここにスタイルが入ります */
}

レスポンシブ対応できるjqueryプラグイン

こんなものがあったので、ついでに書いておきました。
jqueryでもできるので、一度挑戦してみるとしよう。

【ダウンロード】elclanrs / jquery.columns

【デモサイト】elclanrs / jquery.columns

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.columns.js"></script>
<link rel="stylesheet" href="jquery.columns.css" type="text/css" />
  • Twitterをフォロー
  • Facebookページを見る
  • RSSを登録
  • follow us in feedly