この記事ではCSSを理解するためのWebサービスとおすすめの書籍を紹介します。
基本的には手を動かして体験しまくって、自分の頭でイメージできるようになって身につくものだと思います。
CSSの基礎は無料Webサービスのドットインストールを何周もすれば十分かと個人的には思います。その上で、より実践的にどうやってCSSを使うかっていう部分をこの記事で紹介している書籍で補うイメージでいてもらえたらと思います！
CSSを理解するためのWebサービス
CSSの基礎は無料の教材として網羅されている時代です。書籍を買うよりもまずはインターネットの無料サービスをやってみることをおすすめします。
ドットインストール
個人的に一番やったのはドットインストールという動画でCSSが学べるWebサービスです。
3分という区切りの動画でダラダラとした部分がなくサクッと大事な部分だけ学ぶことができます。動画を眺めるだけでも勉強になるので、通勤の電車の中で復習できたりして、過去のわたしはとにかく暇があればドットインストールを見まくってました。
ただ、動画とはいえ手を動かして実際に自分の環境で動作を確認してはじめて身につくものだと思います。動画の内容の一言一句を真似するくらいの勢いでやってみることをおすすめします！
ドットインストールの以下の2つが基礎的な部分かと思いますので、ぜひやってみてください。
Progate
→ プログラミングの入門なら基礎から学べるProgate[プロゲート]
Progate（プロゲート）も最近の知名度でいうとドットインストール以上の人気なWeb学習サービスです。こちらは、（部分的にですが）実際に手を動かしながら進めているスタイルです。難易度もちょうどいい印象で、なによりもクリアしてレベルが上がっていくので達成感がありますね。
HTML、CSS講座の途中までは無料でできるので、ちょっと試してみて合いそうなら課金を検討してみるといいかと思います。
CSSを理解するためのおすすめの本
続いていはCSSを理解するためのおすすめの本を目的別に紹介していこうと思います。
以下で紹介する本はどれもが先ほど紹介したWebサービスを終えている前提となります。まだやっていない方は先に無料のWebサービスから取り組んでみてください（わたしの好きな言葉「まず隗より始めよ」の精神です！）
CSS関連の本はいくつか読んできましたが、今の自分の土台となり今の仕事にも役に立っていると感じる本だけを選びました。
レスポンシブなCSSを理解するための本
パーツで分ける概念や、レスポンシブでコーディングするときのCSSの書き方、さらにはBootstrapの基本的なところまでが学べる超良書です。今風のコーディングが身につきます。
ちょっと古い本なのでfloatがベースになっているのが、今から学ぶ人にとっては残念ポイントかもしれません。今だとflexですからね…
ただ、横並び以外は色褪せることはなく、読んでおいて損はない1冊です。わたしが「HTMLとCSSの土台となった本はどれ？」と聞かれたらいつも即答している1冊です。
実務レベルで使えるCSSを覚えるための本
CSSの各プロパティの使い方ではなく、
- CSSファイルを管理の方法
- クラス名やid名の決め方（ルール）
- 管理しやすいCSS、破綻しにくいCSSって何？
といったCSSを管理する上での考え方（哲学みたいなもの）のいくつかの代表的なフォーマットが学べます。Web制作会社によっては、「今回は〇〇の方式を採用してCSSを作る」みたいなところもあるかもしれません。
わたしは特にどれを採用しているということはありませんが、CSS設計の考え方を学んだことで、少なくとも以前に比べたら格段に管理しやすいCSSで作ることができるようになっています。
CSS設計については2冊読みました。どちらも甲乙つけがたいくらい良書でした（ただし、内容は似ているのでどちらか1冊でいいかもしれません）
そして、CSS設計と結びつきの強い、Sassについて学ぶとより一層理解できると思います。作業スピードも格段にアップすると思いますので、余裕がある方はご一緒に！
（そもそも上記のCSS設計の本がSassを前提に書かれていいたりします…）
CSSをもうちょっと深く知るための本
HTMLやCSSはW3Cで仕様が決められているのですが、その中の人であるLea Verouさんが書いた本です。説得力といいますか権威性が半端ないですね。
序盤はめちゃくちゃ実践的に使えるCSSのテクニックが詰まっていました。後半の背景とかアニメーションはちょっと自分には付いていくのが辛かったですが…笑
ここに書かれているテクニックは、実際に自分でも試しながら、ついでにWebパーツ屋でまとめたりしていました。
基礎が一通り理解できて、まあまあ扱えるって方は、この本を読めば新たな発見があるかもしれません。
（余談ですが、オライリーが出しているとは思えない紙質でした）
プロパティの辞書的な本
辞書的な本が1冊あれば、知らないプロパティが出てきたときにもサクッと確認することができるので助かります。パラパラっと眺めるだけでも知らないプロパティ結構あるなぁ、、と思い知らされるかもしれません。
ここに書かれているHTMLタグやCSSプロパティは何も見ずともパパっと書けるようになったら気持ちいいだろうなって思います。
CSSを理解するコツ
本を読めば理解できると思いますが、結局は机上の空論です。実際に自分で手を動かして動作を自分の目で確認することによって身につくと思っています。
ドットインストールにしても書籍にしても、見るだけでなく実際に自分の環境でコーディングしてみて表示を確認してみてください！
違うプロパティも試してみる
CSSのプロパティには複数の選択肢があります。
例えば、text-alignだったら、
centerleftrightjustify
の4つがあります。
それぞれの動きが把握できていれば、それが自分でコーディングできる幅となります。基本的なCSSでの作り方が理解できたら、積極的に触ったことのないプロパティや別の値を確認してみることをおすすめします！
（とか言いつつ、わたしもあまり見れていない）
ついでにブログとかでまとめると理解も深まるかもしれません。以下の記事はtransitionを勉強しながらまとめた例です。
問題が起きたらググる
例えば、「変な余白ができる」とか「上下の中央にならない」など初心者特有のつまずきポイントがあります。
こういうのは自分よりも前に何百人と経験してきたことで、解決策はほぼ確実にネット上に見つかります。
検索結果に出てきたことを上から順番に試していけば、おそらく解決することでしょう。そして、解決したらメモとして残しておきましょう。「〇〇の事象は△△で解決した」、みたいに。
結局は同じような事象は何度も起こります。1度で完璧に理解できるなんてことはほぼありません。過去に困って解決したことは、自分用に参照できるように手元にまとめておくと未来の自分が楽できます。
おわり
CSSを理解するためのWebサービス2つとおすすめ書籍を5冊でした。
CSSの設計以外は、とにかくストロングスタイルで手を動かしまくることが上達のコツだとわたしは思っています。
Webサービスを使うにしても、本で勉強するにしても、実際に自分の環境で勉強することを前提に進めてみてください！最初の頃はつまずくことも多いかもしれませんが、その経験の1つ1つが土台となって安定したスキルとなっていくはずです。
