Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

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

メディアクエリについて

Webページを閲覧する際に、ユーザーはPCやスマートフォン、タブレットなど様々な端末を用いています。その際に端末に応じて、Webページ上に表示する内容を表示する必要があります。レスポンシブなWebページを作成するために、メデイアクエリが使用されます。レスポンシブなWebサイトを作成する際に使用される有名な例だとbootstrapが挙げられます。
Qiita_pc.png
QiitaをPCで表示した場合
Qiita_sp.png
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ファイルを作成するのは手間だなと感じる時がありました。その際にメディアクエリを使用すると便利だと思います。

masaki-ogawa
新卒一年目のエンジニアです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした