「Web制作に興味があるから勉強したいけど、何をやったらいいか分かんない…」
「プロゲートやドットインストールで学習したけどなかなか覚えられない…」
そんな人に向けて、現役Web制作者の私が約半年でWebクリエイター能力認定試験を合格したHTML＆CSSの学習法を紹介します。
この記事が皆さまのお役に立てればなと思います。
【結論】本を繰り返しやるだけ
さっそく結論ですが、自分はとにかく本をやりまくりました。
「これだけ？」と言われそうですが本当にこれだけなんです。
というより、本を繰り返し使って学習するのが一番の近道なんですよね。
私の場合、週に2、3日4時間程勉強して約半年でWebクリエイター能力認定試験の資格を取ることができました。おそらくもっと勉強すれば3ヵ月ほどで取れるんじゃないでしょうか。
ちなみに私が使用した本は下記のテキストと問題集のみです。
なお、上記のテキストは説明がザックリしすぎているので、これだけで学習するのはあまりオススメしません。
下記の記事で紹介している学習サイトからHTML&CSSの基礎を学んでからテキストに移ったほうがスムーズに学習できると思います。
HTML＆CSSを学習するにあたって大切なポイント
書籍を購入して独学する際に必ず気を付けなければいけないポイントがあります。これらのポイントを意識するだけでモチベーションが維持でき、学習スピードも早くなるでしょう。
ポイント1.目標を持つこと
何事にも目標を持つことが大切です。
ホームページ制作会社に入りたいという人もいればWebデザイナーになって独立したいという人もいるでしょう。
自分の目標によってある学習範囲も決まってきます。まずは目標を設定して、自分に合った勉強法、学習法を身に付けましょう。
ちなみに私はWeb制作者になって独立したいという気持ちで勉強しました。
この記事を書いてる段階ではまだ独立はしていませんが、少しずつ夢に向けて頑張っております。
ポイント2.期間を決める
目標を決めたら今度は期間を決めましょう。いつまでもダラダラ勉強しててはいつまで経ってもホームページを制作できません。
HTML＆CSSの学習は非常に簡単なので3～4ヵ月、長くても6ヵ月を目安に学習していきましょう。
筆者自身は週2、3日を4時間ペースで学習して約半年でHTML&CSSの基礎を叩き込みました。
ポイント3.インプット後にアウトプットをする
学習したのを素早く身に付けるにはインプット＆アウトプットです。
インプットとは簡単に言うと、知識を身に付けるということです。書籍やWebで見付けたタグや使い方を覚えたり、タグの意味を理解するということになります。
最初はとにかくインプットして頭に入れることが大切です。
しかし、ただ単に書籍やWeb、動画を見たからといってすぐにホームページが作れるのかというとそういうわけではありません。
知識を身に付けたら今度はアウトプットが必要です。実際にコードを書いて実践に移してみましょう。
私が紹介したテキストにも本物のサイトを制作するのと同じようにコードを書いてページを作成していくのでアウトプットも完璧です。
慣れてきたら他のホームページを模写してみるのもいいでしょう。自分の思い通りにページが作成されるとモチベーションアップにもつながりますよ。
ポイント4.1度に全てを覚えようとしないこと
これは私自身もよくやることですが、1度に全て覚えようとするのは非効率なのでオススメしません。
そもそもインプット、アウトプットで勉強してても1度で全てのことを覚えるのなんて人間の脳では不可能です。
まずは1度サラッとテキストを読んで、2回目はインプット&アウトプットを繰り返しやっていきましょう。
数ページごとに、もしくは章ごとに区切って何度もインプット&アウトプットを繰り返していくのがオススメです。
ポイント5.サイトを模写する。
一通りテキストの学習が終わったら他のホームページを模写してみましょう。
模写とは他の人のホームページを真似てコーディングすることです。
「制作中のサイトを他の人に見られないの？」「ホームページを模写したらそのサイトの人に著作権の侵害で訴えられたりしないのかな？」と思われるかもしれませんが、ローカル上でHTMLの練習をしていればそもそもgoogleやyahooの検索に引っかからないので他の人に見られる心配はありません。
どんどん練習していきましょう。
模写するサイトは何でもいいのですが、最初はこのサイトを模写してみるといいでしょう。
https://www.pro-s.co.jp/seminar/seo/
このサイトの模写をやると背景色やテキスト、画像の貼り付けや配置などを一通り学ぶことができそうですね。
サイトに使用している画像は一旦ローカルに保存して使用してください。
もし元のサイトがどんなHTMLやCSSのコードを使用しているのか知りたくなったらデベロッパーツールを使用するといいでしょう。（デベロッパーツールの使い方はググってください。ググって調べるのも大切な学習ポイントです。）
JavascriptとPHPは今すぐではないが学習したほうがいい
HTML&CSSのほかにJavascriptやPHPを学習したほうがいいというのを聞いた、若しくは見たことがあるという方がいらっしゃるのかもしれません。
こちらに関しては、コーディングを行う程度であればすぐに覚える必要はないです。
簡単にホームページを制作するだけならHTML&CSSだけで充分です。
また、WordPressにはスライダーやお問い合わせ用のレイアウトを簡単に作れるプラグインも複数用意されているのでそれらを利用するのもいいでしょう。
とはいえ仕事の幅を広げたいならいずれは学習する必要があるので、こちらもHTML&CSSと同様の方法で学習するといいでしょう。
まとめ
もう1度簡単に言います。
- テキストをやってひたすらやること
- 目標や期間を設けて勉強する
- インプットとアウトプットを繰り返す
- サイトを模写する
- Javascript、PHPはあとで勉強する
HTML&CSSを独学で勉強するのは根気がいりますが、その気になれば数ヵ月で理解できる簡単なマークアップ言語です。諦めずに勉強すれば必ず身につくので頑張ってくださいね。