無料体験可能なプログラミングスクールはコチラ

HTML/CSS

【CSS】画面サイズごとにスタイルを変更するメディアクエリの記述法

メディアクエリ記述法
考える人
PC、タブレット、スマホ。それぞれの画面サイズに応じて、CSSのスタイルを変更する方法が知りたい...!

この記事では、画面(デバイス)サイズに応じたCSSスタイルの変更を、CSSの「メディアクエリ」を使って行なう方法を解説します。

ユウマ
初心者向けに、使うべき値についても詳しく解説していくので、全く分からないという方もご安心下さい!

【事前知識】メディアクエリとレスポンシブデザインについて

メディアクエリとブレイクポイント

まず、メディアクエリとは何ぞや?という方のために、簡潔に解説します。

メディアクエリはCSS3のモジュールで、簡単に説明すると、画面サイズに応じてコンテンツの描画を切り替えるための機能です。

メディアクエリ = 画面サイズに応じてコンテンツ描画切り替えを行なうCSS3の機能

そして、メディアクエリで指定する値として「ブレイクポイント」と呼ばれるものが必要になってきます。

ブレイクポイントは、デザインが切り替わる画面幅の値ことを言います。

ブレイクポイント = デザインが切り替わる画面幅の値

レスポンシブデザインとは?

レスポンシブデザインとは、サイト閲覧者の画面サイズ(ブラウザ幅)に応じて、サイト内の各コンテンツを最適化表示させるための技術です。

そして、画面サイズを変えたときに表示が崩れてしまうサイトを、画面サイズに依存せず最適化することを「レスポンシブ化」と言います。

ユウマ
最近のWebサイトでは必ずと言っていいほど、どのサイトもレスポンシブ化されていますね。

このレスポンシブ化を行なうために必要になるのが、「メディアクエリ」というわけです。

メディアクエリで任意のブレイクポイントを指定して、各画面サイズでコンテンツが崩れずに表示されるように、調整することができます。

これが、Webサイトにおける基本的なレスポンシブ化の流れです。

画面サイズごとにスタイルを変更するメディアクエリの使い方

スタイルシート内でメディアクエリを使う

一般的にメディアクエリは、スタイルシート(CSS)内に記述することで使います。

記述方法は以下の通りです。

/* 画面幅960px"以下"の時に読み込むスタイル */
@media screen and (max-width:960px) {
  div { background: blue }
}
/* 画面幅520px"以下"の時に読み込むスタイル */
@media screen and (max-width:520px) {
  div { background: red }
}

/* 画面幅960px"以上"の時に読み込むスタイル */
@media screen and (min-width:960px) {
  div { background: blue }
}
/* 画面幅520px"以上"の時に読み込むスタイル */
@media screen and (min-width:520px) {
  div { background: red }
}

上記コードを見ていただけると分かる通り、メディアクエリでは記述したブレイクポイント「以下」の画面幅でスタイルを読み込むか、「以上」の画面幅でスタイルを読み込むかを指定することができます。

この以上と以下を分けているのが、以下の箇所です。

(max-width:520px)
(min-width:520px)

メディアクエリで「max-width」を指定した場合、ブレイクポイント(上記コードでは520px)以下の画面幅でスタイルが反映されます。

逆に「min-width」を指定した場合は、ブレイクポイント以上の画面幅でスタイルが反映されるということです。

少々ややこしく感じるかもしれませんが、それぞれ以下のように覚えておくと良いでしょう。

メディアクエリの覚え方
max-width max(最高)◯◯pxまでスタイルを反映する
min-width min(最低)◯◯pxからスタイルを反映する

また、基本的にPC版デザインをベースに(PCファースト)コーディングする場合、「max-width」を使い、スマホ版デザインをベースに(モバイルファースト)コーディングする場合「min-width」を使います。

HTMLのlinkタグでメディアクエリを使う

メディアクエリはスタイルシート内だけに限らず、HTMLのlinkタグでも指定することができます。

linkタグを使った場合のメディアクエリの記述方法は、以下の通りです。

<!-- 画面幅960px"以下"の時に読み込むスタイル -->
<link rel="stylesheet" href="md.css" media="screen and (max-width:960px)">
<!-- 画面幅520px"以下"の時に読み込むスタイル -->
<link rel="stylesheet" href="sm.css" media="screen and (max-width:520px)">

<!-- 画面幅960px"以上"の時に読み込むスタイル -->
<link rel="stylesheet" href="md.css" media="screen and (max-width:960px)">
<!-- 画面幅520px"以上"の時に読み込むスタイル -->
<link rel="stylesheet" href="sm.css" media="screen and (max-width:520px)">

見ていただきたい箇所は、linkタグ内の「media属性」の部分です。

media属性では、読み込む外部リソース(CSS)をどのメディアに適用するのかを、指定することができます。

「screen and (◯◯◯-widh:◯◯px)」の部分は、CSSと記述方法が同じなので、簡単に覚えておくことができますね。

スタイルシートでメディアクエリを記述する方法が一般的ではありますが、HTML側でも指定できることを覚えておくと良いでしょう。

設定するべきブレイクポイントの値

ブレイクポイントは「スマホ520px / タブレット960px」でOK

さて、ここまでメディアクエリについて解説してきましたが、

考える人
メディアクエリの使い方は分かった。けど、ブレイクポイントは何pxを指定すれば良いの?

と悩む方もいるでしょう。

結論をお伝えすると、2021年現在のブレイクポイントは

  • スマホ・・・520px
  • タブレット・・・960px

上記の値でOKです。

特に理由がないのであれば難しいことは考えず、スマホ・タブレットそれぞれ520pxと960pxのブレイクポイントを指定してあげましょう。

ブレイクポイントの値は状況に応じて変えるべき

正直ブレイクポイントについては、様々なサイトで言われている意見が食い違ってます。

その理由は、本来ブレイクポイントの値は状況に応じて変えるものだからです。

今現在スマホ・タブレット・PCは、多くの企業から様々な画面サイズのものが出回っており、全てのデバイスサイズをカバーしようと思うと、細かく分けた大量のメディアクエリが必要になってしまいます。

特に理由がない場合は520px / 960pxを使い、「このスマホには対応させたい!」といった具体的なデバイスが存在する場合は、そのデバイスの画面幅に合わせたブレイクポイントを指定しましょう。

まとめ

この記事では、メディアクエリの使い方について解説してきました。

最後に今回の要点をまとめます。

覚えておきたいポイント

  • max-widthは「max(最高)◯◯pxまでスタイルを反映したい時」に使う
  • min-widthは「min(最低)◯◯pxからスタイルを反映したい時」に使う
  • ブレイクポイントは特に理由・こだわりがない場合「520px / 960px」の値を使えばOK
ユウマ
メディアクエリを使ったレスポンシブデザインは、Web制作において基本中の基本の技術になるので、ここでしっかり覚えておきましょう...!

-HTML/CSS

© 2021 ユウマのブログ