私が全くHTML・CSSの知識がなかった時に行なっていた自己流の勉強法をご紹介いたします。
職業としてやっていけるだけのスキルは身についたのでご参考にしていただければ幸いです。完全に自己流の勉強方法なので、合う合わないがあると思います。あくまでもご参考程度にしていたただければ嬉しいです。
「どうやって勉強したらいいの！」とお困りの方のお役に立てればと思います。
目次
勉強の流れ
まずは、勉強の流れを簡単にご説明します。
こんな感じで勉強を進めていけば、実際に職業としてやっていけるだけのスキルは身についていると思います。
それでは、それぞれの流れをより詳しく見ていきましょう！
学習サイトでHTML・CSSの基礎を学ぶ
「よし、HTML・CSSの勉強をしよう！」と勉強を始めようとしても、実際何からどうやって手をつけていけばいいのか分からないと思います。
勢いで学習本を買っても、よっぽどストイックな人でない限り、長続きせずに途中で挫折してしまうと思います。
私も「やるぞ！」と勢いで学習本を買い、勉強を始めたのですが、3日坊主で終わってしまいました…。
ある程度、HTML・CSSの理解ができるようになると学習本の理解度や学習スピードも上がるので、まずは、HTML・CSSの基本を身につけていきましょう。
基本を身につけるには、学習サイトで学ぶのが一番手っ取り早いです！
学習サイトの中でも、おすすめは「Progate(プロゲート)」という学習サイトです。
参考
progate(プロゲート)https://prog-8.com/
パソコンさえあれば、学ぶことができるので何も準備が必要ありません！
詳しくは、別の記事で紹介しているので、そちらの方もチェックしてみてください。
独学でHTMLの勉強するなら「progate(プロゲート)」がおすすめ
学習本でより実践的なHTML・CSSの使い方を学ぶ
基本を学習サイトで学ぶことができたら、より実践的な使い方を学んでいきましょう。
学習本でおすすめの本はこれです！
この学習本は、より実践的なHTML・CSSの使い方が書かれています。「こういうことが実現できないかなぁ…。」なんて疑問も大抵のことは書かれているので、HTML・CSSの辞書的な意味合いで一冊、手元にあるとかなり便利です。
私も職場に置いてあり、「あれってどうやってやるんだっけな。」っていう時には必ず利用しています！
勉強のコツは「やったことがある」が大事
私は職業としてHTML・CSSを使ってはいるものの全てのHTML・CSSの使い方を記憶している訳ではありません。
全て記憶できれば、作業効率も格段に上がるとは思いますが、そんなこと凡人な私には出来ませんでした..。しかし、職業としてやっていけるだけのスキルが身についたポイントは「やったことがある」という経験が必要になってきます。
例えば、右上に画像を表示させたいっていう場面では、そもそもそれが出来るのか出来ないのかという判断をしなくてはなりません。やり方は分からなくても問題ないです。
過去にやったことがあれば、出来るという判断ができるのです。
やり方は、ネットや本で調べれば出てくるので、完全に記憶している必要がないのです！
まずは「やったことがある」という経験を積み上げていくのがHTML・CSSの勉強のコツになっています。
その流れで、次の勉強方法がかなりおすすめです。
ひたすらHTML・CSSを書く
ひたすらHTML・CSSを書くって根性論かよ！って思われたかもしれません。でも、HTML・CSSは書かなきゃ覚えていかないんですよ…。
だけど、辛い、めんどくさい、量より質と思っている私でも問題なく勉強できた勉強法があります。
それが、「丸パクリ法」です。
丸パクリ法
- まずは目標とするサイトを見つけてください。
- 検証ツールでソースを確認します。
- エディターで全く同じ通りに書いていきます。
詳しくみていきましょう！
目標とするサイトを見つける
勉強しようと思っている方の多くは、いずれこんなサイトを作ってみたいなっていう理想のサイトがすでにあるんじゃないでしょうか。なければ、目標とするサイトを見つけてみてください。
あまりにもアニメーションが豊富なサイトはできるだけ控えてください！挫折してしまいます。
検証ツールでソースを確認
HTMLやCSSで書かれている内容は全てブラウザで確認することができます。
ブラウザの機能である「検証ツール」というものを利用しましょう。
Chromeだとサイト内で右クリックを押して「検証」という項目を選択すると表示されます。InternetExplorerだとサイト内で右クリックを押して「開発者ツール」という項目を選択すると表示されます。
詳しい使い方は、調べていただくと助かります。
エディターで全く同じ通りに書く
検証ツールで表示されたソースコードを全く同じようにエディターで書いていきましょう。
分からないタグやスタイルがあれば、都度調べて、どういった変化をしているのかに注目してみます。見た目部分だけであれば、HTML・CSSでほとんど書かれているので勉強するには十分です。例外としてJavascript(プログラミング言語)などでスタイルの調整を行われていたりすることもありますが、とりあえず無視しましょう！
HTML・CSSの勉強を進めていけば、必ずJavascriptなどの言語を学ぶ機会が出てくるので、それまではHTML・CSS以外の言語でなんかやってるなっていうのが分かるようになるのがベストです。
一つのサイトを丸々パクり終えているころには、ある程度HTMLやCSSが身についているのではないでしょうか。
実際にブログ・ホームページを立ち上げてみる
レンタルサーバーなどを使って、実際にブログやホームページを立ち上げてみましょう。
勉強をして身につけたHTML・CSSの知識を実際の場でどのように使われているのか勉強することができます。ブログやホームページには大抵がCMSというシステムが組み込まれています。
CMSというシステムは多くの企業や団体で取り入れられていますので、勉強しておいて損はありません。
WordPressというCMSが一番最初に始めるCMSとしては手頃です。利用者が多いので大抵の疑問はネット上で解決されています！その分、セキュリティが云々といった問題はありますが…。それはまた別の話ということで。
ブログやホームページの仕組みを勉強するのには十分なCMSだと思います。今まで勉強したHTML・CSSが実際にどうやって使われているのか、肌で実感してみてください。
最後に
以上がおすすめする勉強法になります。完全な自己流になるので参考程度に自分なりの勉強法を編み出してみてください！
もう一度流れを簡単に見直してみましょう。
- 勉強のコツは「やったことがある」
- 丸パクリ法
私の場合は、諸事情もあり時間のない中での勉強となってしまったので、もう少し余裕があっても良かったかもしれません。
例えば、プログラミングスクールに通ってしっかりと基礎を身につけた上での実践なんていう方法も全然ありだと思います！
何をやるにしても長続きしない私でも身につけることができたので、皆さんならもっと早く習得もできることでしょう。勉強の方法や、何からやればいいのか分からない方のご参考になれば幸いです。
皆さんなりの勉強法で楽しんで勉強してみてください！応援しています。
