【初心者向け】メディアクエリの使い方｜モバイルファーストなレスポンシブデザインの基本

ウェブサイト制作でもモバイルファーストは主流です。PC用のデザインをスマホ・タブレット用に切り替える仕組みが、いわゆるレスポンシブWebデザインです。

ただ、デバイスごとにCSSを書き分けると記述量が増え、データ容量も大きくなりがちです。PCよりスマホ・タブレットから閲覧するユーザーが多いからこそ、少ない記述でレスポンシブ対応する工夫が求められます。

レスポンシブWebデザインの実現方法はいくつかありますが、当記事ではメディアクエリを使った基本的な方法をご紹介します。

メディアクエリとは

メディアクエリとは、ある条件を満たす時だけ指定したCSSを適用し、満たさない時は適用しないようにするCSSの記述の方法です。

基本的な記述例

@media メディアのタイプ and (特定の条件){
指定したいCSSの記述
}

上記のメディアのタイプとは主に以下4種類になります。

実務ではほとんどの場合「screen」を使うので、基本的には「@media screen and (特定の条件)」という形式で覚えておけば問題ありません。

特定の条件には画面幅を指定します。例えば(min-width:768px)と記述すると画面幅が768px以上の場合という条件が指定されます。

この条件を指定する場合、以下のように記述します。

@media screen and (min-width:768px){
body{background-color:red;}
}

波括弧は二重の入れ子にする必要があります。「メディアクエリで対象のCSSを丸ごと囲む」イメージです。入れ子になっていないと正しく反映されないので注意してください。

実際、弊社カスタマーサポートにも「メディアクエリが反映されない」というお問い合わせが来ますが、波括弧の閉じ忘れが原因であるケースが少なくありません。

CSSやHTMLの記述を確認したい場合は、以下の記事で紹介しているデベロッパーツールを使うと、弊社テーマでのメディアクエリの使い方も確認できます。

ブレイクポイントとは

ブレイクポイントとは、デザインが切り替わる画面幅のことで、「min-width:〇〇px」の部分にあたります。

タブレットは770px前後、PCは990px前後に設定されることが多いですが、この基準は時代によって変わるため、その都度シェアの高い画面幅に合わせるのがおすすめです。

ブレイクポイントを増やせば端末ごとに細かくデザインを調整でき、位置をずらせばデザインが切り替わるタイミングも変更できます。

モバイルファーストなCSSを記述する方法

メディアクエリで囲まれた部分は特定の条件下でのみ適用され、それ以外はすべてのデバイスに適用されるベースのCSSです。モバイルファーストとは、このベースCSSでまずスマホ向けのデザインを指定し、そこからタブレット・PC向けにブレイクポイントで上書きしていく記述方法です。

//全デバイス共通のCSS（スマホ向け）
body{background-color:red;}
h1{font-size:20px;}
//幅768px以上に適用されるCSS（タブレットサイズ以上）
@media screen and (min-width:768px){
body{background-color:blue;}
}
//幅990px以上に適用されるCSS（PCサイズ以上）
@media screen and (min-width:990px){
body{background-color:green;}
}

全デバイス共通のCSSでh1の文字サイズを指定しているので、他デバイスでサイズを変えない場合は追記不要です。上記は、タブレットで背景色を青、PCで緑に変えるためにメディアクエリを追加しています。

スマホの方がレイアウトはシンプルな場合が多いため、スマホベースでCSSを組み立てるのが基本です。モバイルファーストにすることで記述量が減り、管理もしやすくなります。

まとめ

メディアクエリを使えば端末ごとにデザインを分けられますが、書き方次第ではデータ容量が増え、読み込み速度に影響することもあります。メディアクエリとブレイクポイントの基本を押さえつつ、モバイルファーストを意識した簡潔な記述を心がけましょう。

なお、文字サイズや余白など細かい部分をなめらかに可変させたい場合は、clamp()関数を使う方法もあります。メディアクエリと使い分けたい方は、以下の記事もあわせてご覧ください。

デバイスごとの見え方を確認したい際は、こちらの拡張機能がおすすめです。