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

Advertisement

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

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

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

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

メディアクエリをモジュールごとにまとめた方が良い理由

なぜメディアクエリはモジュールごとにまとめて書いた方が良いのか?

それは、以下の3つが理由です:

  1. 丁寧なレスポンシブ対応を行うとブレイクポイントが多くなる
  2. モジュールごとに違ったサイズのブレイクポイントが発生する
  3. どのブレイクポイントにどのモジュールのCSSがあるのか探しにくい

ちなみに、先日作ったページでは最終的にはブレイクポイントが32個になりました。予算や納期があるので永遠に調整を続けるわけにはいかないですが、それでもまだ調整出来ることはあったように思います。

ようするに、丁寧なレイアウトの調整をすればするほど細かいメディアクエリの指定は増えるし、モジュールが増えれば増えるほどメディアクエリも増えるわけですね。

もちろん、どのようなデザインかによってブレイクポイントの数は大幅に違ってきます。でも、ブレイクポイントが増えてから書き方を修正するのは大変なので、はじめはブレイクポイントが少なくても、モジュールごとにまとめて書き始めるのが得策です。

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;
  }
}

@mediaの記述が増えてしまう問題

メディアクエリをモジュールごとにまとめて書くと、どうしてもメディアクエリの記述(@media screen and …)が増えてしまいます。なので、最終的にはGulpやPostCSS(CSS MQPacker )のようなツールを使うなどしてCSSの最適化をすると良いと思います。

Gulpを使った方法については、過去記事「SassとGulpを使った便利なメディアクエリの記述方法とアウトプットの最適化」をご参照ください。

CSS MQPakcer
は、PostCSSのプロセッサー(プラグイン)としても使えますし、コマンドラインツールとしても使えるので便利そうです。ただ、CSSがプロセスされる際に特定のルールで書き換えられるため、その辺のクセを理解して使わないと痛い目に遭いそうです。そのあたりはCSS MQPackerのGithubのREADME.md をご参照ください。MQPackerはまだ検証できていないので、試してみて注意点などあるようだったら、またこのブログでお知らせしたいと思います。

まとめ

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

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

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

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です