Sass – CSSを効率的に書くためメタ言語

HTMLとCSSを覚えて、もし余裕があれば、Sass（サス）にも挑戦してみましょう。現場によってはもうCSSではなく、Sassを標準として使っている場合もあります。なので、少しハイレベルなWeb制作会社に入社したければ、基礎は習得しておく必要があります。

1 Sassとは？
- 1.1 Sassの書き方
- 1.2 Sassの勉強方法
2 就職・転職前にSassをどれくらい習得しておくべきか

Sassとは？

SassはCSSをより便利にした書き方だと覚えれば大丈夫です。

Sassの書き方

.header {
 padding: 15px;
}
.header .title {
 font-size: 18px;
}
.header .text {
 font-size: 14px;
}

CSSでは、例えばheader内のタイトルとテキストに何かスタイルを適用させる場合は、このように書きますよね。

.header {
 padding: 15px;
 .title {
  font-size: 18px;
 }
 .text {
  font-size: 14px;
 }
}

一方、同じことをSassでは、このようにネスト（入れ子）にして書くことができます。書く量が減るので、開発スピードが上がります。だいぶ楽です。

他にも、変数やmixinなど、SassはCSSを快適に書くための機能が豊富なので、コーディングをより早くしたいと思っている人はぜひ導入してください。

Sassの勉強方法

よりSassを詳しく勉強したい方は、書籍では、このピンクの本『Web制作者のためのSassの教科書』が定番でおすすめです。ただ、現在はこのSassのバージョンからDart Sassに移行しておりこの本の内容は古いです。しかしSassの基本を知るには最適な一冊です。

Sassの導入方法からSass独自の機能まで詳しく解説されているので、この本を一冊やり終えれば、基本はがっつり押さえられます。

就職・転職前にSassをどれくらい習得しておくべきか

最初にも書いたとおり、Sassは現場によっては標準で使われるようになってきました。でも、新人の方はまずはHTMLとCSSをマスターすることが先決です。なので、余裕が出てきたら、Sassにもぜひトライしてみてください！

コラム：正社員のWebデザイナーを強くオススメする理由

このサイトでは、本当にWebデザインのスキルを磨きたいなら、未経験の方はまずはWeb制作会社か教育体制のしっかりしている事業会社に正社員で入社することを強くオススメしています。

やはり派遣でもなく、アルバイトでもなく、長く在籍する可能性のある正社員にこそ成長できるお仕事を振ってくれるのです。派遣やアルバイトは、リンク張り替えやテキスト修正など成長しづらい作業をやらされがちです……。

未経験OKで正社員のWebデザイナー・フロントエンドエンジニア案件を多く保有しているのが、IT系に強い『ワークポート』です。ワークポートでも、さすがに未経験の方にWeb制作会社を紹介するのは難しいですが、事業会社のWebデザイナー・フロントエンドエンジニアを紹介してもらえる可能性があります。また、Webデザイナーにこだわらなければ、WebディレクターやECサイト担当者などの求人も多数保有しているため選択肢の幅が広がります。一度面談を受けておきましょう。

Web/IT系特化の転職サイト『Green』に登録しておきましょう。Web系転職の定番サイトです。

『ワークポート』公式サイト『Green』公式サイト

コラム：デザインスキルを一気に上げる方法

「デザインスキルを一気に上げる方法は「レビュー」です。つまりデザインに対するダメ出しを何度もしてもらって直すことを繰り返すことで、デザインスキルは急激にレベルアップします！

これを一番実現しやすいのが会社です。会社なら現場で上司や先輩にサイトやバナーのデザインのレビューをしてもらえるからです。じゃあ就職しておらず未経験のうちはどうすればいいかというと、「レビュー付きのデザインスクールの活用」です。普通のスクールはPhotoshopの使い方やコーディングの基礎を学ぶだけで「デザインスキル」についてはほぼ教えてくれません。レビュー付きのデザインスクールは運営側にも高いデザインスキルが求められるため非常に少なく希少性が高く『fullme』が現在は最高峰だと僕は思っています。「けっきょく、よはく」「ほんとに、フォント」など有名デザイン書籍を手がけるingectar-eの運営です。
僕が駆け出しの頃に『fullme』があれば絶対に受講していました...。デザインスキルを高めたい人はぜひ受講しましょう。

『fullme』公式サイト

コラム：ポートフォリオのチェックリストをnoteで販売中！

Webデザイナー向けポートフォリオチェックリスト84項目。ここを直せば一気に良くなる！

「ポートフォリオを作ってみたけど不安...」「周りにレビューをしてくれる人がいない...」
そんなお悩みを解決するために、ポートフォリオのチェックリストを作りました！27,000文字以上の大ボリュームです笑。noteで販売中です。激安のワンコイン500円です。このチェックリストで改善点を見つけて、少しでもポートフォリオの質を上げて、自分が望む就職に繋げましょう！

noteの販売ページ