メディアクエリの書き方はモジュール（ページ要素）ごとにまとめるのがいい

先日、久々に凝ったレイアウトのレスポンシブ・ウェブサイトのCSSをがっつり書いていて、やっぱりメディアクエリはモジュール（ページ要素）ごとにまとめて書いた方が良いというのを実感しました。ブレイクポイントでまとめて書くとブラウザで確認しながら細かいレイアウトの調整をするのが大変なんですね。

レイアウトの調整が細かければ細かいほど、メディアクエリはモジュールごとにまとめて書くのが良いです。途中で書き直すのは結構大変なので、これからレスポンシブなサイトのコーディングを始める方で迷っている方、お気をつけください。

以上、Rriverからのお知らせでした。笑

手短に言ってしまうと、伝えたいことは以上なんですけど、もう少し説明してみます。

Sassで書くとさらに便利

以前にも紹介しましたが、メディアクエリをモジュールごとにまとめて書く場合、Sassで書くとスタイルの記述をさらに書きやすく、読みやすくできます。

h1 {
  font-size: 1.6em;

  @media screen and (min-width: 600px) {
    font-size: 1.8em;
  }
  @media screen and (min-width: 960px) {
   font-size: 2em;
  }
  @media screen and (min-width: 1240px) {
    font-size: 3em;
  }
}

まとめ

繰り返しになりますが、あらゆる画面サイズに対応するレスポンシブなページを前提に考えると、丁寧なレイアウトの調整をすればするほどメディアクエリの記述は増えます。なので、メディアクエリはモジュールごとにまとめて書くのが便利です。

どこまで細かいレイアウトの調整をするかはプロジェクトの特性にもよるしケースバイケースなのでなかなか判断が難しいところです。それ以上やっても意味がないという臨界点みたいなのはあるかもしれないですけど、明確な線や点があるわけじゃないから「どこまで」というのはプロジェクトオーナーやマネージャーが決めるしかなさそうです。

ただ、どの画面サイズで見てもレイアウトが「完璧」に整っているものを目指すというのは、やり過ぎな気もします。なんか、クロスブラウザで1pxのづれも許さない昔のコーディングを思い出してしまいますね。

人間らしい柔軟な対応で差を付ける

たとえば、基準となるいくつかの画面サイズでは設計通りのデザインとレイアウトを実装して、残りのサイズは制作者の柔軟な対応に任せるというのが一番現実的だと思います。そして、制作者にとっては、この「柔軟な対応」の部分で技術力とかセンスの差が如実に現れると感じています。さらに言うと、そこがある意味腕の見せ所でもあるんじゃないかな、と思っています。

腕のいい職人さんて、見えにくいところや隠れたところでも丁寧な仕事をしてるもんなんですよね。そして、それが全体の質を上げ、見えないレベル（=感覚で感じ取るレベル）の差に繋がっています。なんでも効率化して数値化・可視化する時代に、こういった目に見えない部分での差別化が、サービスや製品の善し悪しを隔てる境目になってきていると思います。制作者としては、細かい対応ができるように常に準備しておきたいですね。

2017年10月3日に公開された記事です。

この記事をシェアする

• ツイート
• シェアする
• ブックマーク
• Pocketに保存