main

サイトをレスポンシブにするためのメディアクエリの書き方


CSS3で新しく追加されたメディアクエリという仕様。
メディアクエリでは何ができるのでしょうか。
今回は、 レスポンシブデザインの手法のひとつであるメディアクエリについてご
説明していきます。

 

メディアクエリの役割

メディアクエリの役割は、 ユーザーのデバイス環境に応じてスタイルを切り替え、
そのデバイス環境に最適なスタイルを提供することです。
sample

 

メディアクエリの条件に指定可能な属性

条件に指定できる主な属性は以下の6つとなります。

Max Width : ブラウザの表示領域の最大幅を指定します。

Min Width : ブラウザの表示領域の最小幅を指定します。

Max Device Width : デバイスの最大幅を指定します。

Min Device Width : デバイスの最小幅を指定します。

Device Pixel Ratio : デバイスの解像度を指定します。

Orientation : デバイスの向きを指定します。

 

 

メディアクエリの書き方

メディアクエリは、CSSに記述する方法とHTMLからCSSを読み込む方法があり
ます。

基本的な書き方は以下のサンプルのようになります。

 

【CSSに記述する場合サンプル】

 

【HTMLから読み込む場合サンプル】

 

[email protected] screen and」以降の部分が属性の指定となります。

この場合、 ブラウザの表示領域の幅が「480px まで」、「 768px まで」、
「1024pxまで」を条件として各CSSに記述されているスタイルが適用されるこ
とになるのです。

 

次に、 属性ごとに書き方を見ていきましょう。

 

【Max Width】

この場合、 ブラウザの表示領域の幅が480pxより小さい場合に適用されます。

 

【Min Width】

この場合、 ブラウザの表示領域の幅が480pxより大きい場合にスタイルが適用
されます。

 

【Max Device Width】

この場合、 デバイスの幅が480pxより大きい場合にスタイルが適用されます。

 

【Min Device Width】

この場合、 デバイスの幅が480pxより小さい場合にスタイルが適用されます。

 

【Device Pixel Ratio】

この場合、 画像1px をデバイス上で2px として表示するようにスタイルが適用さ
れます。

 

【Orientation】

この場合、 デバイスの向きによってスタイルが適用されます。

 

IE6~8の対応

メディアクエリはIE6~8の古いバージョンには対応していません。
そのため、jQueryのプラグイン「css3-mediaqueries.js」を読み込んで対応する
必要があります。

 

HTMLに以下のスクリプトを記述します。

直接リンクを貼らずにダウンロードしたファイルを使用することも可能です。
ダウンロード:https://github.com/livingston/css3-mediaqueries-js

 

プラグインを使用することにより、 新旧両方のブラウザに対応することが可能に
なります。

 

まとめ

いかがでしたでしょうか。
レスポンシブデザインは、今後、ますます需要が多くなっていくことでしょう。
メディアクエリは少し難易度の高い技術かもしれませんが、デバイスの多様化
に合わせて、 ぜひ使いこなせるようにしたいですね。

 

 

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Article【女子必見!】かわいらしい丸文字のフォントまとめ