「Webデザインのもう一歩踏み込んだスキルを身につけたい。」
「制作効率を上げて、連日の深夜までの作業から抜け出してゆっくり眠りたい。」
「Sass正直どんなものかよく分かってないから笑ってごまかしてる。」
この記事はそんな方へ向けて書いています。
Webデザインを含めた制作系のお仕事。
締め切りが近づいたり、取引先から無茶な要求や仕様変更に振り回されたり…。
作業が深夜まで及んだり、徹夜しなければ締め切りに間に合わない様な状況におちいっていませんか？
僕自身、ついこのあいだまで取引先の無茶な要求に振り回され、徹夜作業を強いられていました。。
それなりの経験をつんできたつもりでいてもこんな状況を強いられるので、駆け出しのWebデザイナーの方は本当に寝る間も惜しんで作業しなければならない場面が多くあると思います。
制作系の仕事にとって作業スピードや効率を上げていく事は、平穏で健康的な生活を送る為の死活問題になります。
さらに、同じ時間内で作業効率を高める為のちょっとしたコツやスキルを身につけておく事で、最終的な完成品の質も高まり、自分の市場価値も高める事ができます。
今回はそんな作業を高速化する為の１つのコツ。
CSSを効率良くコーディングするための「Sass」について、基本的な概要と書き方を解説しています。
「Sassって耳にする事はあるけど、正直どんなものかよく分かってない。。」
そんな方は是非参考にご覧ください。
たった5分でざっくりつかめる！Sassの基礎と使い方。
Sassとは？
- CSSを効率的に書くことができる言語。
- 拡張子が「.scss」のものと「.sass」と2種類ある。
- 本記事では現在主流の「scss」について解説。
- Sassを使う為には「ruby」のインストールが必要。
Sassとは、Webサイトを装飾する為の言語、スタイルシート「CSS」を効率的に書く事ができる言語です。
プログラミングライクな書き方ができ、プログラミングを勉強した後にWebデザインをはじめた方にはSassの方が書きやすいと感じるかもしれません。
Sassには種類が２つあり、拡張子が「.sass」のものと「.scss」のものがあります。
もともとは、rubyっぽく書ける「.sass」から始まっていますが、現在はCSS3っぽく書ける「.scss」が主流です。
ですので、本記事では基本的に「.scss」の基礎や書き方について解説しています。
なお、Sassは
「Sassでコーディングしたファイル」 → （変換） → 「CSSファイル」
といった様な流れで、
Sassでコーディングしたファイルを最終的にCSSファイルに変換して使用します。
「Sassの書き方を覚えたから、今日からCSSをSassで全部書いていくぞ！」
という訳にはいかない場合があるのでご注意を。
Macにはデフォルトでrubyが使えますが、Windowsは別途rubyが使える環境の設定が必要です。
Sassを使うメリットって何？
- プログラミンライクに効率良くCSSを書く事ができる。
- 関数、変数などを定義する事ができる。
- これらの事から、CSSコードを再利用しながら、まとめて短くシンプルに書く事ができる。
Sassは簡単に説明すると、CSSをプログラミングライクに効率良く書ける様にしたものです。
プログラミングではおなじみの、「変数」「関数」などを定義する事ができます。
まだ主にhtmlとCSSだけを使用している方には
「変数、関数、、何のこっちゃ？」
となるかもしれません。
簡単に説明すると、変数とは、イメージ的には値を入れておく箱の様なものです。
「赤くておいしいリンゴ」という文字列を「a」という名前の付けた箱に入れておけば、次からは「a」という一文字でを「赤くておいしいりんご」を表す事ができます。
関数とは、よく使う処理をまとめたものを指します。
こういった、プログラミングで確立されている、頻繁につかう値や処理をまとめる事で効率の良くコーディングする方法。
SassはCSSのコーディングでもそういったプログラミングライクな効率の良いコーディングが実現できる様にしてくれています。
SassでのCSSコーディングをマスターする事ができれば、
Webサイト制作のコーディングに掛かる時間や、修正の際手間をグッと減らし、
修正のしやすい短くシンプルなCSSコーディングができる様になります。
文字だけで説明していると、
「なんだか難しそう。。」
と感じるかもしれません。
僕も最初はそう思っていましたが、実際にどんなものかを見てみると、
「自分でもできそうだな」
と感じていただけると思います。
前置きが長くなってしまいましたが、
実際にどんなコードを書く事になるのか？
次項から載せていってみます。
Sassリファレンス。具体的な書き方と使い方。
基本的な書き方と構造
scssで書いたスタイル
上記scssと同じ意味のcssスタイル
上記コードはscssで書いてみたスタイルと、同じ意味のCSSスタイルです。
scssの一番のポイントは、htmlと同じ様にネスト（入れ子）構造なっているところです。
なので、人によってはCSSよりとっつき易い書き方に感じるかもしれません。
CSSでは
「#menu ul li a」
としていたセレクターが、
scssではネスト構造を活用し
「a」
だけで指定する事ができます。
また、視覚的にも後から見た時に、親子関係が分かりやすくなっています。
疑似セレクターは「&」で表記できる。
scssで書いたスタイル
scssで書いたスタイル
マウスをホバーした時に色を変えたりする為に使う「疑似セレクター」。
scssでは、スコープ内なら「li:hover」といった指定を「&:hover」と書く事ができます。
変数を使った便利な使いまわし
CSSを書いている途中に、
「アクセントカラーのカラーって何色指定してたっけ…。#FF6347、いや、#EE6347だっけ？」
となった事はありませんか？
scssなら簡単にその問題を解決できます。
方法は「変数」を利用してその色を定義しておくだけです。
あとは、その色を呼び出したい時に設定しておいた変数、上記コードだったらアクセントカラーなら「$accentColor」といった覚えやすい名前をつけておき、呼び出す時にその変数を入力するだけで迷う事なくコーディングを進める事ができます。
mixinで、スタイルをまとめておいて使い回す
mixinを使って、複数の要素に適用する予定のスタイルをまとめておき、必要な時に呼び出す事で便利に使い回す事ができます。
上記コードを例にすると、幅が300pxでパディングを20px、さらに5pxの角丸をつけた要素を複数配置する予定がある場合に、「@mixin」をつかってそのスタイルをまとめておく事で必要な時にそのスタイルセットを呼び出して適用させる事ができます。
「@mixin 変数名()」で定義して、
「@include 変数名()」で呼び出します。
また、mixinには「引数」を渡す事もできます。
上記コードで説明すると、
「角丸を一つだけ10pxのものをつくりたい」
そんな場合は、予め初期値として角丸を5pxの定義を、@includeで呼出す再に引数として
10pxを渡して上書きする事で実装する事ができます。
プログラミングでおなじみの概念は大体つかえる
mixinあたりから、書き方のプログラミング要素が濃くなってきていますが、
プログラミングでお馴染みの概念
- if文
- while文
- for文
- 関数
- 継承
などもSassでは使用する事ができます。
また、関数も「darken()」「liten()」など予め用意されているものもいくつかあり、
color: darken(色, 50%);
→指定した色より50%暗い色
color: lighten(色, 50%);
→指定した色より50%明るい色
といった感じで、CSSでは数行に渡って書かなければいけなかっり、調整がややこしかったりしたものが一発で指定できたりできます。
まとめ：Sassをマスターして、ぐっすり眠れる健康的な日々を
日々締め切りと戦いながらがんばっているWebデザイナーの方へ向けて、少しでも効率的に作業をすすめ、徹夜や深夜までの作業から開放される為のワザの１つ。
「Sass」の基本的な書き方やどんなものなのか？ということについて、入門編としてざっくりと構造や代表的な使い方をまとめてみました。
マスターすれば、本当に便利にCSSコーディングができる様になるとともに、修正や変更にも強いコーディングができる様になります。
なお、Sassを利用できる環境をつくる為には「Ruby」と「Sass」をインストール、設定する必要があります。
僕も最初はMacで使える様にする為の設定で無駄に手こずったりしました。
次回はまたその辺りについて記事にしてみたいと思います。
この記事を誰かのお助けになれば幸いです。
「Webデザインやプログラミングに興味はあるんだけど、本を読んでてもちんぷんかんぷんでできる気がしない…。」
無料体験コース開催中！オンラインプログラミングスクール「TechAcademy」
僕もそうでしたが、Webデザインやプログラミングは、最初の基礎を身につけるまでが本当に一番大変です。
ただ、キチンとした基礎を身につける事ができれば、あとは独学でも様々な言語に手を広げていく事ができます。
今の時代、YoutubeやWebに無料の有益な情報もたくさんあるので、しっかりとした目標を見定めて勉強すれば独学も不可能ではないです。
ただ、ネットは有益な情報もあれば微妙な情報も混在しているので、どうしても回り道になったり独特なやり方が身についてしまったり、といったデメリットもあります。
僕も最初は独学でプログラミングスキルを身につけようとして何度も挫折してきました。
もし独学で苦戦しているなら、最初はスクールの力を借りるのも１つの選択肢です。
「最短でプログラミングスキルを身に付けたい。」
「間違いのない、しっかりとしたプログラミングの基礎を勉強したい。」
「一緒に切磋琢磨できるプログラミング仲間が欲しい。」
「スキルを活かした場所や時間にとらわれない新しい時代の生き方をしたい。」
そういった方は、実績のあるオンラインスクールを一度無料体験してみることをオススメします。
プログラミングのオンラインスクールも探せば色々選択肢があります。
その中でも圧倒的な知名度を誇るTechAcademyは、日本e-Learning大賞プログラミング教育特別部門賞の受賞実績があり、今なら無料体験コースがあります。
無料コースを試してみてやめるもよしですし、手応えを感じれば、まずはその勢いで基礎を固める事を目指してみるのもアリです。
まずは１つの言語の基礎をしっかり身に着ける事ができれば、様々なプログラミング言語の習得の難易度も一気に下がります。
スキルは奪われないし裏切りません。
その中でもプログラミングスキルは将来に希望もあり、単純にできる様になるととっても楽しい上に、人生の助けにもなります。
登録は5分もあれば十分できます。独学で行きづまったり、モチベーションが保てず挫折した経験のある方は、とりあえずTechAcademyの無料で学習できるチャンスを活用してみることをオススメします。
無料体験コース開催中！オンラインプログラミングスクール「TechAcademy」
