①メディアクエリって何？
②レスポンシブ対応したいけどコードが分からない！
③メディアクエリが効かない
このようなお悩みを解決できる記事をご用意いたしました。
この記事を読めば、コーディング初心者でもメディアクエリの書き方が分かるようになります！
レスポンシブデザインには欠かせないメディアクエリについて一緒に勉強していきましょう。
メディアクエリとは「CSSを適応させる画面設定を表すコード」のことを指します。レスポンシブデザインをコーディングするとき、画面幅に合わせたCSSを適応させたいですよね？そんなとき、このメディアクエリは活躍してくれる必須のコードなのです！
CSSとは？ – HTMLとセットで覚えよう！-
https://www.cyber-bridge.jp/cbmedia/webdesign/css/
【CSS】プロパティ&値の読み方と用途 – ABC順
https://www.cyber-bridge.jp/cbmedia/webdesign/css-property/
まず、メディアクエリはCSSに記述するコードです。基本式は以下のようになっています。
@media メディアタイプ and (画面幅を指定するCSS: 画面サイズpx){適応させたいCSS}
また、HTML側にも<head>内に「viewport」という表示領域を指定するmeta要素が必要です！忘れずに記述しましょう。
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
上記の記述例は、meta要素で「viewport（表示領域）」を指定し、contentで「画面幅をデバイスのサイズ、初期表示時の倍率は1倍」ということを指定しています。もしも、ユーザーに拡大・縮小などをして欲しくない場合はこの記述式内に追記することもあります。
【HTML】要素&属性の読み方と用途 – ABC順
https://www.cyber-bridge.jp/cbmedia/webdesign/html-dictionary/
メディアタイプとは、出来上がったWebサイトを出力するデバイスのこと。さまざまな指定が出来ますが、今回は主要な3つをご紹介します。是非この3つは覚えておいてください！
@media screen and (){}
@media print and (){}
@media all and (){}
次に、{}のCSSを適応させる画面幅を指定するCSSの書き方です。こちらも、主に使用する2つに絞って解説いたします。また、ここでの記述式のデバイスはディスプレイ(screen)とします。
@media screen and (max-width: ●●px){}
上記のように、「max-width」を指定すると画面の最大幅を指定出来ます。例えば、
@media screen and (max-width: 600px){}だと、「600px以下の場合、{}内のCSSを適応する」というコードとなります。
@media screen and (min-width: ●●px){}
また、上記のように、「min-width」を指定すると画面の最小幅を指定出来ます。例えば、
@media screen and (max-width: 600px){}だと、「600px以上の場合、{}内のCSSを適応する」というコードとなります。
メディアクエリを記述しているのに、画面幅が変わったときにレスポンシブデザインにならない！
そんな時は、以下のことをチェックしてみてください。
上記の場合、正しくメディアクエリが働きません。特にCSSは上から順にコードが処理されていくので、後述のコードに上書きされてしまうこともあります。よく起こりうるミスなので注意しましょう！
ここまで読んだ皆様は、きっとメディアクエリの書き方がマスターできたはずです！
レスポンシブデザインでは画面幅が変わるので、このメディアクエリは必須のコードです。
このようにコードの意味や仕組みを理解して、美しいレスポンシブサイトを作りましょう。
さらに詳しいメディアクエリとレスポンシブに関する解説は、こちらのサイトが分かりやすいです。
関連記事
櫻井 邦則 
久保田 里佳子 
