はい、こんばんは。
早速本日のアウトプットです。
様々なデバイスに対応したウェブサイトを作りたい!!でもそれってどうやるのだろう??
こういう風に考える人が多いと思います。かくいう私もその一人でした。
そんな時に使うのが「メディアクエリ」です。
メディアクエリとは?
レスポンシブデザインの要となるCSSの新しい要素のことです。
様々なメディアタイプを指定し、記述して行きますが、ここではよく使われるscreen(ディスプレイサイズ)にのみ焦点をあてます。
どうやって使うの??
読み込みの方法ですが、2パターンあります。
- link要素として指定する
- スタイルシートにそのまま記述
それぞれ見て行きましょう。
1. link要素として指定
screenサイズが〜のサイズまでならこのCSSを、〜以上〜以下ならこのCSSファイルを、といった具合に使い分けたいときに便利な方法です。CSSをファイルごとに管理できるので、この手法がやりやすいと感じます。
例
HTML
<link rel="stylesheet" href="任意のファイル名.css" media="screen and (max-width:480px)">/* 画面サイズが480pxまでこのファイルのスタイルが適用される。*/
HTML
<link rel="stylesheet" href="任意のファイル名.css" media="screen and (min-width:480px) and (max-width:1024px)"> /* 画面サイズ480pxから1024pxまではこのファイルのスタイルが適用される。 */
HTML
<link rel="stylesheet" href="任意のファイル名.css" media="screen and (min-width:1024px)">/* 画面サイズ1024px以上はこのファイルはスタイルが適用される */
上記のように、HTMLファイルに記述し、各CSSファイルを呼び出して上げるのが1つ目の方法です。CSSファイルの数は増えますが、管理しやすいので、私はこちらが好きです。
2. スタイルシートに記述
これはCSSファイルに直接記述していく方法になります。
CSSファイル
p {
color:red;
}
上記のような指定だと、全てのCSSファイルで読み込まれることになりますよね?
「メディアクエリ」の記述は下記になります。
CSSファイル
@media screen and (min-width:480px) {
/* 画面サイズが480pxからはここを読み込む */
}
上記のように、@media screen and(min-width: 指定したいサイズ){}という形で指定します。min-widthだけではなく、他の指定でも効果はあるので、色々ためしてみてください。
もっと突き詰めると、端末の向き(縦、横)でも判定できたりします。
以下、参考にさせていただいた記事です。
レスポンシブの基本、メディアクエリの書き方 | それからデザイン スタッフブログ
以前のWebは「PCで見る」というのが第一でありそれ以外の選択肢はありませんでしたが、
最近ではスマートフォンやタブレットの登場により、ユーザーの環境も様変わり...
想像以上に便利で使える技だと感じました。
皆様もぜひ使って見てください!!
それでは。
コメント