[サイトカスタマイズ][コードグラフィー][luxeritas] 私のCSS勉強法を公開します!

CSS

どうやってサイトを自由にカスタマイズできるようになったの?

どうやってCSSで絵を描けるようになったの?

そんな疑問に答えます!

記事は長いですが、その分自分の勉強法やモチベーション維持法を全部公開しています。気になるところだけ拾い読みでもOKです!

 

はじめに

私はHTML&CSS、JavaScriptのコーディングを全て独学で勉強しています。

今回は特にCSSの学習法、中でも初心者の方が、CSSを使って好きな形を作れたりサイトカスタマイズができるようになるまでの方法を解説していきます。←ここまで到達する前に挫折してしまう人も多い(体感)ので、初心者の方のモチベーションUPになったら良いなと思って記事を書いています!

 

読んで欲しい人

  • HTML&CSSをこれから始める人、始めたばかりの人
  • サイトカスタマイズのためのCSSを学びたい人
  • HTML&CSSに挫折しそうor挫折したけどまた始めたい人
  • CodePenで作品を作ってみたい人
  • お金も時間も効率的にHTML&CSSを学びたい初心者の人

それでは早速みていきましょう!

勉強法

最初にHTML&CSSを始めたのが2019年の1月か2月くらい。毎日必ず続けてきた訳ではなく、「数日頑張る🔁数日休む」の繰り返しで徐々にコーディング力を伸ばしてきました。この経験から1番伝えたいのは「習得には時間がかかる&継続が大事」ということです。

私がやっている勉強方法

  1. プログラミング学習サイトで雰囲気を掴む
  2. 本で理解を深める&本の課題を実践&分からないことがあれば本で確認
  3. 1~2を繰り返す
  4. 自分で課題を決めて、何か作ってみる
  5. 分からないことが出てきたら、本やサイトで確認
  6. 文章だけでは分かりにくい時は、YouTubeの動画でコードの書き方を確認
  7. 3~5を繰り返す

この方法が最も効率&モチベーションが維持しやすいです。

ポイントは

  1. プログラミング入門サイトと本を使い分ける
  2. 調べ物は本とサイトを使い分ける
  3. 理解🔁実践の繰り返し

です。特に3つ目の「理解🔁実践の繰り返し」は重要なので、是非いろんなものを作って調べてCSS力を伸ばしていってください。

プログラミング入門サイト

プログラミング入門サイトを使うメリットは、これから学習を始める言語がどんな書き方をするのかどんなことができるようになるのかの雰囲気を掴む上で効率が良いことです。

本を読んでいるだけだとイメージが湧きづらいので、

プログラミングサイトで感覚を掴む→本で復習

の流れが1番分かりやすいと思います。

ある程度までは無料で学習できるものも多いので、まずはどんなものがあるのかをみていきましょう。

Progate

今ではかなり有名なので既に知っている方も多いかもしれませんが、progateというプログラミング学習サイトがあります。感覚を掴むために、これのHTML&CSS無料コースは全て終わらせてみることをおすすめします。

また、豆知識ですが開発元は英単語アプリmikanと一緒です🍊なのでキャラクターがすごくかわいい😄

上級になってくると有料になりますが、HTML&CSSの雰囲気を掴むなら無料の分を全部やるだけでも、何となく感覚は分かってくるかと思います。

 

有料コースを申し込む場合の注意点

有料コースに契約する際の注意点、それは絶対に期間を決めた方が良いということです。これは運営やシステムが〜という話ではなく、単純にモチベーションの問題です。

「いつでも出来る」と思うとかえってなかなかやらなくなってしまうので、3ヶ月間だけ、などと先に期限を決め、その中で1つの言語を勉強する、新しい言語を勉強したくなったらその都度契約する、という風にした方が集中力・モチベーションも維持できて、お金も無駄にならないと思います!

私は今後Sassをやろうかなと思っていますが、その時は1ヶ月だけに期間を決めてやろうと思っています。

 

参考:TechAcademy

私はProgateを使っていましたが、絵が多い、子どもっぽい、と感じる方もいるかもしれません。その場合はTechAcademy 無料体験という選択肢もあります。1週間の無料体験が出来るので、気になる方はこちらもチェックしてみてください。

参考:Codecademy

昔からあるサイトです。海外のサイトなので英語ですが、無料で学習できる範囲が広いのがメリットです。私がやった方法ですが、Progateの無料コースを1周してからこちらに取り組めば、内容も入ってきやすいかと思います。

 

こんなことを言ったら営業妨害になってしまいますが、HTML&CSSを勉強する上では上記のサイトの無料の分を全てやれば、とりあえず「何も分からない状態」からは脱出できると思います。

というか、HTML&CSSは無料コースで感覚を掴んで、上級編の言語を勉強したくなったときのためにお金をセーブしておくので良いと思います。前述の通り私は、CSS上級編のSassという言語をいずれマスターしたいのですが、情報や教材が少ないので、その際はProgateの有料コースを受講してみようと思っています!

どのサイトを使うにしても、もし、課金する場合は期間を決めてやる方が集中して取り組めるので成果に繋がりやすいと思います。

使用した書籍

本で勉強するメリットは、完成形が見えやすい辞書的に使うことができることです。

入門サイトだけを使っていると、終わりが見えづらくてキリがないと感じることがあります。一方、最終章のページを眺めて「こんなものを作れるようになるのかー」と思えるのが本の良いところです。目次や索引で、見たい部分をパッと探せたり、パラパラ戻って確認したりが容易なこともメリットの1つです。

また、本にも載っていますが、ディベロッパーツールの使い方は知っておくと絶対役に立ちます。知ってしまえばそんなに難しくはないので、どこかのタイミングで習得することをおすすめします💡

そして、私が実際に使って勉強したCSSの書籍はこの2つです。

 

①現場で使える最低限の知識がしっかりと身につく HTML/CSS デザイン TextBook

基礎力高めかつ内容の濃い入門書です。私が1番最初に買ったのがこれ。

サイト製作など実践的な部分にももちろん使えますが、HTML&CSSの本質的な部分を理解する上でかなり役立ちます。初心者が内容を全部理解するのは少しchallengingかもしれませんが、その分各セクションの細かい部分までを網羅しているので将来的にかなり役立ちます。

今でも分からないことに出会ったときに調べる、辞書的な役割として使っています。入門書ではありますが内容が濃く、脱初心者後も長く使える1冊だと思います。

 

②本当によくわかるHTML&CSSの教科書 シンプルで、デザインの良いサイトが必ず作れる

実践力高めの入門書です。1冊目の本(上)がちょっと難しかったので書いました😅

本を購入後、専用サイトから実際にコードを書いて使えるサンプルファイルをダウンロードして使うことができます。このサンプルファイル中の課題が実践的かつとても分かりやすいです。1冊やれば絶対に基礎を身に付けられると自信を持って宣言します。

参考:JavaScriptもやりたいなと考えている人へ

本当によくわかるJavaScriptの教科書 はじめての人も、挫折した人も、基礎力が必ず身に付く

Twitterで見覚えがある方もいるかもしれません笑

上のシリーズのJavaScript版です。こちらも実戦問題がすごく分かりやすいのでおすすめです。

よく参考にしているサイト

サルワカ

1番初心者に優しく、分かりやすいサイトだと思います。基礎を学びたい方は必須。

初心者の疑問は全て解決できると言っても過言ではないので、駆け出しのCSS使いのみなさんには絶対に見て欲しいです。いや、初心者じゃなくても見てください。とにかくサイトのクオリティが素晴らしいから!

コリス coliss

上のサイトより少し上級者向きです。というかプロの人でもかなり参考になるレベルの内容を分かりやすく解説してくれています。すごい!更新頻度も高く、トレンドを意識した内容も多いです。

HTMLクイックリファレンス

分からないことがあったときに辞書的に使用しています。

知りたいキーワード(例:justify-content など)を右上のサイト内検索ボックスに入力すると、知りたい内容を簡潔に解説してくれるのでとても便利です。

HTML&CSSを使う方は全員、ブックマークしておくことをおすすめします。

HTMLクイックリファレンス

CSS Tricks

ニッチな技術的なことが載っているので、主にコードグラフィーを書く際の参考に重宝しています。海外サイトですが、とても分かりやすいです。

「英語が苦手」と感じる方も、基礎的なコードの知識があれば理解できます。逆にコーディング超初心者の方でも、ある程度の英語が読めたら理解できると思います。「興味はあるけどどっちも初心者!」という方も、CSSの基本的な内容を理解してから挑めば大丈夫なので安心してください!

W3Schools

クイックリファレンスの英語版、コーディングの英語辞書です。

解説を見た後に「Try it Yourself」をクリックするとその場で編集・確認をすることができるので便利です。

こちらもブックマークをおすすめします。

行き詰まったときに参照するYouTubeチャンネル

動画を参照するメリットは自分が行き詰まったとき、実際にコードを書くのが解説付きで見られることです。

逆に、「毎日動画を見る!」とかにしてしまうとなかなか続かないので、調べ物の一部として動画を活用するというのが1番効果的だと思います。

Kevin Powell

Really fun CSS hover effects

CSSのレクチャー動画として1番分かりやすいです。動画の数も多いので、解決の手引きとなるものがきっと見つかると思います。

しまぶーのIT大学

【CSS #1】基礎からちゃんと学ぶ CSS 入門!基本構文を抑えよう!【ヤフー出身エンジニアが教える初心者向けプログラミング講座】

こちらは日本語&順番・構成がかなりしっかりしているので、CSS超初心者の方にもとても分かりやすいと思います。

モチベーションを維持するコツ

モチベーションを維持するコツは2段階あります。

  1. 小さな成長を喜べる
  2. 自分の作ったものを発信する

です!

「プログラミング」っていうとカッコよく聞こえますが、地道な積み重ねが多いです。なので最初のうちはいきなり高すぎる目標を掲げないこと、小さな成長(色が変わったとか)を喜べることが大切です。

あと、よく「HTML&CSSは簡単」って言われますが普通に難しいです。確かに他の言語と比べたら分かりやすいという意味で「簡単」なのかもしれませんが、まっさらな状態から始める人からしたら「は???」ってことも多いし、もう一度言います、普通に難しいです。

なので「こんなことでつまづいて…」とかは本当に思う必要ありません。

そしてある程度、できるようになってきたら自分の作品を発信していくのもモチベーション&技術向上に効果があります。私もCodePenで作品を公開しているので、よかったら見てみてください。

最後に

以上!

HTML&CSSの勉強方法まとめでした!

参考になったら幸いです!

全力で応援しているし質問も歓迎です!

楽しく学習していきましょう!

コメント

タイトルとURLをコピーしました