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

初心者向けにCSSでメディアクエリの書き方について解説しています。Webサイト制作で必要なスマートフォン対応、レスポンシブデザインの書き方を理解できるでしょう。実際にコードを書きながら例をもとに説明しているので、ぜひご覧ください。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

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

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

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

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

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

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

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

目次

 

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

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

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

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

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

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

メディアクエリとは

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

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

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

 

メディアタイプの種類

メディアタイプ 対応デバイス
all すべてのデバイス
braille 点字用ディスプレイ
embossed 点字用プリンター
handheld モバイルデバイス
print プリンター
projection プロジェクター
screen ディスプレイ
speech 音声出力デバイス
tty 固定幅フォントで出力するデバイス
tv テレビ

 

なお、メディアクエリ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; }
}

 

メディア特性

メディア特性名 メディア特性
any-hover マウスを該当要素の上に移動させた場合に処理をします。この移動をホバーと言います。
any-pointer ポインティングデバイスの性能に応じて表示するcssを変更できます。
aspect-ratio ビューポートの幅対高さのアスペクト比に応じて表示するcssを変更できます。
color 機器の表示色数性能に応じて表示するcssを変更できます。
color-gamut 機器の表示色域に応じて表示するcssを変更できます。
color-index 機器の色参照テーブルの項目数に応じて表示するcssを変更できます。
device-aspect-ratio 機器の幅対高さのアスペクト比に応じて表示するcssを変更できますが非推奨です。
device-height 機器のレンダリング面の高さを指定できますが、非推奨です。
device-width 機器のレンダリング面の幅を指定できますが、非推奨です。
display-mode cssのdisplay-modeで指定した内容に応じて表示するcssを変更できます。
forced-colors カラーパレットを制限している場合に応じて表示するcssを変更できます。メディアクエリ5以降の追加機能です。
grid 機器がグリッドとビットマップ画面のどちらを利用するか指定できます。
height ビューポートの高さを指定できます。
hover マウスホバーした際のcssを指定できます。
inverted-colors 色が反転している場合にcssを適用できますが、Safariのみ利用可能です。メディアクエリ5以降の追加機能です。
light-level 明るさに応じて表示するcssを変更できますが、メディアクエリ5以降の追加機能です。
monochrome 機器のモノクロ出力情報に応じて表示するcssを変更できます。
orientation ビューポートの向きに応じて表示するcssを変更できます。
overflow-block ブロック軸方向にあふれたコンテンツの扱いに応じて表示するcssを変更できます。
overflow-inline インライン軸方向にあふれたコンテンツがスクロールできるかに応じて表示するcssを変更できます。
pointer ポインティングデバイスの性能に応じて表示するcssを変更できます。ただし、 any-pointerのほうがより正確に処理できます。
prefers-color-scheme ユーザーが表示させたい明るさに応じて表示するcssを変更できます。メディアクエリ5以降の追加機能です。
prefers-contrast 隣接色のコントラスト量の増減に応じて表示するcssを変更できます。ただ、実験段階のため表示できるブラウザは存在しません。
prefers-reduced-motion ユーザーが表示上で動きを少なくしたい場合に適用できます。前庭運動障害をお持ちの方向けの設定です。メディアクエリ5以降の追加機能です。
prefers-reduced-transparency ユーザーが透明度を下げたいと希望している場合に適用できます。メディアクエリ5以降の追加機能です。
resolution 機器のピクセル解像度に応じて表示するcssを変更できます。
scan 機器のスキャン処理方式に応じて表示するcssを変更できます。
scripting JavaScriptなどのスクリプト利用に応じて表示するcssを変更できます。メディアクエリ5以降の追加機能です。
update コンテンツ表示更新頻度に応じて表示するcssを変更できます。
width ビューポートの幅に応じて表示するcssを変更できます。

 

メディアクエリの書き方

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

  • 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のあとに来る指定を最終的に無視するような指定になります。

古いブラウザなどでは、最新のメディアクエリ4などはうまく処理されないため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刻みで背景が変わっていると思います。

css_05

 

動作結果

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

 

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

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

 

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

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

中本賢吾(なかもとけんご)
アジマッチ有限会社 代表取締役社長開発実績:PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。小学生がUnityでオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がノーコードでSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。

CSSを学習中の方へ

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

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

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

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

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

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

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