見出し画像

【初心者向け】メディアクエリを活用しモバイルファーストなレスポンシブWebデザインを構築する方法

webデザイナーimane🍪できることから少しずつ

スマホの普及により、ウェブサイトを制作する上でもモバイルファーストの風潮がどんどん強くなっています。スマホ環境で見られることを想定して制作されたウェブサイトでない限り、PC用のウェブサイトをスマホ用やタブレット用の表示に切り替える必要があります。それがレスポンシブWebデザインと呼ばれる仕様です。

しかし、スマホや、タブレット用のCSSを記述する必要があり、どうしても記述量が増えるので全体のデータ容量が大きくなるわけです。その反面、PCユーザーよりもむしろスマホやタブレット端末から閲覧する人が多い傾向にあるので、どのように少ない記述でレスポンシブ対応にするかを考える必要があります。

レスポンシブWebデザインを実現するテクニックにはいくつかの方法がございますが、本稿ではメディアクエリを活用したスマートなレスポンシブデザインにする方法を基本的な部分から説明致します。

メディアクエリとは

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

基本的な記述例

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

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

  • all→全てのデバイス

  • screen→画面のあるデバイス（主にPCやスマホ等）

  • print→プリンター

  • speech→音声出力デバイス

が、ほとんどの場合screenを使用することが多いので、ここまでは決まった形式として
「@media screen and (特定の条件)」
としてもあまり支障はありません。特定の条件には画面幅を指定します。例えば(min-width:768px)と記述すると画面幅が768px以上の場合という条件が指定されます。
つまりこの条件でCSSを指定したい場合は、以下の様な記述になります。

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

※CSSを記述する際、上記のように波括弧が二重の入れ子になる必要があります。ある条件下でのみ適用したいCSSの記述をメディアクエリで丸ごと外から囲むようなニュアンスです。この波括弧が入れ子になっていない場合、正しく反映されません。

弊社カスタマーサポートにもCSSに記述したメディアクエリが反映されないというお問い合わせがございますが、波括弧の閉じ忘れが原因として意外と多かったりもします。
CSSやHTMLの記述を確認するには、以下の記事で紹介しているデベロッパーツールで調べてみましょう。これで弊社テーマでもメディアクエリをどのように活用しているのかを確認することができます。

  • 2016.06.23

  • 2022.11.30

超初心者向け！クロームのデベロッパーツールの基本操作

弊社カスタマーサポートに届くお問い合わせの中でも、HTMLやCSSにほとんど馴染みのない方やWordPress初心者の方からの質問に多くあるのが、「文字の色やサイズを変更したい」「背景色を変更したい」等です。この類の変更はCSSを編集することで解決できます。また弊社テーマの多くには「カスタムCSS」...


ブレイクポイントとは

ブレイクポイントとは、デザインを変化させるタイミングの画面幅のことであり、「min-width:〇〇px」という部分です。基本的にデバイス毎の標準的な画面幅に設定することが多く、タブレットなら770pxぐらい、PCなら990pxぐらいに指定することが多いです。この辺は時代によっても変わってきますが、細かい部分はその都度調べてシェアの高いものの幅に合わせるのが良いでしょう。

ブレイクポイントを増やせば、端末の画面サイズに合わせて細かくデザインを変更することもできますし、場所をずらすことで、デザインの変わるタイミングを変更することもできます。

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

メディアクエリで囲まれている部分は、特定の条件下でのみ適用されますが、それ以外の部分は条件に限らずどのデバイスにも適用されるベースのCSSといえます。モバイルファーストのレスポンシブWebデザインとは、まずそのベースの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の文字サイズが指定されていますので、他のデバイスでデザインを変更しない場合、特に記述をする必要はありません。上記の例では、タブレット環境ならbodyの背景色が青色、PC環境なら緑色に変更するよう指定をする為にメディアクエリを活用し追記しているわけです。

ウェブサイトはスマホの方がレイアウトがシンプルな場合がほとんどなので、レスポンシブWebデザインを構築する際、スマホベースでCSSを記述します。モバイルファーストの手法を用いることで全体の記述量が減り、管理もしやすくなります。現在主流になっているのも納得ですね。

まとめ

メディアクエリを活用することで、端末ごとにデザインを分けることができますが、CSSの記述の方法によっては余分なデータ容量が増えたりして、読み込みに時間がかるケースもあります。結果としてサイトから離脱される可能性も高まるので、出来るだけ簡潔な記述にする方がベターです。メディアクエリとブレイクポイントの基本的な理解を踏まえた上で、モバイルファーストなCSSを意識しスマートフォンユーザーにもスムーズに閲覧してもらえるようなサイト作りを心がけましょう。

今回は、こちらを参考に新サイトに導入させていただきました！
わかってるんだけど、実際自分で書くとなると見直しが必要で・・・・
そんな方にぜひご覧いただければ嬉しいです！


この記事が気に入ったらサポートをしてみませんか？