メディアクエリとは
メディアクエリとはレスポンシブwebデザイン構成に必要なものです。レスポンシブwebデザインを作るためには自分がみているブラウザ（スマホ、タブレット、PC）からWebサイトの画面を最適な状態で（縦横均等）見ることができるデザインのことを言います。
レスポンシブwebデザイン対応していないとやけに余白が多かったり、文字が小さかったりユーザがブラウザからサイトを見るときに情報を読み取りづらく困るようになります。
レスポンシブwebデザインを構成する際に必要
メディアクエリの使い方は、モバイルファーストとデスクトップファーストがあります。モバイルファーストとはWebサイト作成時、スマホサイトから最初に作成する手法です。デスクトップファーストとは、Webサイト作成時、PCサイトから最初に作成する手法です。CSSファイルとviewportを併せて使うことで効果が発揮されます。
複数のCSSファイルを読み込むとき、順番が関係してきます。chromeの検証からデバッグモードを開き、シミュレーションしてサイト上でレスポンシブwebデザインになっているか解像度を変更（デバイス上のブラウザの大きさが選べる）試してみることもできます。
メディアクエリの基本的な使い方
メディアクエリを使ってレスポンシブwebデザインにするための書き方にはまず、HTMLからCSSを読み込むLinkタグにmedia属性を記述する方法もあります。これはHTMLでファイルの読み込みに、メディアクエリを使う方法です。この方法であれば、デバイスでHTMLを読み込むファイルを振り分けることができます。
他にはHTMLで直接viewportを設定することもできます。HTMLから読み込むCSSファイル内には@importで指定する場合と@mediaで指定する方法があります。CSS内で@importや@mediaで指定することで振り分ける方法があります。
HTMLの書き方は、<link rel="stylesheet" href="読み込むファイルのパス" media="メディアタイプの指定 and (メディア特性の指定)"> です。このようにHTMLを書きます。
HTMLでファイル読み込みに使う
HTMLの書き方としては<meta name="viewport" content="width=device-width">です。HTMLの<body>や<HEAD>が始まる前に<meta>タグを書きます。widthのところはPCブラウザなどの解像度を数字で書くこともできます。ビューポート設定の内容としては「デバイス幅がwidth='devise-width'px以下」だと言えます。重要です。
HTMLで書き方は、<link rel="stylesheet" href="./css/mobile.css" media="screen and (max-width: 600px)">このHTMLタグの意味として「横幅600px以下のデバイスのみを判別し正しければ、media.cssファイルを読み込む」と解釈できます。
CSS内で@importする際に記述
media.cssなどのファイル内での書き方は@import url('mobile.css') screen and (max-width: 800px);とファイルの意味は「横幅800以下のデバイスを判別し正しければmobile.cssをインポート」と言う意味です。HTMLファイル側には<link rel="stylesheet" href="media.css" type="text/css">をmetaタグの後ろ付近に入れておきます。
CSS内で@mediaを記述
CSSファイル内でメディアクエリを使う方法があります。書き方は、@media メディアタイプの指定 and (メディア特性の指定) { /*指定するスタイルの記述*/ } このようです。タグ例の内容としては読み込むファイルは同じですが条件を分岐するようにデバイスごとにスタイル指定し振り分けることができます。レスポンシブ対応には欠かせない内容です。
メディアクエリのメディアタイプ
メディアクエリの主なタイプは4種類です。all(全てのデバイス)、print(プリンター、印刷プレビューに表示されるドキュメントも含む)、screen(printとspeechに含まれないものすべて)、speech(スピーチシンセサイザ)があります。非推奨になったメディアタイプもあります(tty、tv、projection、handheld、braille、embossed、aural)などです。
主なメディアタイプは4種類
メディアクエリの主なタイプは4種類です。書き方は、@media メディアタイプ { /*そのメディアでのみ有効となるスタイル*/ }のように使います。MDNで注記があり、Firefoxではprintとscreenとallが使えますが、speechがなく使えないようです。ブラウザによりメディアクエリのスタイルが反映されないこともあります。気になれば、調べてみましょう。
非推奨となったメディアタイプ
非推奨になったメディアタイプは、(tty、tv、projection、handheld、braille、embossed、aural)などです。今後は使わないようにしましょう。非推奨になったメディアタイプは「使用はできるけど、できれば止めてほしい」という意味です。ブラウザによっては非推奨は既に動作しないかもしれません。主な4タイプに移行していきましょう。
メディアクエリのメディア特性
メディアクエリは、メディアタイプに加え、メディア特性の指定もできます。書き方の例として、( [min- | max-] メディア特性 : 値 )と書くことができます。主なメディア特性とその分類である範囲型と離散型があります。もちろん、非推奨になったメディア特性もあります。説明文は、メディア特性を記述するときに書き方として参考になるでしょう。
主なメディア特性
主なメディア特性の例として、（widthビューポートの幅、heightビューポートの高さ、aspect-ratioアスペクト比（ビューポートの幅と高さから算出）、orientationビューポートの向き。とれる値は portrait (縦長) または landscape (横長)、resolution出力デバイスの画素密度、-webkit-device-pixel-ratioデバイスピクセル比)など他にもあります。
範囲型・離散型
メディアクエリで指定できるメディア特性には「範囲型」と「離散型」があります。メディアクエリで指定できるメディア特性の分類はどちらかになります。見分け方は「範囲型」の例はwidthやheightなど数値で指定できる型と、orientationなどの特定の値しかとれない型があります。メディア特性の分類はこの2種類だけです。
非推奨となったメディア特性
メディアクエリのメディア特性として非推奨になった特性もあります。Media Queries 4で非推奨になった特性とは、(device-width出力デバイスの幅、device-height出力デバイスの高さ、device-aspect-ratioアスペクト比（出力デバイスの幅と高さから算出))の3つです。非推奨で使わない所は他と変わりません。ブラウザ対応しているかどうかです。
メディアクエリの書き方は主に2種類
HTMLやCSSを使ったメディアクエリの書き方で代表的な例は、モバイルファーストとデスクトップファーストです。viewportだけを指定すると対応した大きさ(スマホなど)に画面がぴったり収まって見えるだけです。そこにメディアクエリを挿入すれば、よりレスポンシブなWebデザインになります。書き方の順番は小さいから大きいの順です。
モバイルファースト
レスポンシブ対応するためのメディアクエリに対して、モバイルファーストの書き方は決まっています。例を挙げるとmin-widthは最低でも○○pxからCSSを適用させます。max-widthは最高でも○○pxまでCSSを適用させます。このときCSSの順番を意識しましょう。CSSの上書きに注意が必要なためです。順番を間違うとスタイルが適用されません。
デスクトップファースト
古くからWeb制作している人にとって、デスクトップファーストを使いたがります。まず、デスクトップ向けのウインドウ幅で作りその後モバイルファーストのためのウインドウ幅にする作り方もあります。この流れはデメリットもありますが、未だに使う人もいます。
レスポンシブ対応するためのメディアクエリの書き方としてモバイルファーストのサイズを小さいから大きい順に書いていきます。次はデスクトップファーストを書きますが、やはり書き方は順番です。こちらもサイズを小さいから大きいに向けて書いていきます。CSSは上書きされると適用されなくなります。Chromeなどのデバッグモードで確認できます。
メディアクエリの書き方
レスポンシブ対応するためのメディアクエリの書き方は2種類あります。Link要素として指定する方法とスタイルシートに指定する方法です。ブレークポイントという表現があります。意味は分岐点といいます。最初に適用されるのがデスクトップ向けです。
モバイル向けのスタイルに転移する前に、デスクトップ向けの重たいファイルも読み込んでしまうため、結果的にページ表示が遅くなることもあります。この遅い反応はデメリットです。現在は、”モバイルファースト”が優勢です。ページを閲覧するときはページ間の移動はさくさくと反応よく切り替えるのが理想です。レスポンシブ対応はそのためでもあります。
Link要素として指定
レスポンシブ対応するためのメディアクエリは、<link rel="stylesheet" href="style.css" media="screen and (max-width:480px)">とタグを書きます。このほかに分岐点を細かく設定し読み込ませる方法があります。細かくするほどメンテナンス性が低下していきます。スマホ、タブレット、PCと端末の種類で分けるサイトもあります。
スタイルシートに指定
メディアクエリでモバイルファーストが優勢ですがデスクトップファーストにもメリットはあります。デスクトップ向けのサイトを作ってきた制作者とって「最初にPCの画面」からスタイルを記述するので、作りやすいというメリットです。制作者がスタイルを切り替える際はPC重視かスマホ重視か、どちらを採用するかのルールで決めるほど単純な理由です。
メディアクエリで指定可能な属性
属性またはプロパティの意味は、特性、属性、性質、効能などが基本的な属性の意味です。Windowsなどでは属性またはプロパティのことを設定画面と言います。メディアクエリで属性といえば、設定できる性質や属性のことです。
メディアクエリで指定可能な属性は決まっています。属性にはデバイス名、端末解像度、デバイスピクセル、実質解像度などがあります。メディアクエリで重要な属性はウィンドウ（画面横幅）サイズを基準に切り替える方法です。属性を合わせる必要があります。その属性の種類を覚えましょう。属性を覚えてしまえばレスポンシブ対応はすぐそこです。
デバイス名
デバイス名の代表的な例としてApple社のiPhone / iPadがあります。その種類として、(iPhone3/iPhone3G/iPhone4/iPhone4S/iPhone5/iPhone5S/iPhone5C/iPad /iPad2 /iPad mini/iPad第3世代/iPad第4世代/iPad Air/iPad mini Retina)などです。またこの種類には違った解像度もありレスポンシブ対応には避けて通れません。
端末の向きを判定
レスポンシブ対応のためメディアクエリを指定する書き方は、デバイスの向きを判定する属性には「orientation」という属性を使います。属性それぞれは、portraitは縦向き、landscapeは横向きとなります。属性を指定すると縦と横でCSSを切り替えることができます。ブレークポイント(分岐点)を書くことで端末の向きを判定することができます。
デバイスピクセル比で判定
レスポンシブ対応のためメディアクエリの書き方の例をあげると、HTMLファイルから読み込むCSSファイル内にデバイスのピクセル比で判定するとき「Retinaディスプレイかどうかを判定する」と言い換えれます。Retinaディスプレイのとき2、それ以外の通常は1です。
レスポンシブ対応のメディアクエリの書き方の例をあげると、まずHTMLファイルからCSSファイルで読み込む際、デバイスの大きさはRetinaディスプレイ非搭載の3や4になると見た目の大きさはだいたい同じくらいです。その場合には、横幅とピクセル比を使い判定することができます。メディアクエリを覚えることでレスポンシブ対応しましょう。
応用としての使用方法
メディアクエリの応用としての使用方法は、メディアクエリをレスポンシブ対応する際に、HTMLファイル側でviewportを指定後、次にHTMLファイルから読み込むCSSファイル側でメディアクエリの記述を書きます。こうして2つのレスポンシブ対応を組み合わせることでよりモバイルファーストなどを意識したサイトを作ることができます。
メディアクエリの2019年話題
レスポンシブデザイン構成のためのメディアクエリで2019年の話題が最上位に来るのはブレークポイント(分岐点)の話題でした。サイト制作者はメディアクエリのあれこれを覚えてレスポンシブデザインにしている人も多く見受けられます。メディアクエリをまだ導入していないまたは、これからという人達のためにブレークポイントを覚えましょう。
レスポンシブデザインのブレークポイント
ブレークポイントとは分岐点のことです。レスポンシブデザインをする際にCSS側でデバイスの解像度を判別するために条件分岐の処理を書きます。その処理の箇所を分岐点といいます。そのブレークポイントが2019年ではより単純になっている話題があります。
レスポンシブデザインのブレークポイントはとても単純です。2019年の話題では、560px未満をスマホと設定、960px未満をタブレットと設定されます。メディアクエリを2つに限定することでより単純になりレイアウトのメンテナンスもしやすいメリットがあります。2019年の話題でメディアクエリの設定を覚えて自作のサイトに生かしましょう。
インナーの幅とは
メディアクエリのブレークポイントを決めるときインナーの幅が関わります。それはサイトの実質的な横幅です。ウインドウサイズは変更できますが、どこまでの幅にするかは完成見本図の時点で基本的に決まっています。インナーの幅を決めたら、それをもとにデバイス(PC、携帯、タブレットなど)の境目を決めるような流れになります。
PCのブレークポイントとは
メディアクエリのブレークポイントを決める際、PC向けだとインナーの幅以上で考えます。PC向けの領域では基本的に完成見本図を完全再現して、ウインドウサイズを広げてもコンテンツが中央で維持されるかをchromeのデバッグモードなどレイアウトのシミュレータで確認して決めていきます。ブラウザを駆使してブレークポイントを決めます。
スマホのブレークポイントとは
最近のスマホは画面が大きいサイズも出てきました。解像度チートにでています。iPhoneXやiPhoneXSなどは通常のスマホより画面がひとまわりサイズが大きいです。こんなときCSS側で条件分岐を増やし、対応する解像度で処理を書き、レスポンシブ対応しましょう。
メディアクエリのブレークポイントを決める際に、スマホはipad以下で設定です。ipadは768pxが基準です。タブレットかスマホで分けることができます。スマホのレスポンシブは横幅いっぱいにしても縦並びにするのが基本です。タブレット向けのレイアウトより悩むことが少なくなります。最新のスマホはもう少し大きめなサイズです。
メディアクエリ初心者向け
メディアクエリ初心者向けにコツは3つです。viewport(表示領域)を設定「デバイスの画面幅をよさげに調整する」、スタイルシートを2つの条件で分けることは「レスポンシブとは、ウインドウ幅で変わるデザイン」です、メディアクエリを設定するの3つです。メディアクエリはPHP言語のif文のような扱いです。です。それぞれ役割があります。
レスポンシブなサイトの作り方
どのようなサイトでも作り方があります。闇雲に作り上げるWeb制作はありません。もちろんメディアクエリでレスポンシブ対応したサイトにも作り方といえる工程があります。その工程を覚えてしまえばそのサイクルで作るだけです。難しいことではありません。
メディアクエリを使ったレスポンシブなサイトの作り方は、HTMLを作成、bodyの余白、spaceを削除、ヘッダーデザイン、フッターデザイン、全体の幅を決定、各ブロックの幅を決める、2カラムにする、floatを解除するの流れです。6番目ぐらいの全体の幅を決定した際にレスポンシブデザインにしていきます。レスポンシブの基本は覚えるだけです。
HTMLとCSSについて
メディアクエリでレスポンシブ対応する際、HTMLとCSSには役割があります。基礎的なことは文字の色が変わったり、大きくなったり、フォントを変えられますが、それを「ブロックの大きさを変える」「画像の大きさを変える」という風に処理を変えていくだけです。Web制作をしていればいつもしていることに含まれます。
定石のテクニック
定石とは、囲碁で最善とされる決まった打ち方です。それが転じて、物事を処理する時の決まった仕方を言います。レスポンシブ対応するときに定石となる決まったテクニックがあります。そのテクニックはWeb制作者ならば基本的なことです。
メディアクエリでレスポンシブ対応する際に、スマホで画像がはみ出たり、非表示にしたり、表示にしたり、タブレットのブレークポイントを作ったり、埋め込みもレスポンシブ対応したりレイアウトをレスポンシブ対応していくときにすることは色々あります。HTMLとCSSであらかじめテクニックを覚えておきましょう。導入するときに役に立ちます。
HTMLコードそのものを分ける
メディアクエリでレスポンシブ対応するとき、PHP言語のライブラリを利用することでHTMLそのものをわけることができます。それによりデバイス間（スマホ、タブレット、PCなど）で振り分けができます。アクセスが一点に集中しないようにレスポンシブ対応ができます。サイトによってはメリットもデメリットもあります。方法として覚えましょう。
メディアクエリの優先順位
メディアクエリをレスポンシブ対応するとき、HTMLファイルからCSSファイルを読み込むように書きます。そのときCSSファイルには読み込む順番があります。CSSファイルは上から順番に読んでいき、上書きされるとその処理は実行されません。
CSSファイルの条件は上流で読み込んだ処理が優先されていきます。このルールを利用しながらCSSを定義しデザインをレスポンシブ対応していきましょう。CSSの書き方の基本は、条件分岐でデバイス毎にウインドウ幅を変える処理を条件分岐して書きます。条件分岐することでクラスは増えますが、実際の処理量は変わりません。
HTMLを小分けにする
1つのファイルに処理を詰め込みすぎてメンテナンスができなくなる、または処理が重くなる、反応が悪いなどデメリットを引き起こす例もあります。HTMLを複数のファイルにわけて、デバイスごとにアクセスを分断することもメリットになります。
今までHTMLないにCSSを書いて1つの流れだった処理を複数のファイルにわけて(ヘッダー、コンテンツ、サイドメニュー、フッダーなど)部品化することで、よりレイアウトのメンテナンスが楽になります。メンテナンス中は非表示にすることもできます。レスポンシブ対応するときは部品化を意識しましょう。いずれは制作者を助けることになります。
CSSの書き方指南
メディアクエリをレスポンシブ対応するときに、CSSファイルの書き方を知りましょう。CSSファイルの特徴として、ウインドウ幅がせまくなる毎に条件分岐(ブレークポイント)を書きクラスを重複させていきます。条件分岐なので、実際はクラスが増えることはありませんが条件分岐により、CSSの記述量が増えていきます。大事な処理は上流に書きましょう。
無駄な継承を避けよう
例えば企業でWeb制作をしていることもあります。その日に書いたCSSを次に誰がメンテナンスするかわからないこともあります。時間が経つと書いた本人さえわからなくなることもあります。コメントアウトを使ってどんな機能かを書くことが相手のため自分のためです。
メディアクエリをレスポンシブ対応していく上で、CSSを書きます。CSSはウインドウ幅が小さくなればクラスを重複させていくデザインです。しかしそのままでは他の人がみたら何の処理をしているかわからないこともあります。必要な属性だけ追加するか、それ以上の属性があればコメントアウトでどのような挙動があるか書いておきましょう。
デバイスの解像度を記憶する
メディアクエリのレスポンシブ対応していくとき、ウインドウ幅はデバイスの解像度で決めましょう。デバイスの解像度は決まっているので、覚えるだけです。Retina系は1/2です。基本的には320px、768pxが重要です。解像度チートもWebにあります。デバイスに対応しているかを言えるくらいになればレイアウト調整がよりやりやすくなります。
だいたいの工程が終わればあとは、レイアウト調整するだけです。モバイルファーストでデバイスのウインドウ幅は決まっているので、解像度チートをみて設定していきます。繰り返しレイアウト調整を行い、見やすいデザインになるまで変更してみましょう。
メディアクエリで見やすいレイアウトにしよう！
メディアクエリを知らないWeb制作者はいません。Web制作を個人でしている人も珍しくなくなりました。HTMLやCSSはWeb制作の基本です。メディアクエリを使ってレスポンシブ対応することはユーザビリティ(ユーザにとっての使いやすさ)でもあります。
メディアクエリをHTMLやCSSで書くことでレスポンシブwebデザイン構成ができます。現代は、スマホやタブレットの性能がムーアの法則からどんどんよくなりました。デスクトップ向けのサイトも多々ありますが、メディアクエリを使って見やすいレイアウトになれば、ユーザからアクセスされるサイトになります。まずメディアクエリを始めてみませんか。
