WEBデザインに欠かせない言語の１つといえば、HTMLですよね。
HTMLは構文が理解しやすく、プログラミング初心者さんにとっても比較的勉強しやすい言語の１つです。
そんなHTMLですが、プログラミング初心者さんのなかには
という方も、多くいらっしゃるのではないでしょうか。
そこで今回は、HTMLの独学勉強をするときにおすすめの進め方から、具体的なおすすめ教材までたっぷりと紹介していきます。
HTMLの勉強方法に迷っている方、使う教材選びに悩んでいる方はぜひ参考にしてみてください。
記事のもくじ
《全3ステップ》htmlを独学で勉強するときのおすすめ進め方
HTMLの独学勉強は、下記3つのステップに分けて進めていくのがおすすめです。
- 学習サイト・本を利用して基礎も学ぶ
- サイトを模写して感覚をつかむ
- 自分でサイトをつくる
それぞれのステップについて、詳しく紹介していきます。
htmlの独学勉強ステップ１：学習サイト・本を利用して基礎を学ぶ
HTMLを勉強するときにまず実施することは、作法や型を学ぶことです。
学習サイトや本を利用して、基本的な知識を学んでいきましょう。
できるだけお金をかけずに勉強したいのなら、無料で学べる学習サイトを使うのがおすすめです。
のちほどおすすめのサイト・本を全部で10種類紹介するので、ぜひこれからHTMLの独学勉強を始めようと思っている方は、チェックしてください。
htmlの独学勉強ステップ２：サイトを模写して感覚をつかむ
学習サイト・本を利用してHTMLの基礎を学んだら、実際のWEBサイトの模写をしてみましょう。
模写を行うことで、学習サイト・本では学びきれないテクニックや技術などを知ることができます。
なお、模写を行うときにはテキストエディタの準備が必要です。
テキストエディタについては下記記事の「テキストエディタを用意しよう」で紹介しています。
基礎勉強と比較するとグッと難易度が高くなりますが、ぜひチャレンジしてみてください。
htmlの独学勉強ステップ３：自分でサイトを作る
最後のステップでは、ご自身の力で1からWEBサイトを作ってみましょう。
WEBデザイナーやプログラマーとして仕事をしていくのであれば、自分の力でゼロから作れるようになる必要があります。
ご自身のWEBサイトを作れば、そのままポートフォリオサイトとして活用することもできるのでおすすめです。
模写とは異なり、自由度が非常に高いため悩むことも多いかと思いますが、HTML学習の総括として取り組んでみてください。
htmlの独学勉強におすすめのサイト６選
ここからはさきほどお話した通り、HTMLの独学勉強におすすめのサイトを紹介します。
今回紹介するのは、下記の６つです。
- ドットインストール
- Schoo
- Progate
- CODEPREP
- Udemy
- CodeAcademy
６つともプログラミングを勉強する上での定番サイトではありますが、無料で受講できたり、英語も一緒に学ぶことができたりと、サイトによって特徴が大きく異なります。
１つ１つ詳しく紹介していくので、ぜひご自身にはどのサイトが合いそうか、どれから始めてみようか考えながら読み進めてみてください。
htmlの独学勉強おすすめサイト1：ドットインストール
ドットインストールは、動画を見て勉強をすすめていくタイプのサイトです。
１つの動画は３分で構成されているので、忙しい学生・社会人でも通勤・通学時間や休み時間を利用してサクッと勉強できます。
HTMLについては全14回の講座で学ぶことができるようになっており、14回すべてが無料で視聴可能です。
すぐに利用できるサイトなので、気になる方は、まずチェックしてみるとよいでしょう。
htmlの独学勉強おすすめサイト2：Schoo
月額980円（税込）で365日配信されている生放送の授業と、4,600以上の動画で、様々な仕事に活きる知識・スキル・考え方を身につけることができるのがSchooです。
動画系のサイトである点ではドットインストールと同様ですが、Schooには、ほかの受講生と交流ができるという特徴があります。
1人では続けにくい勉強も、ほかの学生と交流をすることでモチベーション管理がしやすくなることでしょう。
また、生放送では、本物の授業のようにリアルタイムで質問をすることもできるのも便利です。
HTMLに関する動画だけでも様々な方が授業を行っているので、自分に合う先生を見つけられるのではないでしょうか。
htmlの独学勉強おすすめサイト3：Progate
Progateは、スライドで概要を学んだのちに、実際にコードを書きながら勉強する、学習と実践を兼ね備えたサイトです。
スライドはイラスト中心に作られているので、難しいプログラミングでも直感的に理解できるようになっています。
なお、コードはブラウザ上で入力できるので、特別なアプリ・ソフトのインストールは必要ありません。
Progateでは、「HTML&CSSコース」でHTMLを学ぶことができます。
初級・中級・上級と3つのコースに分かれているので、自分のレベルにあったところから勉強を進められるのが便利です。
htmlの独学勉強おすすめサイト4：CODEPREP
実際に自分でコードを書きながらHTMLについて学んでいくのが、CODEPREPです。
1つの講座が1冊の本形式になっており、1冊の学習にかかる時間はわずか10分と、かなりの短時間で完了させることができます。
穴埋め形式でコードを記入していく形なので、まったくの未経験の方でも安心して進められるはずです。
なお、編集したコードはダウンロードもできるので、習ったコードをもとに、オリジナルな編集を加えることもできます。
さらに、CODEPREPには、「ディスカッションボード」という機能があり、ユーザー同士で、質問・教え合いができるので、ともに切磋琢磨しながら学ぶことができます。
ただし、残念ながらスマホには対応していないので、PCを持っていない方は要注意です。
htmlの独学勉強おすすめサイト5：Udemy
Udemyは、特にアメリカで人気を集めている、世界中のトップ講師の動画を視聴することができるサイトです。
基本的には動画単位で支払いが必要になってしまうものの、なかには無料で視聴できる講座もあります。
なお、有料講座については、1度購入さえしてしまえば、視聴期限はありません。
ブラックフライデーなど、イベントのタイミングでセールを実施しているときもあるので、習いたい講座がある方は要チェックです。
htmlの独学勉強おすすめサイト6：CodeAcademy
CodeAcademyもUmedy同様に、アメリカで人気のあるオンライン教材サイトです。
7年間で4,500万人ものサービス利用者を誇る人気のサイトで、会員登録さえ済ませてしまえば、無料で学習を進めることができます。
実際にコードを書きながら覚えていく形式のCodeAcademyですが、コードはブラウザ上で書くことができるので、アプリ・ソフトのインストールは必要ありません。
基本的には英語のサイトなので、英語に自信のある方、もしくは基礎的な英語力があり、さらに英語力を高めたい方におすすめです。
htmlの独学勉強におすすめの本4選
おすすめのサイトに引き続き、HTMLの勉強に使える本も合わせて紹介していきます。
- スラスラわかるHTML&CSSのきほん
- いちばんよくわかるHTML5&CSSデザインきちんと入門
- いちばんやさしいHTML5&CSS3の教本
- HTML5&CSS3デザインブック
上記のなかには完全初心者向けのものから、「サイトでの勉強が終わってしまった」「もう少しレベルを上げた教材が欲しい」という方にも使えるものもあります。 HTMLの学び直しをしようと考えている方も、要チェックです。
htmlの独学勉強おすすめ本１：スラスラわかるHTML&CSSのきほん
「スラスラわかるHTML&CSSのきほん」は、累計4万部を突破している、HTMLおよびCSSのベストセラー本です。
図解が多いだけでなく、難しい用語もしっかりと説明がついているので、初心者さんでも簡単読むことができます。 本としてもそこまで分厚くないので、「勉強するぞ！」と気合をいれなくても読み進められるのが、この本ならではのメリットです。 HTMLの基礎から、Webサイトの完成まで流れで学ぶことができ、初心者がつまずきやすいポイントもしっかりと解説しているので、1冊しっかりと読み切れるはずです。
htmlの独学勉強おすすめ本2：いちばんよくわかるHTML5&CSSデザインきちんと入門
「いちばんよくわかるHTML5&CSSデザインきちんと入門」は、「スラスラわかるHTML&CSSのきほん」と同じ著者が書いている本です。
「スラスラわかるHTML&CSSのきほん」と同様に読みやすさが抜群なだけでなく、スマートフォン向けのHTML&CSSについても詳しく記述されているので、より新しい情報を知りたい方には適した本と言えるでしょう。
たっぷりと説明量があるので、しっかりと頭で理解したい方には特におすすめの1冊です。
htmlの独学勉強おすすめ本3：いちばんやさしいHTML5&CSS3の教本
人気講師たちによる講義と、実習の組み合わせで制作されているのが「いちばんやさしいHTML5&CSSの教本」です。
ソースコードと画像を見ながら、Webサイトを作る流れに沿ってHTMLを学ぶことができます。
初心者向けの本ではありますが、基本的なタグを知っている方がこの本を読んで学習することで、よりHTMLの理解を深められるはずです。
htmlの独学勉強おすすめ本4：HTML5&CSS3デザインブック
「HTML5&CSSデザインブック」は、HTMLの基礎的なことを学んだ上で読むのにおすすめの本です。
具体的なレイアウトなど、デザインに関することを、より掘り下げて学ぶことができます。
ブログの作り方なども掲載されているので、自分のWebサイトを持ちたいと考えている方は、ぜひこの本を読んでみてはいかがでしょうか。
まとめ：HTMLは独学での勉強も可能。学習サイト・本を利用して計画的に勉強しよう。
今回は、HTMLを独学で勉強するにあたってのおすすめの進め方から、具体的に使えるサイト・本を紹介していきました。
HTMLはプログラミング初心者さんでも分かりやすく、独学でも比較的勉強が進めやすい言語の１つです。
ぜひ今回紹介した内容を参考に、ご自身に合いそうなサイト・本を利用しながら勉強を進めてください。
「これからの時代、プログラミングと英語が必要そう…」 それは、間違いではありません。 あと10〜20年の間に、人間が行う仕事の約半分が機械に奪われると言われています。 そのような未来がきたとき、自分自身、そしてあなたの大切な人を守れますか？ セブ島 IT×英語留学の「Kredo」では、 政府公認ITカリキュラム 大学教授レベルのフィリピン人IT教員 スピーキングに特化した英語クラス 日本人スタッフによる学習サポート などによって、 これからの時代に必要なIT×英語のスキルが 初心者からでも最短で身につきます。 KredoのIT留学で人生を変えてみませんか？
Kredo オンラインキャンプなら
プログラミング×英語を身につけてグローバルに活躍しませんか？
当メディアを運営しているKredoでは、プログラミング × 英語が学べる人気オンラインサービス『Kredoオンラインキャンプ』を運営中です。コロナ禍でもオンラインで、プログラミング×英語を身につけた卒業生は海外企業、外資系企業、グローバル企業への就職を果たしています。コロナ禍の今だからこそ、スキルを身につけ転職の準備をしませんか？
