/*Font Awesome*/ /*Prism.js*/

必要なのはモチベーションだけ!¥0でCSSを学習する方法!

私はゆる〜く独学でCSSを勉強しています。最近、その気になれば¥0でもCSSを勉強するノウハウも溜まってきたのでシェアします!

0からCSSを学べるサイト

ここでは0からCSSを学べるサイトを紹介します。WebサイトでCSSを学習するメリットは、PCひとつで出来ること、無料で出来ることです。

サルワカ

これはマジな0の状態からCSSを学ぶことができます。

「CSSで何ができるの?」「コードってどこに書くの?」「CSSをどうやってHTMLに読み込ませるの?」という次元の話から、どこよりも丁寧に分かりやすく解説してくれます。Webサイトの仕組みからSEO対策まで、ステップを追って書かれているので、基礎を理解する上でかなり有用性が高いです。

W3School

英語のサイトですが、CSSを基礎から上級の内容まで、幅広く学ぶことができます。

かなりのボリュームなので全部やるのは大変かもしれませんが、気になるところだけ拾い学習でも徐々に実力はついていくと思います!

読んで学習がメインですが、「Try it yourself」のボタンがあるところは自分で編集することも可能です。

コードを書きながら学べるサイト

実際に、画面上でコードを編集しながら学ぶスタイルのサイトを紹介します。この方法の良いところは、感覚を掴みやすいことと、レベルが表示されるのでステップアップを実感しやすいことです。レベルが上がると一部有料になりますが、基本的には無料でできます。

Progate

2015年にリリースされた日本のサービスです。かわいいしSNSと連動も出来るので、モチベーションを維持しやすいかも!

Codecademy

CodePenと似ていますが、全文英語で、その分取り扱っている範囲が広いです。

動画で学べるサイト

見当がついた方もいるかもしれませんが…そう、YouTubeです!!!

おすすめチャンネルを数本紹介しますね!

しまぶーのIT大学

コンテンツも多く、初心者にとても分かりやすく解説してくれています。

CSSだけでなくJavaScriptもあるのでぜひ!

LearnWebCode

結構前の動画ではありますが、こちらも完全初心者に優しい!上級編になるとレスポンシブデザインの動画とかもあってすごく勉強になります。

英語のチャンネルですが、一時停止しながらでも書いてあるコードが分かればなんとなく理解できると思うし、いざとなれば自動字幕もあるので是非!

Dev Ed

上の2つの動画に比べるともう少し基礎を知っている人向けかなって感じですが、すごく勉強になるし反応がとても良いし面白いし一押しです😄「Hello my gorgeous friends!」って言われるのも嬉しい😄

Kevin Powell

初心者向けと言うより、基礎を理解してからのCSSをより良く使う方法のチャンネルなのですが、テンポが良くて見やすい上にデザイン系も多くてこちらも一押しです。

アウトプットにおすすめなサイト

CodePen

モチベーション維持には、出来るようになったことのアウトプットが重要です。

私が使っているCodePenも、無料で使えてコーディングのSNS的に使用することができます。

お金をかけるなら:スクールより本がおすすめ

もし、CSSをこれから始める、全くの初心者がお金をかけるなら、プログラミングスクールより本がおすすめです。

なぜなら挫折した時の精神ダメージが少ない上に再開しやすい結果的に続けやすいからです。

「始める前から挫折した時のこと言う?は?」って思う方もいるかもしれませんが、飽きた・思ってたのと違う(やっぱり向いてない、つまらなかった)とかそういうのも含みます。

なのでCSSがどんなものか既に分かっていて、本腰を据えて学びたいと考えている方はTechAcademy 無料体験という選択肢もあるので、気になる人はチェックしてみてください!

話を戻すと、なぜスクールより本がおすすめかというと

  • 自分のペースで出来る
  • 周りの人・生徒と比較せず出来る
  • スクールよりコストが低いので、「やっぱり辞める」という選択をしても損失感が少ない
  • 挫折しても再開しやすい(スクールは退会したら終わりだけど本は手元に残るので)

といった理由からです。特に最後の理由は大事で、「頑張る⇄休む」の繰り返しで少しずつCSS力を上げていくのもすごく良い方法だと思います。

参考までに私が持っている2冊を紹介しますね。

HTML/CSSデザインTextBook

最初に買ったのがこちら。HTML/CSSの知識をかなり深いところまで1冊にまとめてあります。今でも、分からないことがあったら辞書代わりに使っています。

少し難しい部分もありますが、そのぶん付け焼き刃的にならない知識が得られます。

長期的にHTMLやCSSを理解し、応用していくにはかなり心強いと思っています。

本当によくわかるHTML&CSSの教科書

かなり初心者に優しいです!私の感覚では「読んでも何をいっているのか分からない」ということはありませんでした。専用のファイルをダウンロードし、例題を解きながら読み進めていく感じです。CSSの概要を掴むのにとても役立つと思います。

同じシリーズにJavaScriptもあって、そっちもすごく良いです。

おまけ:私のCSS学習法

CSSゼロコスト勉強法についていろいろ述べてきましたが、色々調べて分かった今だから言える話で、私が実際にやってきた勉強法とは微妙に違うところがあります。

こちらの記事では、私が実際にやってきた勉強法をまとめたので、よかったら合わせてお読みください!