はじめに

最近、初めてメディアクエリについて学んだことをメモとして残しておきたいと思います。

メディアクエリについて

Webページを閲覧する際に、ユーザーはPCやスマートフォン、タブレットなど様々な端末を用いています。その際に端末に応じて、Webページ上に表示する内容を表示する必要があります。レスポンシブなWebページを作成するために、メデイアクエリが使用されます。レスポンシブなWebサイトを作成する際に使用される有名な例だとbootstrapが挙げられます。

QiitaをPCで表示した場合

Qiitaをスマートフォンで表示した場合

上記のようにPCとスマートフォンで表示した場合、それぞれのデザインが異なっています。

レスポンシブなWebデザインとは？

メディアクエリを調べた際に、レスポンシブなWebデザインと見かけることが多かったのですが、そもそもレスポンシブとは何かと疑問に思い調べました。

「レスポンシブWebデザイン」とは、PC、タブレット、スマートフォンなど、複数の異なる画面サイズをWebサイト表示の判断基準にし、ページのレイアウト・デザインを柔軟に調整することを指します。

必読！5分でわかるレスポンシブWebデザインまとめ
より引用

メリット

1つのHTMLファイルで、複数の端末に対応ができる
1つのHTMLファイルによりメンテナンスが容易になる

デメリット

1つのHTMLファイルを使用するので、スマートフォンで表示されない部分も読み込まれてしまい、ページスピードが遅くなる
複数のデバイスに対応するために、様々なメディアクエリを記述する必要がある

実際に書いてみる

私が普段関わっているあなたのマイスターではSassを使用しているので、Sassも同時に記述したいと思います。CSSとSassで記述の仕方はそこまで変わらないのですが、普段Sassをメインに書いている自分からすると少し混乱しました。後から、自分で見返した際にわかるようにSassも書いておきます。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>メディアクエリ練習用</title>
    <link rel="stylesheet" type="text/css" href="index.css">
  </head>
  <body>
    <p>この部分が、端末の横幅に応じて変化します！</p>
  </body>
</html>

index.sass

@media screen and (mxn-width: 767px)
  p
    font-size: 16px
    color: red

@media screen and (min-width: 768px)
  p
    font-size: 32px
    color: blue

生成されたCSSは

index.css

@media screen and (min-width: 767px) {
  p {
    font-size: 16px;
    color: red;
  }
}

@media screen and (max-width: 768px) {
  p {
    font-size: 32px;
    color: blue;
  }
}

となります。
今回はiPadを一つの基準として、iPadの横幅768pxを基準のそれ以下なら16pxで赤色の文字で表示し、768pxからは32pxで青色の文字を表示するというようにしました。

まとめ

ちょっとしたWebページを作成したいと思った時に、PC用とスマートフォン用の2つのHTMLファイルを作成するのは手間だなと感じる時がありました。その際にメディアクエリを使用すると便利だと思います。

最近学んだCSSメディアクエリについて