スマホ対応！CSSでメディアクエリの書き方【初心者向け】現役エンジニアが解説

今回はBootstrapなどを使わずにレスポンシブページを実現する方法であるメディアクエリについて説明します。

Webサイトを作る上でスマホ対応は当たり前になってきています。

メディアクエリとはメディアタイプやメディア特性によって表示を変えるレスポンシブデザインで利用する設定です。

レスポンシブデザインではスマホやタブレットやPCによって変わるメディアタイプやメディア特性に応じた最適な表示にするデザインを言います。

メディアクエリを理解することはレスポンシブデザインへの理解へとつながる基礎的な部分になります。

メディアクエリを理解することで、Web制作において様々な端末で最適な表示を可能にできます。

これからWebサイトを作る上では必ず必要になる知識なので、ぜひ今のうちに習得しましょう。

目次

• 動画で学ぶ！メディアクエリとは
• メディアクエリとは
• Web制作で推奨されているメディアタイプ
• メディア特性
• メディアクエリの書き方
• 複雑なメディアクエリの組み合わせを実現する方法
• 実際に書いてみよう

今回はメディアクエリを利用する方法を解説しよう。

田島メンター！！メディアクエリというのは何ですか〜？

スクリーンや印刷などのメディアタイプに加えて、さらに縦横の長さなどによるスタイルの適用範囲を決めることができるものなんだ。

なるほど、いろいろな条件に対応して見え方を変えるという感じでしょうか？よろしくお願いします！

動画で学ぶ！メディアクエリとは

今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

メディアクエリとは

今や、Webページを閲覧する際にレスポンシブデザインであることは当たり前になりつつあります。

メディアクエリはCSSを用いて、レスポンシブなWebページを作ることができます。

CSS3になってから登場した新しい表現なのでぜひ習得していきましょう。

メディアタイプの種類

なお、メディアクエリ4からは、screen, print, speech, all を除くすべてのメディアタイプを非推奨に指定されています。

Web制作で推奨されているメディアタイプ

Web制作で推奨されているメディアタイプは以下の4つです。

• all
• screen
• print
• speech

について詳しく解説していきます。

all

すべてのメディアタイプに適用されます。

コード例

@media all {
  p { color: green; }
}

表示結果

解説

次のように@media allで宣言して{}内で指定のcssを記載すると適用されます。

allで適用すると結果的にすべてのメディアタイプで同じ処理になります。

今回はcolor: white;で色が緑色になります。

screen

ディスプレイが存在するメディアタイプに適用されます。

PC、スマホ、タブレットはscreenです。

screenの動作

解説

screenのcolor:redという指定で文字が赤色で表示されています。

print

印刷用に適用されます。

印刷プレビュー画面で確認できます。

print表示結果

解説

screenのコードを印刷プレビューすると、青色になります。

speech

音声読み上げ機能の際に適用されます。

今回は、次のコードで「メディアタイプによる、色、処理の変化」音声出力した場合、「、」の部分で空白時間が発生し、自然な語り口になります。

@media speech {
  p { speak: literal-punctuation; }
}

メディア特性

メディアクエリの書き方

メディアクエリの書き方は以下の通りです。

• link要素として指定する場合
• スタイルシートに指定する場合
  • CSS内で@importする時に記述する
  • CSS内で@mediaを記述する

詳しく解説していきます。

link要素として指定する場合

headerのlink要素でメディアクエリを指定する方法を解説します。

サンプルコード

<link rel="stylesheet" href="./media.css" media="screen and (max-width: 780px)">

解説

href=”./media.css”では、読み込むファイルのパスを、同じ階層にあるmedia.cssで指定しています。

media=”screen and (max-width: 780px)”では、メディアタイプの指定 and (メディア特性の指定)を行っています。

今回は表示デバイスの最大幅が780pxの場合適用されます。

つまり実際の表示の変化はmedia.cssの実装が適用されます。

CSS内で@importする時に記述する

スタイルシート内に@importを利用してメディアクエリを適用する方法について解説します。

サンプルコード

@import url('media.css') screen and (max-width: 780px);

解説

@importでインポートすることを宣言しています。

url(‘media.css’)でmedia.cssをインポートしています。

screen and (max-width: 780px)では、メディアタイプの指定 and (メディア特性の指定)を行っています。

今回は表示デバイスの最大幅が780pxの場合、media.cssが適用されます。

つまり実際の表示の変化はmedia.cssの実装が適用されます。

CSS内で@mediaを記述する

スタイルシート内に@mediaを利用してメディアクエリを適用する方法について解説します。

サンプルコード

@media screen and (max-width: 780px) {
  p{ color: red; }
}

解説

@mediaでは、@impotせずにcssに処理も実装することを宣言しています。

screen and (max-width: 780px)では、メディアタイプの指定 and (メディア特性の指定)を行っています。

今回は表示デバイスの最大幅が780pxの場合、media.cssが適用されます。

p{ color: red; }で、p要素の色が赤色になります。

@importと@mediaの使い分け

@importではmedia.cssに実際のcssが記載されていることを想定していました。

media.cssにp{ color: red; }が実装されている場合、cssの実装が1行のみなので、@media指定をしていただくことで、別途media.cssを作成する負担を軽減できます。

もちろん、media.cssの内容が複数行に渡る場合は@importを利用していただいたほうが良いです。

この場合各幅ごとに、それぞれ適用させたい内容を入れていけばいいわけだね。

CSSファイル内で入力するのが一番見やすい感じがします。

次は実際にメディアクエリを使って、状態によってスタイルが変わるか見てみよう。

複雑なメディアクエリの組み合わせを実現する方法

• and
• not
• only
• ,

について解説する。（サンプルコード付き）

参考：https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries

複雑なメディアクエリの組み合わせを実現する方法

and演算子

複数の条件を組み合わせてメディアクエリを指定できます。

A and Bと指定することでAとB両方という意味になります。

サンプルコード

@media screen and (max-width: 780px) and (max-height: 680px) {
  body{
    color: red;
  }
}

解説

メディアタイプがscreen かつ 横幅が780px以下 かつ高さが680以下の場合、body要素の色を赤色にします。

not演算子

notのあとに来る指定を否定します。

サンプルコード

@media not speech {
  body{
    color: red;
  }
}

解説

メディアタイプがspeech以外の時は、body要素の色を赤色にします。

only演算子

onlyのあとに来る指定を最終的に無視するような指定になります。

古いブラウザなどでは、最新のメディアクエリ４などはうまく処理されないためonly指定で古いブラウザを除外する時に利用します。

サンプルコード

@media only screen and (max-width: 780px) {
  body{
    color: red;
  }
}

解説

古いブラウザでは、only screen and (max-width: 780px)はscreenと解釈されることで、古いブラウザでbody要素を赤色にする処理を行わないようにできます。

,演算子

複数の条件を組み合わせてメディアクエリを指定できます。

A , Bと指定することでAとBのどちらかという意味になります。

サンプルコード

@media screen and (max-width: 780px), (max-height: 680px){  body{
  body{
    color: red;
  }
}

解説

「メディアタイプがscreen かつ 横幅が780px以下」または、「高さが680px以下」の場合、body要素の色を赤色にします。

実際に書いてみよう

CSS内で@mediaを記述するコードを実際に書いてみましょう。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>メディアクエリ</title>
    <link rel="stylesheet" type="text/css" href="sample.css">
  </head>
  <body>

    <p>ディスプレイサイズによって文字の色が変わります。</p>
    <ul>
      <li>300px以下</li>
      <li>301px以上600px以下</li>
      <li>600px以上</li>
    </ul>

  </body>
</html>

CSS

@media screen and (min-width:0px){
  body{
    color: #5bc0de;
  }
}

@media screen and (min-width:300px){
  body{
    color: #d9534f;
  }
}

@media screen and (min-width:600px){
  body{
    color: #115a71;
  }
}

表示結果

300px刻みで背景が変わっていると思います。

動作結果

Webブラウザの幅を変更して変化を楽しんでください。

以上、メディアクエリの使い方を解説しました。

スマホ対応の書き方はいろいろありますが、一つ覚えておくと作業も捗るはずです。

ここでは横幅に応じてbodyの文字色を変更するように指定しているんだ。

サイズによって文字の色が変わっているのが分かりますね。

画面の状態によってスタイルを変えることで、より様々なメディアに対応したレスポンシブデザインが実装できるのでぜひ活用してみよう。

挑戦してみます。ありがとうございました！

この記事を監修してくれた方

CSSを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

CSSを学習していて、このように思ったことはありませんか？

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！