この記事を書いた人
初心者でもわかるレスポンシブwebデザインのメディアクエリまとめ
WEB制作
どうも、日焼けが満載の刈谷・名古屋でホームページ制作をしているフリーランスのwebデザイナーの稲葉です。
前回に引き続きレスポンシブについて第二回目です。第一回目のレスポンシブのメリット・デメリットを未読の方はこちらから
今回はレスポンシブwebデザインのメディアクエリについて紹介します。
メディアクエリとは
メディアクエリとは、ホームページ制作する際のCSSの仕様の一つで、表示された画面環境に応じて適用するスタイル（css）を切り替える機能です。
レスポンシブwebデザインを作成する際に使用される機能になります。
メディアクエリの設定
メディアクエリの指定方法は大きくまとめると2つあります。
- 1,直接cssにメディアクエリを記述する
- 2,css内に記述する
@importを使用することもできますが、おすすめしないので割愛します。
その前にviewportを指定を忘れずに！
viewportとはユーザーエージェントでのページの表示方法を制御します。viewportがない場合、スマホサイトなどでは、一般的なデスクトップ画面の幅でページをレンダリングします。viewportを設定すると、ページの幅やさまざまな端末での拡大縮小を制御できるようになります。
指定方法は様々ありますが、簡単いうと下記viewportをコピペしてレスポンシブサイトを作成しましょう。
<head> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> </head>
1、直接cssにメディアクエリを記述する方法
pcのメディアクエリ
直接cssに記述する方法ですが、今回はまずpcのcssを指定させます。
<head> <!--ここにpcのcssを指定--> <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen and (min-width: 641px)"> <!--/ここにpcのcssを指定--> </head>
mediaのところを見ると、screenの後ろにmin-width: 641pxと記述されています。
これがメディアクエリです。どのような意味かというと「ブラウザサイズが641px以上からreset.cssを読み込む」という意味になります。
設定している値以下のCSSは適用されません。
ということなので、ブラウザの幅が 641px 以上の場合、reset.css が適用されます。
次にスマホのcssを指定します。
spのメディアクエリ
<head> <!--ここにspのcssを指定--> <link href="css/reset_sp.css" rel="stylesheet" type="text/css" media="screen and (max-width:640px)"> <!--/ここにspのcssを指定--> </head>
次はmax-width:640pxと記述しました。
これは、640以下はreset_sp.cssを読み込むという意味になります。
まとめると
<head> <!--ここにpcのcssを指定--> <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen and (min-width: 641px)"> <!--/ここにpcのcssを指定--> <!--ここにspのcssを指定--> <link href="css/reset_sp.css" rel="stylesheet" type="text/css" media="screen and (max-width:640px)"> <!--/ここにspのcssを指定--> </head>
こんな感じでメディアクエリでブラウザサイズで切り替えることができます。
2,css内に記述する方法
css内に記述します
@media screen and (min-width:641px) {
/* 画面サイズが641px以上からはここを読み込む */
div { color:red;}
}
@media screen and (max-width:640px) {
/* 画面サイズが640以下からはここを読み込む */
div { color:black;}
}
まとめ
メディアクエリの説明って難しいですけど、やっている事は簡単なんで、参考になれば幸いです。