Blog

横幅だけじゃない!Media Queryでの指定の方法

2014.11.05Cat:css3 デザイナー

レスポンシブデザインのコーディングではMedia Queryを使用して分岐点を作るのが当たり前みたいな感じになっております。

レスポンシブデザインのコーディングをするのですが、時によって、横幅だけの設定じゃ振りきれないときがあるかと思います。

そんな時は横幅だけでなく、他にもいろいろ設定の仕方があるようです。

まずは基本の設定の仕方から。
Media Queryってそもそも何?というのは割愛させていただきます!
よろしければ以下のサイトをご覧ください!
レスポンシブなサイトをつくりたい!実装方法はじめの一歩
レスポンシブWebデザインはviewportとメディアクエリーからはじめろ! | 株式会社Bark to Imagine

Media Queryの設定の仕方

大きく3通りあります。
それは以下になります。
ちなみに以下の場合は、480px以下の時に適用させたい場合になります。

link 要素の media 属性 で書く場合

@media で書く場合

@import で書く場合

どれがいいとか正解とかはないのですが、僕自身よく使用しているのは@mediaで書く場合です。

この指定ですが、andや,(カンマ)を使用することにより、様々な設定が可能になります。

基本使うのこの程度指定になるかと思います。
僕もこれぐらいしか使うことはありませんが、
実は他にもいろんな指定の仕方がありました。
ざっと挙げると、

max-device-width:
デバイスの最大幅。
min-device-width:
デバイスの最小幅。
device-aspect-ratio:
デバイスのアスペクト比
device-pixel-ratio:
デバイスの解像度(webkit)
orientation:
デバイスの向き portrait,landscape

などなど

いっぱいあり、どういう時に使うんだ?!みたいなのもあります。

詳しくは以下のサイトをご覧ください。

Media Queries

ちなみに、以下の方法でiphoneやipadのみに設定する方法があるようです。

参考にさせていただいたサイトはこちら
デバイスに合わせてCSSを振り分ける「Media Queries」 | Developers.IO

こんなにいろんな指定ができるのはいいような悪いような感じですが。。。

レスポンシブ制作時に役立つサイト

レスポンシブのコーディングをする際に役に立ちそうなサイトをご紹介します。
どちらかと言うと、デバック時に重宝するかもしれません。

Screen Sizes
⇒スマホやタブレットの幅、高さを一覧でわかるサイトです。

CSS3 Media Queries overview
⇒ これは今見ている環境で、@mediaのどれが対応かを表示してくれるサイトです。
先方にだけ、そのデバイスがなく、実機で見れない時に、このサイトを表示してもらい、キャプチャなんかをもらうと話が早いかもしれません。

Author Profile

Y.A

アベと申します。
ディレクター兼デザイナー兼コーダーです。
まだまだ未熟者ですが、日々頑張っています。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ