スマホ対応！CSSでメディアクエリの書き方【初心者向け】
初心者向けにCSSでメディアクエリの書き方について解説しています。Webサイト制作で必要なスマートフォン対応、レスポンシブデザインの書き方を理解できるでしょう。実際にコードを書きながら例をもとに説明しているので、ぜひご覧ください。
TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。
今回はbootstrapなどを使わずにレスポンシブページを実現する方法であるメディアクエリを説明します。Webサイトを作る上でスマホ対応は当たり前になってきています。
これからWebサイトを作る上では必ず必要になる知識なので、ぜひ今のうちに習得しましょう。
そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。
なお、今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
今回はメディアクエリを利用する方法を解説しよう。
田島メンター！！メディアクエリというのは何ですか〜？
スクリーンや印刷などのメディアタイプに加えて、さらに縦横の長さなどによるスタイルの適用範囲を決めることができるものなんだ。
なるほど、色々な条件に対応して見え方を変えるという感じでしょうか？よろしくお願いします！
目次
メディアクエリとは
今や、Webページを閲覧する際にレスポンシブデザインであることは当たり前になりつつあります。メディアクエリはCSSを用いて、レスポンシブなWebページを作ることができます。
CSS3になってから登場した新しい表現なのでぜひ習得していきましょう。
CSSサンプルコード
<link rel="stylesheet" href="sample.css" type="text/css" media="screen and (max-width:300px)">
上に書いているのがメディアクエリの設定記述です。
わからないところはおそらく、後半の「media=”screen and (max-width:300px)”」の部分ではないでしょうか。
「media」はWebページを見ている人の媒体を取得するCSSの記述になります。他には以下のメディアタイプがあります。
- screen（ディスプレイ）
- print（プリンタ）
- tv（テレビ）
- projection（プロジェクター）
- all（すべて）
今までは上記だけでも十分ですが、スマートフォンの出現によってディスプレイの幅が異なるという課題があります。
これを解決するために、「max-width:300px」等でディスプレイ幅を取得し、PCなのか、スマートフォンなのか判断する必要があるのです。
[PR] HTML/CSSで挫折しない学習方法を動画で公開中
メディアクエリの書き方
書き方は上記で説明した書き方に沿います。
しかし、「media=”screen and (max-width:480px)”」の記述では300px以下の媒体に「sample.css」が適用されません。
次のように記述します。
CSSサンプルコード2
<link rel="stylesheet" href="sample.css" type="text/css" media="screen and (max-width:600px)"> <link rel="stylesheet" href="sample2.css" type="text/css" media="screen and (max-width:300px)"> <link rel="stylesheet" href="sample3.css" type="text/css" media="screen and (max-width:0px)">
<link>を使って各メディアごとに適用するCSSを変更しています。
しかし、メディアごとに記述しないといけないのは非常に面倒なのでCSS内に直接書き込みを行いましょう。
以下のように記述するのが一般的です。
CSSサンプルコード3
@media screen and (min-width:0px){
/*0px以上で適用する内容*/
}
@media screen and (min-width:300px){
/*300px以上で適用する内容*/
}
@media screen and (min-width:600px){
/*600px以上で適用する内容*/
}
こうすることで、各メディアに対応したデザインを実現できます。
この場合各幅ごとに、それぞれ適用させたい内容を入れていけばいいわけだね。
CSSファイル内で入力するのが一番見やすい感じがします。
次は実際にメディアクエリを使って、状態によってスタイルが変わるか見てみよう。
実際に書いてみよう
実際にコードを書いてみましょう。
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刻みで背景が変わっていると思います。
ぜひWebブラウザの幅を変更して変化を楽しんでください。
以上、メディアクエリの使い方を解説しました。
スマホ対応の書き方はいろいろありますが、一つ覚えておくと作業も捗るはずです。
ここでは横幅に応じてbodyの文字色を変更するように指定しているんだ。
サイズによって文字の色が変わっているのが分かりますね。
画面の状態によってスタイルを変えることで、より様々なメディアに対応したレスポンシブデザインが実装できるのでぜひ活用してみよう。
挑戦してみます。ありがとうございました！
TechAcademyでは、初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。
挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
