私はプログラミングの勉強を始めるとき、エクセルマクロとHTML＆CSSを勉強しました。HTMLとCSSは厳密にいうとプログラミング言語とは言えないのですが、WEBを作成するなら必須となる言語です。
今回は、プログラミング初心者が HTML＆CSSを学ぶ方法を私の体験に基づき、具体的にお話いたします。
初学者にはプロゲートがおすすめ
プロゲートとは
初学者向けのプログラミング学習サイトで、PC・スマホ両方で勉強できます。HTML＆CSSのほかに、JavaScript、jQuery、Ruby、Java、PHP、Python、Swiftの講座があります。
プロゲートを始めた理由
実際に手を動かしてコーディングできる
HTML＆CSSは初学者用の書籍や学習サイトもたくさんあります。その中で私は、実際にコーディングできるアプリ等を探していました。
プロゲートは実際にエディタにコードを書くと、どのように画面に反映されるかを表示した上で、正解か不正解かを判定されるようなシステムになっています。
ネット上での評判が良かった
とにかく、ネット上の評判が良かったです。
「プログラミング 初心者 学習」などで検索して、いくつか紹介ブログ等を読んでも、おすすめサイトの最初に「Progate」と書いてあるものばかりでした。
イラストがかわいい
実際にHPを見てみると、絵もかわいくデザインも最新な感じで、すごく好感が持てます。
実際使ってみてよかった点
無料の講座で１～2講座ずつお試しできる
例えばHTML＆CSSなら次のようになっています。
※「道場」編は、練習問題です。
| 無料会員 | 有料会員 | |
| 初級編 学習 | 〇 | 〇 |
| 初級編 道場 | 〇 | |
| 中級編 学習 | 〇 | |
| 中級編 道場 | 〇 | |
| 上級編 学習 | 〇 | |
| 上級編 道場 | 〇 |
無料で初級編全部見れるなんてありがたいです。（PC・スマホ両方）実際やってみると、私は迷わず有料でやりたくなりました！
ちなみに有料会員になると、ほかのプログラミング言語の講座も含めすべて見放題です。
有料でも月980円で使い放題、月ごとの解約が可能
上記のように、全部の講座が1か月使いたい放題で980円って安いと思います。プログラミングの本て1冊1000円じゃなかなか買えないですから・・・
私の場合はちょうど転職時の1か月休暇のときに受講したため、元は十二分に取れました！
あと、次月からの解約もすぐ、簡単にできるのが良心的です。
スマホでも勉強できる
スマホでプログラミングってどうやるの？と思いますよね。ここがすごく工夫されている点です。
PCサイトのようにすべてのコードをエディタで直接入力するのではなく、ある程度の単語が固まりになっていて、それを並べ替える形で練習できます。
もちろん、並べ替えるだけでは本当の力はつかないのですが、PCサイトと並行して使うと、予習や復習には最適です。スマホだとどこでもできるのでとても便利でした。
勉強の進捗管理ができる
プロゲートは無料でも会員登録が必要ですが、なんと無料でもマイページがあるんです。
マイページで、今の自分の学習進捗とか、これまでの学習実績がわかるので、モチベーションの維持もしやすいです。自分で計画表を作ったりする必要もありませ。
有料には実践編もある
上記でも書きましたが、プロゲート有料編では各級の「道場コース」が受けられます。
「学習編」は1つ1つに区切って説明付きでコードを書いていくのですが、「道場編」ではヒントなしで自分ですべてのコードを書いていく練習です。
説明を受けたときは「わかった気」になっていても、実際には定着していないことが良くあります。それを防ぎ、自分の定着を確かめながら復習できるのが「道場編」の魅力です。
コーディング以外の説明も受けられる
これも初学者には大変ありがたい。
私も最初、HTMLとCSSは学んだものの。実際にはどんなツールを使ってどんな設定をしていけばWEBサイトができるのかわからずもやもやしていました。
プロゲート有料編には設定やツールなどの実践的な知識も学べるので。学んだ後すぐに実践していけました。
プロゲートを使ったおすすめの勉強方法・スケジュール
いつもだったら、ここで「計画表」を作成して提示するんですが、上記のようにプロゲートには初めからそれがあります(*’▽’)
【プロゲートに記載の所要時間（目安）】
HTML & CSS 初級編 3時間50分
HTML & CSS 中級編 4時間30分
HTML & CSS 初級編 道場コース 2時間30分
HTML & CSS 中級編 道場コース 3時間20分
HTML & CSS 上級編 2時間
HTML & CSS 上級編 道場コース 1時間40分
道場コースについては、はじめは全然自分ではコードが書けなくて、ヒントや答えを見まくっていました（笑）
道場コースについては確か、3回くらい同じ内容をやってやっと自力でコーディングできるようになりました。
なので、時間は上記の2～3倍は掛かっています。
プロゲート学習後の勉強方法
私の場合は、
①巷のWEBサイトを見本にコーディングして、そのサイトに近づけていく練習（主にワードプレス中心）
②ワードプレスで実際にブログを作成しながら、必要な個所でHTMLやCSSをカスタムしていく練習
③改めて本を買い、HTMLとCSSの勉強
④Wordpressで１から作ったオリジナルテーマをHTML＆CSSで装飾
という流れでやっていきました。
WordPressを使っちゃったので、②まではHTML＆CSSのスキルは低かったです。スキルは低くても実際WEBで調べて見本コードをコピペすれば割と作りたいデザインは作れます。
HTML＆CSS をきちんと学ぶと、レイアウトが自分で作れるようになるため、Topページ作成のお仕事等も受注できるようになることがメリットです。
プロゲートで学習後の勉強方法はこちら
