2017年11月23日シェアする:先日このブログのデザインをリニューアルしたときに、メディアクエリの記述が結構手間だったので、記述のしやすさ、メンテナンス性の良さ、また、最終的なCSSファイルの最適化の3つの観点から、便利な書き方と最適化の方法をまとめてみました。目次モバイル・ファーストCSSで書く要素ごとに、Sassを使って記述するGulpを使ってメディアクエリの整理するまとめモバイル・ファーストCSSで書くメンテナンス性の良さや重複の少ないよりシンプルなCSSの記述を目指すと、モバイル・ファーストCSSで書くのが良いです。デスクトップ・ファーストCSSで書く場合、小さい画面向けにはスタイルを追加するというより、消していく(または、上書きして帳消しにする)作業が多くなってしまいます。このブログはモバイルからのアクセスが1割程度なので、今回のデザインのリニューアルでは、まずデスクトップ向けのCSSから記述しました。その後、モバイル・ファーストCSSに記述を直していったのですが、結構手間がかかりました。デスクトップを優先してデザインしていく場合、CSSもデスクトップ向けのものから記述したほうがやりやすいと思ったのですが、後の工程で手間が増えてしまいました。参考までに、今回のプロセスをご紹介します。}}あれ?こう書いてみると、そんなに悪くないのか?考え方や作業の慣れもあると思うので、どちらが良いかはなかなか判断がつきにくいところですが、経験則的に、最終的な記述方法はモバイル・ファーストCSSのほうが良いと思います。要素ごとに、Sassを使って記述するメディアクエリは要素ごとに書いたほうが圧倒的に書きやすいです。まとめて書いてると、コードを行ったり来たりするのに時間がかかります。外部Sassファイルを読み込むようにしていても、ある要素のメディアクエリの記述を探すのに手間がかかります。いうことで、メディアクエリは以下のように各要素ごとに書くのが便利です。}}さ・ら・に!Sassを使うと、さらに便利です(Lessでもいいんでしょうけど、僕はSass派なので)。Sassの便利な機能の1つは入れ子での記述ですが、メディアクエリも同じように入れ子にすれば、属性だけの記述でOKです。以下のように記述をすれば、「h1」を何度も書かなくてすむのでかなり効率的です。}}これ、かなり便利ですよね?でも!要素ごとにメディアクエリを書いていたら、記述が増えちゃいませんか!?あ、はい、増えますね...そこで、Gulpの登場です。記述が増えてしまいますが、デプロイ前にツールを使って整理することができます。実は、整理しなくても、ボリュームが少ないCSSでは、ファイルサイズにもレンダリングにもあまり影響はないと言って良さそうです。あたりのプラグインを使うと、以下のようにメディアクエリを整理してくて、ファイルサイズも縮小できます。ちなみに、このブログのCSSで試してみたところ、2,253バイトほどファイルを圧縮でました。このサイトはスタイル記述が少ないほうなのでこの程度ですが、大規模なサイトの場合、メディアクエリの整理でだいぶファイルサイズを圧縮できそうですね。}}まとめGulpのこのプラグイン、いいですね〜。いったツールやプラグインのおかげで、以前は実現できなかったことが、どんどん実現できるようになってますね。あげてあるので、よかったらそちらもご参照ください。メディアクエリはレスポンシブ対応だけでなく、ちょっとした最適化にも使えるものです。柔軟、かつ効率的に使って、どんなサイズの端末でも快適な閲覧ができるように、ウェブサイトを制作していきたいですね。author「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。ウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。使ったときに戸惑ったことのまとめレスポンシブなデザインにするなら知っておきたい。コメントをキャンセルメールアドレスが公開されることはありません。