1. HOME
  2. プログラミング
  3. CSS
  4. 【CSSの書き方】メディアクエリの使い方

【CSSの書き方】メディアクエリの使い方

  • 2020.01.06
  • 2022.05.04
  • CSS
【CSSの書き方】メディアクエリの使い方

Webサイトをスマートフォン対応（レスポンシブ対応）させたいんだけど、どうしたらいいの？

こういった疑問に答えていきます。

レスポンシブ対応をさせるためには、CSSの「メディアクエリ」という技術を使えば解決できます！
今回紹介する内容は以下の３つです。

  • viewportの設定
  • メディアクエリの書き方
  • ブレイクポイント

では早速やっていきましょう！

目次

メディアクエリーの使い方

viewportの設定

まずは「viewportの設定」からやっていきます。
「メディアクエリ」を使うのに、必ず必要になるのが「viewport」です。
「viewport」とはそもそも何かというと、「表示領域」のことで、PCなどでブラウザを使って何かしらのWebサイトを閲覧した際に、表示される領域のことを言います。

簡単にいうとPCなどのデバイスの画面の大きさに合わせて、Webサイトを表示させますよということです。

これを設定しないと、PC用に作成されたWebサイトをスマートフォンで見ると見づらくなります。なので「viewport」は必ず設定するようにしましょう。

viewportの書き方

viewportは、HTMLの<head>タグの中に書いていきます。
書き方は下の世に書いていきます。

<!DOCTYPE html>
<html lang="ja">
<head>

　//viewportの書き方
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

</body>
</html>

※<meta charset=”UTF-8″>などを省略しています。

このように書いていきます。
それぞれの意味については今回は触れませんが、とりあえずこれを書いとけば問題ないかと思います。

これが書けたら、実際にCSSの書き方について見ていきます。

メディアクエリーの書き方

次に「メディアクエリの書き方」について見ていきます。
まずは「メディアクエリ」について解説していきます。

「メディアクエリ」はデバイスの画面幅に応じて、CSSのスタイルを変更する機能のことを言います。
例えば、PC用にスタイルしたCSSをスマートフォンで見たときに、PC用のスタイルのまま、スマートフォンに表示されてしまいます。
どうなるかというと、文字が大きく表示されてしまったり、配置がずれたりしてしまいます。そんなときに使うのが「メディアクエリ」です。

では実際に書き方について見ていきます。

書き方は、下のように書いていきます。

/* small */

//ここに共通のスタイル、0から599pxまでの画面幅のスタイルを書いていく



/* medium */
@media (min-width: 600px) {

//この中に600px以上799px以下の画面幅のスタイルを書いていく

}


/* large */
@media (min-width: 800px) {

//この中に800px以上の画面幅のスタイルを書いていく

    }

「画面幅が〜以上〜以下のときに、このスタイルを適用させる」と言ったイメージです。

@media (min-width: サイズ) で最小値のサイズを書いていきます。
そして{ }の中に、そのサイズ時のスタイルを書いていくだけです。

上記で書いた「small」「medium」「large」はそれぞれ「スマートフォン」「タブレット」「PC」を想定しています。それぞれのサイズ幅に関しては事項の「ブレイクポイント」で解説していきます。

では実際に書いてみましょう。
先ほどのそれぞれの画面幅のときに、背景色を変えてみたいと思います。
まずはHTMLを書いてきます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="css/test.css">
    <title>Hello World</title>
  </head>
      <body>
        
      </body>
</html>

次にCSSで「メディアクエリ」を書いていきます。

/* small */

body{
  background: red;
}


/* medium */
@media (min-width: 600px) {

  body{
    background: blue;
  }

}


/* large */
@media (min-width: 800px) {

  body{
    background: yellow;
  }
  
    }

こう書くことで、0〜599pxまでは「赤色」、600px〜799pxまでは「青色」、800px〜は「黄色」に変わります。
ではブラウザで確認してみましょう。
今回はわかりやすいように「デベロッパーツール」で幅を確認しながら見ていきます。

まずは「0〜599pxまでのとき」

Red

「600px〜799pxまでのとき」

Blue

「800px〜のとき」

Yellow

このようにして「メディアクエリ」を活用することで、レスポンシブにも対応することができます。

ブレイクポイント

ブレイクポイントは、それぞれのデバイスの幅のときにスタイルが切り替わるポイントのことをいいます。
先ほど指定したサイズを「スマートフォン」「タブレット」「PC」の画面幅のサイズに指定してあげることで、スタイルが綺麗に適用されます。

しかし、先ほど指定した「600px」「800px」はあくまで例であって、決して最適とは言えません。
ではどうしたら最適なサイズ幅を指定できるのかというと、先ほどブラウザの確認時に使用した「デベロッパーツール」を使うことで、それぞれのデバイスのサイズ幅を知ることができます。

デベロッパーツールの「Responsive」をクリックすると、様々なデバイスが表示されますので、これらをクリックすると自動で画面幅を表示してくれます。

デベロッパーツール

それぞれのデバイスをクリックするとサイズ幅が表示されますので、そのサイズを「メディアクエリ」のサイズで指定してあげるといいかと思います。

まとめ

最近ではスマートフォン向けのWebサイトを作成した後に、PC用のWebサイトを作成すると言った「モバイルファースト」が主流です。
まずはスマートフォン向けのWebサイトを作成した後に、PC用を作成するといいかと思います。

今回は「メディアクエリ」について解説してきましたが、そのほかにもレスポンシブ に対応してくれる「Bootstrap」というCSSのフレームワークもありますので、よければそちらも見てみてください。

【入門】Bootstrapの書き方 　〜Bootstrapとは〜

では本日は以上になります。

オススメの教材