レスポンシブ対応に不可欠の「メディアクエリ」

CSS

はい、こんばんは。

早速本日のアウトプットです。

様々なデバイスに対応したウェブサイトを作りたい!!でもそれってどうやるのだろう??

こういう風に考える人が多いと思います。かくいう私もその一人でした。

そんな時に使うのが「メディアクエリ」です。

メディアクエリとは?

レスポンシブデザインの要となるCSSの新しい要素のことです。

様々なメディアタイプを指定し、記述して行きますが、ここではよく使われるscreen(ディスプレイサイズ)にのみ焦点をあてます。

どうやって使うの??

読み込みの方法ですが、2パターンあります。

  1. link要素として指定する
  2. スタイルシートにそのまま記述

それぞれ見て行きましょう。

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で見る」というのが第一でありそれ以外の選択肢はありませんでしたが、 最近ではスマートフォンやタブレットの登場により、ユーザーの環境も様変わり...

想像以上に便利で使える技だと感じました。

皆様もぜひ使って見てください!!

それでは。

コメント

タイトルとURLをコピーしました