独学で極めるHTML:必要な時間とお金、勉強方法や学習サイト

パソコン 言語・WordPress

なにやら牛山くんがキャニット先生に相談があるようです。

牛山くん
牛山くん

キャニット先生、僕はプログラミングの基本をもっと自分で頑張ろうと思うんです。何の勉強をするのがいちばんいいですか?

CANIT先生
CANIT先生

そうですね。やはりHTMLが基本ですよね。HTMLなら独学でも十分に学習できますよ

Web系のエンジニアには、HTMLは習得必須の言語です。もちろん、HTMLだけでなくCSSやJquery(Javascript)の知識なども必要ですが、基本のHTMLを理解していなければ話にならないことも多いでしょう。

二人でそんな話をしていると、猫田さんもやってきました。

猫田さん
猫田さん

牛山くんが、わたしに内緒で抜け駆けしようとしてるよー ひどいよー

牛山くん
牛山くん

そんなことないですよ。 猫田さんも一緒にHTMLの独学方法を聞きましょう

猫田さん
猫田さん

んん? 今日はそういう話なの? オッケー、じゃあさっそくいってみよー

ということで、今回はHTMLの独学方法や独学する上で必要なお金や時間・おすすめの学習サイトなどを紹介します。これからHTMLの勉強を始める人はもちろん、挫折気味の人も、ぜひこの記事を参考にしてください。

HTMLの学習方法

男性 パソコン

まずはHTMLの学習方法について紹介します。

講師を雇ったりプログラミングスクールに通ったりと効率的にHTMLの学習を行う方法はいくつもあります。でも、今回は独学での学習に焦点を合わせて解説します。

独学での学習ならお金に余裕のない学生や仕事が忙しくてスクールに通えない人も挑戦できますね。

猫田さん
猫田さん

そもそも、スクールに通うお金がないからね

step1,学習サイトを利用したHTMLの基礎学習

独学で勉強する場合も、まずは学習サイトを利用して基礎を学習しましょう。CANITでもHTMLの基礎について解説していますので、よろしければご覧ください。

HTMLはCSSとセットで覚えると便利です。CSSを使うと文字の色を変えたり、ボタンの配置を変更したり、デザインを調整できます。読者を惹き付けるようなデザインを再現するのがCSSの役割です。

CANIT先生
CANIT先生

独学でHTMLを学ぶ人の多くは、学習サイトを利用しています。まずは、おすすめの学習サイトを紹介しますね

HTMLを独学できる学習サイト①:Progate

プロゲート

まず1つ目に紹介するのはprogateという学習サイトです。progateでは、HTML&CSSだけでなくRubyやPHPなどの言語やGItなどのバージョン管理分野までたくさんのプログラミングの知識を学べます。

CANIT先生
CANIT先生

progateは、プログラミング初学者からもっとも多くの支持を集めている学習サイトかもしれません。そのくらい多くの人たちに利用されています

用意するものは最小限

通常、プログラミングを勉強する際はコードを書くためのテキストエディタを用意する必要があります。しかし、Progateでの学習なら全てをサイト上で行うことが可能。結果的に、HTMLの学習に専念できます。

Progateでは難易度順に初級から上級までのコースが用意されています。説明を見ずに自分でコーディングを行う道場コースもあり、この道場コースは実務に近い経験を積めるので必ず取り組むようにしましょう。

Progateの良いところ

牛山くん
牛山くん

progateでの学習の良い部分を教えてください

Progateの良いところは実際に手を動かしながら学習を進められる点です。本を読むだけの学習と違い、実際にコードを書くので身体で覚えるようにもなります。

なお、初級編は無料ですが、中級編以降の学習のためには月額980円の有料会員になる必要があります。

HTMLを独学できる学習サイト②:ドットインストール

ドットインストール

次に紹介するのはドットインストールです。ドットインストールは、動画を見ながらプログラミングを学べる学習サイトです。

猫田さん
猫田さん

動画かぁ……数分で眠くなる自信しかないなぁ

CANIT先生
CANIT先生

ドットインストールの動画は、ほとんどが3分以内ですよ。 猫田さんでも大丈夫です

猫田さん
猫田さん

おぉー それは助かるー

動画を見ながら実際に手を動かし、学習をします。動画なので、わからないところは見直せますし、自分でコードを書くときは一旦動画を止めれば良いです。何気に自分のペースで学習できるサイトですよ。

環境開発は自分で用意

牛山くん
牛山くん

progateとドットインストールだと、どっちが簡単ですか?

CANIT先生
CANIT先生

一概には言えませんが……ドットインストールは開発環境を自分で用意しなくてはならないので、その分だけハードルが高いかもしれませんね

Progateではエディタを用意しなくても学習をできましたが、ドットインストールではそうはいきません。自分でコードを書くための開発環境を用意する必要があります。

開発環境の構築方法

猫田さん
猫田さん

その開発環境って、難しいの?

CANIT先生
CANIT先生

全部、動画で説明してくれるので簡単ですよ。 多少手間取っても20分くらいで終わるんじゃないでしょうか

猫田さん
猫田さん

なんだ。 ぜんぜん大丈夫そうじゃん

エンジニアになるなら環境構築の技術も必要なので、「これも勉強」と考えて取り組むと良いでしょうね。

また、ドットインストールも基礎的な学習は無料ですが、有料会員にならないと閲覧できない講義が多いです。月額1,080円のプレミア会員になると全ての講義を受けられるようになります。

なお、プレミアム会員になると、閲覧できる講義が増えるだけではなく以下のサービスもついてきます。

  • 動画の文字起こし機能
  • ソースコードの閲覧と比較
  • 動画の速さを変更可能
  • 音声を女性の声に変更可能
  • 現役エンジニアへの質問制度

step2,サイト模写で発展的な内容までを学ぶ

男性 勉強
CANIT先生
CANIT先生

学習サイトである程度の知識がついたら、次はサイトの模写をするといいですよ

サイトの模写とは、既存サイトを自分のコーディングで忠実に再現する学習方法です。

猫田さん
猫田さん

ほうほう……他のサイトをパクるのね。 たしかに勉強になるかも

牛山くん
牛山くん

パクるって言うとアレですけど、楽器の演奏をする人が曲をコピーするような感じですか?

CANIT先生
CANIT先生

そうですね。 その感覚に近いですよ

おすすめの開発環境

さて、ドットインストールで学習をした人はすでに開発環境が整っていると思います。しかし、開発環境が整っていない人も大勢いるでしょう。その方たちは、まずコーディングをするために必要なテキストエディタをダウンロードして開発環境を用意しましょう。

VSコード

個人的にはVisualStudioCODE(VSCODE)が使いやすくておすすめです。

開発環境が用意できたら、学習サイトで学んだ知識を使ってできる限り本物そっくりのサイトを作ってみましょう。

牛山くん
牛山くん

どんなサイトを模写すればいいんですか?

模写をする際に見本として選ぶべきサイトは、パッと見て8割程度の実装イメージがわくサイトです。その上で、HTMLとCSS、基礎的なJQuery(Javascript)のみで構成されているサイトが良いですよ。明らかに複雑だと思われるサイトは、避けたほうが良いでしょうね。

ほとんどの問題はオンラインで解決できる

進まない
CANIT先生
CANIT先生

模写をしているとわからない箇所やうまく実装できない部分は、必ず出てきます。その際は、すぐに諦めてしまうのではなくネットで解決方法を調べてみましょう

猫田さん
猫田さん

ネットに答えが載ってるの?

CANIT先生
CANIT先生

ネットの情報で必ず解決できるとは限りませんよ。でも、わからない部分をネットで検索する行動はとても大事なので、そういう癖をつけておいてください

HTMLだけでなくプログラミング言語を習得する上で大切なのは、自力で調べて解決できるスキルをつけることです。自分で調べる能力が高いと、この先仕事をしていく上でわからないことが出てきた際にとても役に立ちます。

まずは自分で調べてみて、それでもわからない場合は見本にしているサイトのコードを確認する方法もあります。

見本のサイトで右クリックをして「検証」や「ページのソースを表示」を選択するとそのサイトのコードを見ることができます。ただ、見本を見てコードを写すだけではスキルが上がらないので、この方法はあくまでも最終手段として利用するようにしましょう。

step3,自分でサイトを作ってみる

パソコン

既存のWebサイトの模写がある程度こなせるようになったら、次は自分でオリジナルのサイトを作成してみましょう。

猫田さん
猫田さん

おおおおおおお、いよいよかー

自分でサイトを作る際は、 どのような案件で仕事を受注していきたいかを考えることです。そうすれば、使用するツールやシステムも決めやすくなりますよ。

たとえば、WordPressに特化した案件を受注したいならHTMLとCSSの知識に加えてPHPを習得し、まっさらな状態から WordPressサイトを構築してみましょう。

初心者にもおすすめのLP(ランディングページ)

スタートアップ

LP案件で稼いでいきたいのなら、HTMLとCSSにJQueryの知識をプラスして少し動的な要素も含めた1ページの縦長サイトを作成してみれば良いでしょう。

LPは、模写と同様に開発環境さえあればすぐに着手できるので初心者にはおすすめです

CANIT先生
CANIT先生

LPは、模写と同様に開発環境さえあればすぐに着手できるので初心者にはおすすめですよ

猫田さん
猫田さん

もちろん、わたしにもできちゃうよねー

CANIT先生
CANIT先生

んー 今の猫田さんだと、ちょっと無理かもしれませんねー。 でも、デザインとそれに必要なソースコードを自力で考えてコーディングしていけば、HTMLのスキルは高まりますよ。頑張ってみてください

猫田さん
猫田さん

むぅ……

デザインは、「Webサイト デザイン 見本 」などと検索すればたくさんのギャラリーサイトがヒットするので、その中から作りやすそうなものを参考にして作成するようにすれば良いでしょう。

たとえばランディングページなら、「ランディングページ集めました」というサイトが有名です。

つまずいたら、まずは検索

牛山くん
牛山くん

独学で学んでいるときに、わからないことが出てきて先に進めなくなったらどうすればいいんですか?

つまずいたときは「float 横並び できない」などのように検索ワードを考えて解決方法を調べるようにしましょう。

独学でプログラミングを学んでいる人はたくさんいます。だから、同じ内容でつまずいた人もたくさんいますよ。すでに解決方法をブログなどで紹介してくれていることがよくあります。

HTMLを独学で習得するのに必要なお金と時間

プログラミング
CANIT先生
CANIT先生

最後に、HTMLを独学で勉強するために必要なお金と時間について解説しますね

牛山くん
牛山くん

お金と時間かー

猫田さん
猫田さん

何気にいちばん大事なことかもしれないね

お金はあまり必要ない

独学で学習を進めるのならばお金はそれほど必要ありません。

Progateとドットインストールの両方の月額会員になったとしても、ひと月に必要なお金は2,000円程度です。

参考書や学習本などを購入しても、月に1万円以上のお金が必要になることはないでしょう。多額のお金をかけずに最低限の出費でHTMLを学ぶことができる面が、独学の良さではないでしょうか?

習得に必要な時間は人それぞれ

女性 パソコン

HTML習得に必要な時間は人によってそれぞれなので一概に「◯◯時間」と断言することはできません。

コツをつかむのが早く効率的に勉強できる人は1ヶ月でマスターできるかもしれないし、苦手な箇所で長い間つまずいてしまった人は3ヶ月以上かかる場合もあるでしょう。

このように人それぞれ学習スピードは違いますが、目安としては100時間以上の時間を学習に費やすことができれば、初心者の域は脱することができると思います。

CANIT先生
CANIT先生

HTMLの学習は競争ではないんですよ。だから、周りの学習スピードは気にしなくていいですよ。自分のペースで継続するようにしましょう

猫田さん
猫田さん

そうは言っても、牛山くんに負けるわけにはいかないのだ

独学で極めるHTML:まとめ

女性
CANIT先生
CANIT先生

というわけで、HTMLの独学方法や、必要なお金・時間、おすすめな学習サイトなどを紹介しました。 二人ともいかがでしたか?

猫田さん
猫田さん

やろうと思えば金はかからない。 それが大きな収穫だね

牛山くん
牛山くん

わからなくなったときに検索力が大事! これはよく覚えておきます

HTMLは学習サイトが充実しているので、独学でも十分に習得可能なプログラミング言語です。あなたもこの機会に、独学でHTMLを学んでみてはいかがでしょうか?

❤内容は役に立ちましたか?皆さまのご意見が励みになります☺
YesNo
無料でスキルを学んでからIT業界に転職

そろそろ本気で将来のことを考えなくちゃ……手に職をつけてIT業界に転職したいなぁ。でも、業界未経験だから、なんか敷居が高そう、と思っている方へ。

これからIT業界への転身を目指すあなたに、無料でスキルアップできて、平均で年収は90万円もアップできるんです。

言語・WordPress
【この記事を書いた人】
CANIT 先生

あらゆるプログラミング言語をあやつるフリーの凄腕講師。温和な性格で「わかるまで教えます」がモットー。たまに時間ができると動物の仲間達に、プログラミングを教えることもある。現在の生徒は牛山くんと猫田さん。

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