どうも、ソウラボこと森田壮です。
インプレスジャパンさんから、2013年9月13日発売の
「Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語」
を執筆させていただきました。
CSS HappyLifeの平澤隆さんと共著です。
本書の内容や、見どころを紹介させていただきます。
Amazon以外(楽天ブックスなど)のリンクは本書サポートサイトにのっております!
本書の内容
はじめに
以下、本書の紹介文です。
Webサイト制作に必須のCSSを、より便利に効率的に書けるようにパワーアップさせた
「Sass」(サス)についての教科書的な解説書が登場!・Sassって聞いたことはあるけど、導入が面倒そうという方
・Sassを始めてみたいと思っているが、今一歩踏み出せない方
・勉強コストとの天秤に掛けて、Sassのメリットがイマイチ見えてこない方
・周りでSassを使い出した人がいて、焦りを感じている方
・CSSを今よりも効率的に書きたいと思っている方これらの方がSassを導入するきっかけとなり、
ひと通りSassの機能を使いこなせるようになるのが本書の目標です。Sassは、今までCSSを使っていた状況なら、数ページの小規模サイトから
、 数千ページの複数人でコーディングをするような大規模サイトまで、
あらゆるシーンでより便利に効率的に制作を進めることができます。すでに「Sass」を導入している企業や
求人情報サイトに歓迎スキルとして掲載する企業も増加しています。本書では、Sassの機能だけでなく、Sassの概要から利用環境の整え方まで 丁寧に解説しています。
また、より実践的な内容やCompassなどのフレームワークなど、
Sassを使いこなすために必要な内容を網羅しています。なお、SassはCSSを拡張した言語のため、HTML+CSSの知識が必須です。
本書では、ひと通りCSSを使ったコーディングができる方を対象としており、
HTMLやCSSに関してはほとんど説明していません。その点はご留意ください。
はい。こんな本です。
実際の本としては、国内では初のSassの書籍になったので、今までSassに触れたことない方から、Sassをもっと活用したい方までを対象にしました。
内容や章立ては、ひらさんとかなり悩みながら、より分かりやすくなるように何度も練りなおして構成したつもりです。
ただ使いかたを書いた入門書ではなく、実際の仕事にどう活かすかということを考えたつもりです。
Compassを紹介から解説にしたり、GUIを使った解説を入れたり。。
ということで、こんな目次になりました↓
目次
- 第1章 Sassのキホン
- 1-1 まずはSassって何なのかを知ろう
- 1-2 Sassを導入する前の疑問や不安
- 1-3 何はともあれSassを触ってみよう
- 第2章 Sassの利用環境を整えよう
- 2-1 Windows環境にSassをインストールする
- 2-2 Mac環境にSassをインストールする
- 2-3 Sassを最新版にアップデートしよう
- 2-4 Sassコマンドの使い方を覚えよう
- 2-5 バッチファイル/シェルスクリプトで簡単にコマンドを実行する
- 2-6 GUI(Koala)でSassを使用する
- 2-7 インストールや実行中にエラーが表示された場合の対処法
- 第3章 これだけはマスターしたいSassの基本機能
- 3-1 ルールのネスト(Nested Rules)
- 3-2 親セレクタの参照&(アンパサンド)
- 3-3 プロパティのネスト(Nested Properties)
- 3-4 Sassで使えるコメント
- 3-5 変数(Variables)
- 3-6 演算
- 3-7 Sassの@import
- 第4章 高度な機能を覚えてSassを使いこなそう
- 4-1 スタイルの継承ができる@extend
- 4-2 柔軟なスタイルの定義が可能なミックスイン(@mixin)
- 4-3 制御構文で条件分岐や繰り返し処理を行う
- 4-4 関数を使ってさまざまな処理を実行する
- 4-5 自作関数を定義する@function
- 4-6 テストやデバックで使える@debugと@warn
- 4-7 Sassのデータタイプについて
- 4-8 使いどころに合わせて補完(インターポレーション)してくれる#{}
- 4-9 変数にデフォルト値を割り当てる!default
- 第5章 現場で使える実践Sassコーディング
- 5-1 管理/運用・設計で使えるコーディングTips
- 5-2 ブラウザ対応で使えるコーディングTips
- 5-3 レイアウト・パーツで使えるコーディングTips
- 5-4 スマホ・マルチデバイスで使えるコーディングTips
- 第6章 Sassをさらに便利にするCompass
- 6-1 Compassを利用する準備
- 6-2 Compassのインポートとモジュール
- 6-3 Compassのミックスインを使う
- 6-4 Compassの設定変数を定義する
- 6-5 Compassの関数(Helpers)
- 6-6 Compassで簡単CSSスプライト(Compass Sprites)
- 6-7 高度なCSSスプライトの使用方法(Sprite Helpers)
- 第7章 もっとSassを使いこなして便利にしよう
- 7-1 Sassのフレームワーク紹介
- 7-2 Sassが使えるテキストエディタ
- 7-3 DreamweaverのSassの対応
- 7-4 SassのGUIコンパイラ
- 7-5 SassのCUIツール
- 第8章 Sass全機能リファレンス
- 8-1 Sassの基本と高度な機能
- 8-2 Sassの関数一覧
- 8-3 Sassの拡張
まずは、Sassの概要から、メリットデメリット、疑問などにお応え。
導入の章では、最初にハマりやすいインストールの箇所はWindows・Mac別で丁寧に解説し、エラーの対処方法などもできるだけ載せました。
GUIでのSassの導入方法も載せてます。本書のためにKoalaを日本語化しました。
Sassの機能解説では、Sassを使っている方は目次でお分かりになると思いますが、Sassのほぼすべての機能を網羅して解説しております。
現場で使える実践てきなコードも「管理/運用・設計」「ブラウザ対応」「レイアウト・パーツ」「スマホ・マルチデバイス」に分類し沢山載っております。目次では4項目ですが一番ページ数が多い章です。
そしてCompassの導入から使い方まで詳しく解説。
GUIコンパイラ、Sassを使えるエディタなどサードパーティのツールも解説しています。
そして、チュートリアルだけで終わりではなく、その後も本書は逆引きリファレンスとして使えるように、全機能リファレンスや関数一覧、Sassコマンドの訳なども載せています。
是非、本棚に一冊をば(・∀・)
こだわりやオススメなど
本書のコード
なるべくコードを見やすくわかりやすくなるように、フォントはDreamweaverCCでも使われているAdobe社の「Source Code Pro」を採用し、「google-code-prettify」をベースにコードをカラーリングしております。また行ごとに区切りの線が入っています。
応用になると複雑になってくるコードも、かなり見やすくなっています。
ボリューム
Sassの色々を盛り込んでいたらトータル352ページになってしまいました。
そんな分厚い本ってわけではないんですが、結構カットしたんです(ヽ´ω`)
Web系の書籍にしては結構ボリュームがある方だと思います。
しかし、フルカラーで2,940円(税込)です。お得!(・∀・)
価格はどちらかと言うと編集さんのこだわりですが、ページ数増えてしまったのにありがとうございます。
10月に発売予定の電子書籍は2,500円くらいだそうです。
サポート
本書のコードやリンクなどはサポートサイトで全て確認することができます。コードは打たなくてもコピペして試すことができます。
バッチファイルなど必要なファイルはダウンロードもできます。
情報はFaceBookページでもお知らせしますので、良かったら「いいね!」してください!
また、あまり見つかって欲しくはないですが、誤植などがあった場合もサポートサイトやFBページ、インプレスジャパンの本書ページでお知らせいたします。
Amazon以外(楽天ブックスなど)のリンクは本書サポートサイトにのっております!
あとがきとか
CSSプリプロセッサの盛り上がりてきに、今後も、Sassなどの本は出ると思います。
ひとまず一冊目の本として、少しでもSassの利用者が増えたらいいなと願います。
まだの方は、いい機会なので是非!(*´Д`)サスサス
本書では連名での謝辞だったので、この場を借りて個人的に謝辞をば。
最後までワガママに全部答えてくれたインプレスジャパン柳沼さん、入稿ギリギリまで校正に対応してくれたリブロワークスさん、翻訳やレビューなどに協力してくれたみやっちさん、CSSSの皆様、さやかさん、優さん。
そして、このようなお声がけくださったひらさんに感謝します。
まさかWebデザイナー駆け出し頃から勉強させてもらってたサイトの中の人と本を出せるとは夢のようです。
執筆中も応援や楽しみにしてると言ってくれた方、皆様に改めてお礼申し上げます。ありがとうございました!
関連リンク
- Web制作者のためのSassの教科書 – 公式サポートサイト
- 2013年9月13日発売予定の「Web制作者のためのSassの教科書」を執筆しました – CSS HappyLife
- Web制作者のためのSassの教科書|FaceBookページ