SassとGulpを使った便利なメディアクエリの記述方法とアウトプットの最適化

先日このブログのデザインをリニューアルしたときに、メディアクエリの記述が結構手間だったので、記述のしやすさ、メンテナンス性の良さ、また、最終的なCSSファイルの最適化の3つの観点から、便利な書き方と最適化の方法をまとめてみました。

目次

• モバイル・ファーストCSSで書く
• 要素ごとに、Sassを使って記述する
• Gulpを使ってメディアクエリの整理する
• まとめ

モバイル・ファーストCSSで書く

メンテナンス性の良さや重複の少ないよりシンプルなCSSの記述を目指すと、モバイル・ファーストCSSで書くのが良いです。デスクトップ・ファーストCSSで書く場合、小さい画面向けにはスタイルを追加するというより、消していく（または、上書きして帳消しにする）作業が多くなってしまいます。

このブログはモバイルからのアクセスが1割程度なので、今回のデザインのリニューアルでは、まずデスクトップ向けのCSSから記述しました。その後、モバイル・ファーストCSSに記述を直していったのですが、結構手間がかかりました。デスクトップを優先してデザインしていく場合、CSSもデスクトップ向けのものから記述したほうがやりやすいと思ったのですが、後の工程で手間が増えてしまいました。

参考までに、今回のプロセスをご紹介します。

たぶん、ダメな記述プロセス

ステップ1

まずは、デスクトップ向けのCSSを書く

h1 { font-size: 2em }

ステップ2

小さい画面向けにCSSを記述するために、デスクトップ向けの記述にメディアクエリを追加

@media screen and (min-width: 960px) {
  h1 { font-size: 2em }
}

ステップ3

小さい画面向けのCSSを追加

h1 { font-size: 1.6em }
@media screen and (min-width: 960px) {
  h1 { font-size: 2em }
}

ステップ4

中間サイズの画面向けのCSSを追加

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

あれ？
こう書いてみると、そんなに悪くないのか？

考え方や作業の慣れもあると思うので、どちらが良いかはなかなか判断がつきにくいところですが、経験則的に、最終的な記述方法はモバイル・ファーストCSSのほうが良いと思います。

要素ごとに、Sassを使って記述する

メディアクエリは要素ごとに書いたほうが圧倒的に書きやすいです。これは絶対です。笑

プロジェクトのはじめからメディアクエリを @media でまとめて書いてると、コードを行ったり来たりするのに時間がかかります。また、外部Sassファイルを読み込むようにしていても、ある要素のメディアクエリの記述を探すのに手間がかかります。

ということで、メディアクエリは以下のように各要素ごとに書くのが便利です。

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

さ・ら・に！

Sassを使うと、さらに便利です（Lessでもいいんでしょうけど、僕はSass派なので）。

Sassの便利な機能の1つは入れ子での記述ですが、メディアクエリも同じように入れ子にすれば、属性だけの記述でOKです。たとえば、以下のように記述をすれば、「h1」を何度も書かなくてすむのでかなり効率的です。

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

これ、かなり便利ですよね？

でも！要素ごとにメディアクエリを書いていたら、記述が増えちゃいませんか！？

あ、はい、増えますね…

そこで、Gulpの登場です。

Gulpを使ってメディアクエリの整理する

上述のようにSassを使ってメディアクエリを書くと、 @media の記述が増えてしまいますが、デプロイ前にツールを使って整理することができます。また、実は、整理しなくても、ボリュームが少ないCSSでは、ファイルサイズにもレンダリングにもあまり影響はないと言って良さそうです。

どうしても気になる。数キロバイトでも最適化するべきだという場合は、Gulpだとgulp-combine-media-queries とかGruntだとgrunt-combine-media-queries あたりのプラグインを使うと、以下のようにメディアクエリを整理してくて、ファイルサイズも縮小できます。

ちなみに、このブログのCSSで試してみたところ、2,253バイトほどファイルを圧縮でました。このサイトはスタイル記述が少ないほうなのでこの程度ですが、大規模なサイトの場合、メディアクエリの整理でだいぶファイルサイズを圧縮できそうですね。

メディアクエリ最適化前	28,101バイト
メディアクエリ最適化後	25,848バイト

※1 これらプラグインに関しては、バグ情報（Gulp | Grunt ）に注意が必要です。
※2 Sublime Textのプラグインもあるんですが、現段階ではうまく動かすことができませんでした

整理前

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

h2 {
  font-size: 1.4em;
  @media screen and (min-width: 600px) {
    font-size: 1.6em;
  }
  @media screen and (min-width: 960px) {
    font-size: 1.7em;
  }
  @media screen and (min-width: 1240px) {
    font-size: 2.6em;
  }
}

整理後

h1 { font-size: 1.6em; }
h2 ( font-size: 1.4em; }

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

まとめ

Gulpのこのプラグイン、いいですね〜。こういったツールやプラグインのおかげで、以前は実現できなかったことが、どんどん実現できるようになってますね。嬉しい限りです。ちなみに、すごくベーシックなGulpの設定を Github にあげてあるので、よかったらそちらもご参照ください。この記事で紹介した gulp-combine-media-queries の設定も入っています。

メディアクエリはレスポンシブ対応だけでなく、ちょっとした最適化にも使えるものです。柔軟、かつ効率的に使って、どんなサイズの端末でも快適な閲覧ができるように、ウェブサイトを制作していきたいですね。

それでは、今宵も楽しく制作しましょ〜

2014年9月13日に公開され、2017年11月23日に更新された記事です。

この記事をシェアする

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