2021年5月

「Sassなしでレスポンシブデザインのコーディングは苦行だと思う」 少し言い過ぎですかね？でも、Sassでレスポンシブデザインのコーディングをしていると、Sassなしでのコーディングには戻れなくなると僕は思っています。それくらいコーディングが楽になります。 SassはCSSのコーディングを色々と楽にしてくれますが、僕の場合は特にレスポンシブデザインのコーディングが楽になりました。 今回は、Sassでのレスポンシブデザインのコーディングにフォーカスして記事を書こうと思います。レスポンシブデザインをコーディングする上で、少しはお役に立つと思うので最後まで読んでいただけると嬉しいです！ Sassって何？ まずは「Sassって何？」という方のために、Sassについて簡単に説明します。 SassとはCSSを拡張するメタ言語です。 「ちょっと意味がわかんない」って感じですよね。僕なりに噛み砕いて説明すると、CSSを楽に書けるようになる言語です！ 例を挙げると、以下の様なCSSがあったとします。 .container { width: 960px; } .container .section { margin-bottom: 50px; } .container .section .title { font-size: 24px; } classを記述する際に結構コピペしないといけないですよね。これをSassなら以下のように書けます。 .container { width: 960px; .section { margin-bottom: 50px; .title { font-size: 24px; } } } それぞれのclassを1回だけ書けば良くなります。また、classを入れ子で記述できるので構造も理解しやすくなりますね。 ただし、HTMLからSassを読み込むことは出来ません。最終的にはSassをCSSに変換し、CSSをHTMLに読み込むことになります。 Sassをインストールする それでは、Sassの基本的な使い方を解説していきます。まずはSassをインストールしましょう！ SassをインストールするためにはRubyが必要です。なので、まずはRubyをインストールする必要がありますが、Macであればすでにインストールされているはずです。 ターミナルで以下のコマンドを実行してバージョン情報が表示されればインストール済みです。 $ ruby -v Windowsをお使いの場合は、Rubyがインストールされていない可能性があります。その場合はRubyの公式サイトからダウンロードできます。 Rubyがインストールされているのを確認したらSassをインストールします。ターミナルで以下のコマンドを実行してください。 $ gem install sass 上記のコマンドでインストールできない場合は、「sudo」を追加してみてください。 $ sudo gem install sass 以下のコマンドを実行し、Sassのバージョン情報が表示されればインストール完了です。 $ sass -v Sassの基本的な使い方 Sassを使う流れは以下のようになります。 scssファイルにSassを記述scssファイルをcssファイルに変換 分かりやすいように、以下のディレクトリを想定して解説します。 root/ ├ index.html ├ style.css └ style.scss index.htmlでは以下のようにstyle.cssを読み込んでください。 &lt;link rel="stylesheet" href="style.css"&gt; それでは、Sassを書いてみましょう！style.scssにSassでスタイルを記述します。 body { color: #000; line-height: 1.5; h1 { font-size: 24px; font-weight: bold; } } ターミナルで以下のコマンドを実行すると、style.scssがstyle.cssに変換されます。 $ sass style.scss:style.css --style expanded style.cssの内容は以下の様になっていると思います。 body { color: #000; line-height: 1.5; } body h1 { font-size: 24px; font-weight: bold; } いつものCSSの形ですね！ watchコマンドを使うと、scssファイルに変更があったら自動でcssファイルに変更することが出来ます。頻繁にscssファイルを編集する場合はこちらの方が楽です。 $ sass --watch style.scss:style.css --style expanded 以上がSassの基本的な使い方です。次は僕がレスポンシブデザインをコーディングする際に使っているSassの書き方をご紹介します。 Sassでレスポンシブデザインをコーディングする レスポンシブデザインをコーディングする場合、メディアクエリでデバイス毎のスタイルを書いていきます。 僕はモバイルファーストでスタイルを指定していくので、まずはモバイル用のスタイルを書き、タブレット用やPC用のスタイルで上書きしていきます。 /* モバイル用のスタイル */ h1 { font-size: 16px; } /* タブレット用のスタイル */ @media (min-width: 768px) { h1 { font-size: 20px; } } /* PC用のスタイル */ @media (min-width: 1200px) { h1 { font-size: 24px; } } それぞれのメディアクエリの記述場所が離れていると行ったり来たりするのが手間ですし、間違いの元にもなりますよね。これがSassだと以下のように書くことが出来ます。 h1 { // モバイル用のスタイル font-size: 16px; // タブレット用のスタイル @media (min-width: 768px) { font-size: 20px; } // PC用のスタイル @media (min-width: 1200px) { font-size: 24px; } } h1の中にメディアクエリを記述し、デバイスごとに変えたい部分だけを上書きしていきます。 入れ子と組み合わせて以下のように書くことも可能です。 section { margin-bottom: 30px; padding: 30px; border-bottom: 1px solid #ccc; @media (min-width:768px) { margin-bottom: 60px; } @media (min-width:1200px) { margin-bottom: 90px; } h1 { font-size: 16px; font-weight: bold; line-height: 1.5; @media (min-width: 768px) { font-size: 20px; } @media (min-width: 1200px) { font-size: 24px; } } } このscssファイルをcssファイルに変換すると以下のようになります。 section { margin-bottom: 30px; padding: 30px; border-bottom: 1px solid #ccc; } @media (min-width: 768px) { section { margin-bottom: 60px; } } @media (min-width: 1200px) { section { margin-bottom: 90px; } } section h1 { font-size: 16px; font-weight: bold; line-height: 1.5; } @media (min-width: 768px) { section h1 { font-size: 20px; } } @media (min-width: 1200px) { section h1 { font-size: 24px; } } 慣れない間は見にくいと感じるかもしれませんが、慣れるとすごく楽ですよ！メディアクエリ間を行き来する必要がなくなりますし、セレクタやクラスごとにメディアクエリで上書きしていくので、デバイスごとのスタイルの指定が把握しやすくなります。 ただ、この書き方にはデメリットがあります。上記のCSSを見て分かる通り、メディアクエリが色々な箇所に分散してしまうんです。 このままでも特に問題はありませんが、何となくスマートではない気がします。「どうしても気になる！」という僕と同類の方は、タスクランナーGulpを使うことで解決できます！ 次はGulpでメディアクエリをまとめる方法を解説しますが、興味がない方はスルーしてOKです。 GulpでSassのメディアクエリをまとめる さっそくSassのメディアクエリをGulpでまとめる方法を解説していきます。 「Gulpって何？」という方は以下の記事を参考にして、ぜひこの機会に導入してみてください。 それでは、Gulpはインストール済みという前提で解説していきます。せっかくなので、SassのコンパイルもGulpでやってみましょう！ 先程と同様に以下のディレクトリ構造で解説します。 root/ ├ gulpfile.js ←新規で作成してください ├ index.html ├ package.json ←後述します ├ style.css └ style.scss 以下のコマンドを実行してpackage.jsonを作成します。プロジェクト名などを設定する質問が表示されますが、とりあえず全てreturnキーを押せばOKです。 $ npm init 次はGulpと必要なパッケージをインストールします。Sassのコンパイルとメディアクエリをまとめるために必要なパッケージは以下の3つです。 gulp-sassgulp-postcsscss-mqpacker それぞれのパッケージについては以下の記事で解説しているので、興味がある方はぜひ読んでみてください！ 以下のコマンドでGulpとパッケージを一括でインストールしましょう！ $ npm install --save-dev gulp gulp-sass gulp-postcss css-mqpacker パッケージをインストールしたらgulpfile.jsというファイルを作成します。gulpfile.jsはGulpの処理を記述するファイルです。以下のソースコードを記述してください。 const gulp = require("gulp"); const sass = require("gulp-sass"); const postcss = require("gulp-postcss"); const mqpacker = require("css-mqpacker"); // Sassのコンパイル＆メディアクエリをまとめる function compileSass() { return gulp .src("./*.scss", { sourcemaps: true }) .pipe( sass({ outputStyle: "expanded", }) ) .on("error", sass.logError) .pipe(postcss([mqpacker()])) .pipe(gulp.dest("./", { sourcemaps: "./" })) } // scssファイルを監視 function watchFiles() { gulp.watch("./*.scss", compileSass); } // タスク化 exports.default = watchFiles; そして以下のコマンドでGulpを実行します。 $ npx gulp するとscssファイルの監視が始まります。style.scssファイルに以下のソースコードを記述して保存してください。 section { margin-bottom: 30px; padding: 30px; border-bottom: 1px solid #ccc; @media (min-width:768px) { margin-bottom: 60px; } @media (min-width:1200px) { margin-bottom: 90px; } h1 { font-size: 16px; font-weight: bold; line-height: 1.5; @media (min-width: 768px) { font-size: 20px; } @media (min-width: 1200px) { font-size: 24px; } } } 自動的にstyle.scssがstyle.cssに変換されます。Gulpを使う前と異なり、それぞれのメディアクエリがまとめて記述されていると思います。 section { margin-bottom: 30px; padding: 30px; border-bottom: 1px solid #ccc; } section h1 { font-size: 16px; font-weight: bold; line-height: 1.5; } @media (min-width: 768px) { section { margin-bottom: 60px; } section h1 { font-size: 20px; } } @media (min-width: 1200px) { section { margin-bottom: 90px; } section h1 { font-size: 24px; } } いい感じですね！ かなり見やすくなりましたし、メディアクエリの記述が減る分ファイル容量も軽くなります！ まとめ Sassを使い始めると、便利すぎてSassなしでのコーディングには戻れなくなります。 今回はレスポンシブデザインのコーディングにフォーカスして使い方を解説しましたが、その他にも色々と便利な機能があります。機会があれば、Sassの便利な使い方を解説する記事も書いてみようと思います！ まだSassを使ったことがない方、Sassを使っているけどレスポンシブデザインのコーディングに活かせていない方は、今回の記事でご紹介した方法をぜひ試してみてください！ もし分かりにくい所があるばあいは、お気軽にコメントください！最後まで読んでいただきありがとうございました！