CSSで挫折しない勉強方法を考えてみた

こんにちは朱夏です。

今回は、CSSで挫折しない勉強方法について考えてみました。

朱夏

CSSでスタイルを別のところに書くと、どこにスタイルが当たっているのかイメージできない。

プロパティの種類が多すぎて覚えられない。

数年前、私が挫折した時に思っていた事です。
その経験を振り返って、私なりにCSSで挫折しない勉強方法をまとめてみました。

それではいってみましょう。

[もくじ]
勉強方法を3ステップで紹介
1.覚える事を一つに絞る
2.解らないことを具体的にする
3.一度ぶっ壊す
学習に使えるおすすめツール
あとがき

勉強方法を3ステップで紹介

初めに、私が実践した勉強方法を3ステップで紹介したいと思います。

覚える事を1つに絞る
解らないことを具体的にする
一度ぶっ壊す

次の項から順番に解説していきます。

1.覚える事を一つに絞る

1つ目は、覚える事を一つに絞る事です。
CSSに限らず、プログラミング学習をしていく場合ほとんどがそうだと思いますが、一気に色々詰め込むより、一歩一歩継続して積み上げていくことが大事だと思います。

何故かというと、一気に詰め込んだ事は、その分記憶から消えていくのも早いからです。
更に、一気に色々覚えようとすると、1つ1つのポイントに対する理解が浅くなってしまうというのもあります。

私の場合、挫折した時は一週間ほどでフォントのサイズや色の変更などのプロパティを覚えて、調子に乗っていきなりマウスホバーのアニメーションを付けようとして失敗しました。

今思えば、フォントサイズ一つとっても相対指定と絶対指定の違いも理解していなかったし、色の指定方法も複数ある事を知らなかったりと、1つ1つの理解も浅い状態でした。

今では基本的なサイズや配色で困る事はほとんどなくなりました。

2.解らないことを具体的にする

2つ目は、解らないことを具体的にすることです。

挫折する時って、「何が解らないかも解らない」といった八方塞がりな状態になっていることが多いと感じます。

私の時もなんだか良く解らないといった気持になり、「自分には無理なんだ」と諦めてしまった記憶があります。

これに対して思うのは、全体を漠然と見て良く解らないから拒否反応を起こしていたんじゃないかということです。
確かにホバーアニメーションなどのCSSを見ると行数も多くなるし、スタイルの指定も複雑になっていきます。

そうなってしまうと解らない事だらけで半ばパニックですよね。

そこで、「解らないことを具体的にする」方法を紹介します。

1行ずつ確認する

これだけです。

もっと言うと、1つのプロパティに書かれている値１つ１つを確認すると良いです。
具体的に言うと、私は以下の手順を使っています。

CSSを1行ずつ確認
解らない行をピックアップ
「CSS “解らない部分のキーワード”」でググる
理解したら次の行
各行の役割を確認する

こんな感じです。
ここでも、1つ目の覚える事を一つに絞る事が基本になっています。

漠然と見ていると絶望しかないですが、最初の一行だけなら何とかなりそうじゃないですか？
そうやって1つずつ攻略して気が付いたら、ホバーアニメーションの仕組み全体を理解できるようになっていました。

3.一度ぶっ壊す

言葉通りです。
CSSを学習する上で、一番効果的に理解を深める事が出来る方法だと思っています。

何故なら、目に見えて変化を体験できるからです。

例えば、ここまで例に挙げていたホバーアニメーションで説明してみたおと思います。

先ずはサンプルを見てください。

See the Pen
vYNBEEP by 朱夏 (@syunatsu1)
on CodePen.

水色の四角にマウスを乗せると、回転しながら赤い丸に変化するアニメーションです。

この中で、「transition」がどんなプロパティなのか解っていなかったとします。
そうしたら、私が試すことはだいたいこんな感じです。

コメントアウトしてみる
数値をめっちゃ増やす（減らす）
数値を0にする

それぞれ試してみた結果を表示してみます。

See the Pen
RwWbNjb by 朱夏 (@syunatsu1)
on CodePen.

結果はこんな感じになりました。
ここまでできると、色々と考えられると思います。

朱夏

じゃあ、0.1sにしたらどうなるのかな？

「transition」にはほかに設定できる値が無いかググってみよう。

こうやって自分で調べて、実際に体験していくと、どのくらいいじるとどんな変化をするのか感覚で解るようになってきます。

学習に使えるおすすめツール

今回の学習方法に向いているおすすめツールを2つ紹介しておきます。
どちらも無料で使えるので、試してみてください。

codepen

オンラインでコードを公開できるwebサービスです。
お勧めする理由は、実行結果がリアルタイムで表示されるところです。
ここで学習したいサンプルコードを貼り付けて、色々ぶっ壊して変化を確認してみると、すぐにどこをいじればどうなるのか理解できるようになれます。

Visual Studio Code

現状webコーディングではこれ一択と言われるほど有名なエディターですね。
こちらをお勧めする理由は、強力なサジェスト機能です。
CSSで言えばプロパティ入力時に頭文字で候補が出てくる、そこから選択すればコロンやセミコロンまで自動で入力されて、値を入力する部分にカーソルが自動で移動するところまでやってくれます。

中には、「こんなのに頼っていたら学習にならない」と言う人がいるかもしれません。
しかし、私は学習時から使用しても問題ないと思っています。

理由は２つあります。

1. 本質的に学ぶべき部分はコードのスペルではない
2. 実務ではほぼ間違いなくVisual Studio Codeを使用する

仕事で使うことになるエディタなら、学習時点から使用していても問題ないはず。
むしろ、Visual Studio Codeを使いこなせるようになる分有利ではないかと思います。

更に言えば、この先の未来を考えても、Visual Studio Codeより性能の低いエディタを使ってwebコーディングをすることがあるんでしょうか・・・？
もちろん、覚えていないよりは覚えていた方が良いでしょう。
しかし、そこを頭に詰め込んでキャパオーバーして挫折するくらいなら、ツールに頼った方が良いと私は考えます。