なにやら牛山くんがキャニット先生に相談があるようです。
キャニット先生、僕はプログラミングの基本をもっと自分で頑張ろうと思うんです。何の勉強をするのがいちばんいいですか？
そうですね。やはりHTMLが基本ですよね。HTMLなら独学でも十分に学習できますよ
Web系のエンジニアには、HTMLは習得必須の言語です。もちろん、HTMLだけでなくCSSやJquery(Javascript)の知識なども必要ですが、基本のHTMLを理解していなければ話にならないことも多いでしょう。
二人でそんな話をしていると、猫田さんもやってきました。
牛山くんが、わたしに内緒で抜け駆けしようとしてるよー ひどいよー
そんなことないですよ。 猫田さんも一緒にHTMLの独学方法を聞きましょう
んん？ 今日はそういう話なの？ オッケー、じゃあさっそくいってみよー
ということで、今回はHTMLの独学方法や独学する上で必要なお金や時間・おすすめの学習サイトなどを紹介します。これからHTMLの勉強を始める人はもちろん、挫折気味の人も、ぜひこの記事を参考にしてください。
HTMLの学習方法
まずはHTMLの学習方法について紹介します。
講師を雇ったりプログラミングスクールに通ったりと効率的にHTMLの学習を行う方法はいくつもあります。でも、今回は独学での学習に焦点を合わせて解説します。
独学での学習ならお金に余裕のない学生や仕事が忙しくてスクールに通えない人も挑戦できますね。
そもそも、スクールに通うお金がないからね
step1,学習サイトを利用したHTMLの基礎学習
独学で勉強する場合も、まずは学習サイトを利用して基礎を学習しましょう。CANITでもHTMLの基礎について解説していますので、よろしければご覧ください。
HTMLはCSSとセットで覚えると便利です。CSSを使うと文字の色を変えたり、ボタンの配置を変更したり、デザインを調整できます。読者を惹き付けるようなデザインを再現するのがCSSの役割です。
独学でHTMLを学ぶ人の多くは、学習サイトを利用しています。まずは、おすすめの学習サイトを紹介しますね
HTMLを独学できる学習サイト①：Progate
まず1つ目に紹介するのはprogateという学習サイトです。progateでは、HTML&CSSだけでなくRubyやPHPなどの言語やGItなどのバージョン管理分野までたくさんのプログラミングの知識を学べます。
progateは、プログラミング初学者からもっとも多くの支持を集めている学習サイトかもしれません。そのくらい多くの人たちに利用されています
用意するものは最小限
通常、プログラミングを勉強する際はコードを書くためのテキストエディタを用意する必要があります。しかし、Progateでの学習なら全てをサイト上で行うことが可能。結果的に、HTMLの学習に専念できます。
Progateでは難易度順に初級から上級までのコースが用意されています。説明を見ずに自分でコーディングを行う道場コースもあり、この道場コースは実務に近い経験を積めるので必ず取り組むようにしましょう。
Progateの良いところ
progateでの学習の良い部分を教えてください
Progateの良いところは実際に手を動かしながら学習を進められる点です。本を読むだけの学習と違い、実際にコードを書くので身体で覚えるようにもなります。
なお、初級編は無料ですが、中級編以降の学習のためには月額980円の有料会員になる必要があります。
HTMLを独学できる学習サイト②：ドットインストール
次に紹介するのはドットインストールです。ドットインストールは、動画を見ながらプログラミングを学べる学習サイトです。
動画かぁ……数分で眠くなる自信しかないなぁ
ドットインストールの動画は、ほとんどが3分以内ですよ。 猫田さんでも大丈夫です
おぉー それは助かるー
動画を見ながら実際に手を動かし、学習をします。動画なので、わからないところは見直せますし、自分でコードを書くときは一旦動画を止めれば良いです。何気に自分のペースで学習できるサイトですよ。
環境開発は自分で用意
progateとドットインストールだと、どっちが簡単ですか？
一概には言えませんが……ドットインストールは開発環境を自分で用意しなくてはならないので、その分だけハードルが高いかもしれませんね
開発環境の構築方法
その開発環境って、難しいの？
全部、動画で説明してくれるので簡単ですよ。 多少手間取っても20分くらいで終わるんじゃないでしょうか
なんだ。 ぜんぜん大丈夫そうじゃん
エンジニアになるなら環境構築の技術も必要なので、「これも勉強」と考えて取り組むと良いでしょうね。
また、ドットインストールも基礎的な学習は無料ですが、有料会員にならないと閲覧できない講義が多いです。月額1,080円のプレミア会員になると全ての講義を受けられるようになります。
なお、プレミアム会員になると、閲覧できる講義が増えるだけではなく以下のサービスもついてきます。
- 動画の文字起こし機能
- ソースコードの閲覧と比較
- 動画の速さを変更可能
- 音声を女性の声に変更可能
- 現役エンジニアへの質問制度
step2,サイト模写で発展的な内容までを学ぶ
学習サイトである程度の知識がついたら、次はサイトの模写をするといいですよ
サイトの模写とは、既存サイトを自分のコーディングで忠実に再現する学習方法です。
ほうほう……他のサイトをパクるのね。 たしかに勉強になるかも
パクるって言うとアレですけど、楽器の演奏をする人が曲をコピーするような感じですか？
そうですね。 その感覚に近いですよ
おすすめの開発環境
さて、ドットインストールで学習をした人はすでに開発環境が整っていると思います。しかし、開発環境が整っていない人も大勢いるでしょう。その方たちは、まずコーディングをするために必要なテキストエディタをダウンロードして開発環境を用意しましょう。
個人的にはVisualStudioCODE(VSCODE)が使いやすくておすすめです。
開発環境が用意できたら、学習サイトで学んだ知識を使ってできる限り本物そっくりのサイトを作ってみましょう。
どんなサイトを模写すればいいんですか？
ほとんどの問題はオンラインで解決できる
模写をしているとわからない箇所やうまく実装できない部分は、必ず出てきます。その際は、すぐに諦めてしまうのではなくネットで解決方法を調べてみましょう
ネットに答えが載ってるの？
ネットの情報で必ず解決できるとは限りませんよ。でも、わからない部分をネットで検索する行動はとても大事なので、そういう癖をつけておいてください
HTMLだけでなくプログラミング言語を習得する上で大切なのは、自力で調べて解決できるスキルをつけることです。自分で調べる能力が高いと、この先仕事をしていく上でわからないことが出てきた際にとても役に立ちます。
まずは自分で調べてみて、それでもわからない場合は見本にしているサイトのコードを確認する方法もあります。
step3,自分でサイトを作ってみる
既存のWebサイトの模写がある程度こなせるようになったら、次は自分でオリジナルのサイトを作成してみましょう。
おおおおおおお、いよいよかー
自分でサイトを作る際は、 どのような案件で仕事を受注していきたいかを考えることです。そうすれば、使用するツールやシステムも決めやすくなりますよ。
たとえば、WordPressに特化した案件を受注したいならHTMLとCSSの知識に加えてPHPを習得し、まっさらな状態から WordPressサイトを構築してみましょう。
初心者にもおすすめのLP（ランディングページ）
LP案件で稼いでいきたいのなら、HTMLとCSSにJQueryの知識をプラスして少し動的な要素も含めた1ページの縦長サイトを作成してみれば良いでしょう。
LPは、模写と同様に開発環境さえあればすぐに着手できるので初心者にはおすすめです
LPは、模写と同様に開発環境さえあればすぐに着手できるので初心者にはおすすめですよ
もちろん、わたしにもできちゃうよねー
んー 今の猫田さんだと、ちょっと無理かもしれませんねー。 でも、デザインとそれに必要なソースコードを自力で考えてコーディングしていけば、HTMLのスキルは高まりますよ。頑張ってみてください
むぅ……
デザインは、「Webサイト デザイン 見本 」などと検索すればたくさんのギャラリーサイトがヒットするので、その中から作りやすそうなものを参考にして作成するようにすれば良いでしょう。
たとえばランディングページなら、「ランディングページ集めました」というサイトが有名です。
つまずいたら、まずは検索
独学で学んでいるときに、わからないことが出てきて先に進めなくなったらどうすればいいんですか？
つまずいたときは「float 横並び できない」などのように検索ワードを考えて解決方法を調べるようにしましょう。
HTMLを独学で習得するのに必要なお金と時間
最後に、HTMLを独学で勉強するために必要なお金と時間について解説しますね
お金と時間かー
何気にいちばん大事なことかもしれないね
お金はあまり必要ない
独学で学習を進めるのならばお金はそれほど必要ありません。
Progateとドットインストールの両方の月額会員になったとしても、ひと月に必要なお金は2,000円程度です。
参考書や学習本などを購入しても、月に1万円以上のお金が必要になることはないでしょう。多額のお金をかけずに最低限の出費でHTMLを学ぶことができる面が、独学の良さではないでしょうか？
習得に必要な時間は人それぞれ
HTML習得に必要な時間は人によってそれぞれなので一概に「◯◯時間」と断言することはできません。
コツをつかむのが早く効率的に勉強できる人は1ヶ月でマスターできるかもしれないし、苦手な箇所で長い間つまずいてしまった人は３ヶ月以上かかる場合もあるでしょう。
このように人それぞれ学習スピードは違いますが、目安としては100時間以上の時間を学習に費やすことができれば、初心者の域は脱することができると思います。
HTMLの学習は競争ではないんですよ。だから、周りの学習スピードは気にしなくていいですよ。自分のペースで継続するようにしましょう
そうは言っても、牛山くんに負けるわけにはいかないのだ
独学で極めるHTML：まとめ
というわけで、HTMLの独学方法や、必要なお金・時間、おすすめな学習サイトなどを紹介しました。 二人ともいかがでしたか？
やろうと思えば金はかからない。 それが大きな収穫だね
わからなくなったときに検索力が大事！ これはよく覚えておきます
HTMLは学習サイトが充実しているので、独学でも十分に習得可能なプログラミング言語です。あなたもこの機会に、独学でHTMLを学んでみてはいかがでしょうか？