HTMLを学べるチュートリアル7選!挫折しないための秘訣も解説


HTMLをチュートリアルしながら学ぶ方法はあるのかな…
HTMLのチュートリアルでおすすめのサイト・サービスはないかな?

Webサイト制作がしたくてHTMLを学び始めてみたものの、具体的な書き方がいまいちわからず、困っている人もいるのではないでしょうか。

HTMLタグの書き方自体はわかっても、どんなタイミングで何を使えばいいか、わからない方は多いです。

こんにちは! フリーランスエンジニア兼テックライターのワキザカです。

この記事では、HTMLを学べるチュートリアルを7つご紹介します。

学習に挫折しないための秘訣も解説しているので、ぜひ参考にしてみてくださいね。

この記事はこんな人のために書きました。

  • HTMLの学習におすすめのチュートリアルを知りたい人
  • HTMLのチュートリアルを効率的に進める秘訣を知りたい人
  • HTMLの学習で挫折しないための秘訣を知りたい人

HTMLの学習におすすめのチュートリアル7選

まず、HTMLの学習におすすめのチュートリアルを7つ紹介します。動画・テキストにわけて紹介するので、好きな学習方法で試してみてくださいね。

動画で学ぶ

HTMLのチュートリアルを動画で学べるおすすめサービスは、以下の2つです。

  • ドットインストール
  • Udemy

ひとつずつ解説しますね。

1. ドットインストール


1つ目は、ドットインストールです。1動画5分程度で学べるため始めやすく、続けやすいことが特徴です。

「はじめてのHTML」では、簡単なプロフィールサイトを作る方法を学ぶことができます。HTML初心者の方でも動画を見ながら作れるので、おすすめです。


こんな人におすすめ

  • HTMLをこれから始めようと思っている人
  • 毎日ちょっとずつ学習を進めたい人


2. Udemy


引用元:Udemy  https://www.udemy.com/

2つ目は、Udemyです。ドットインストールと同じく、動画で学習できるサービスです。

ドットインストールは無料でしたが、Udemyは有料の動画コンテンツを取り扱っています。

有料だと敷居が高そうだな......と思うかもしれませんが、定期的にセールを行っており、約1,500円程度で購入できます。

HTMLだけでなく、CSSJavaScriptとセットで学べる動画も多く、質の高いコンテンツが豊富なので、おすすめです。


こんな人におすすめ

  • HTML・CSSなどの基礎をまとめて知りたい人
  • 質の高いコンテンツで寄り道せず学びたい人


テキストで学ぶ

HTMLのチュートリアルをテキストで学べるおすすめサイト・サービスは、以下の5つです。

  • HTMLクイックリファレンス
  • MDN - Mozilla
  • 東京フリーランス
  • w3schools.com
  • Progate

ひとつずつ解説しますね。

1. HTMLクイックリファレンス


引用元:ウェブ制作チュートリアル-HTMLクイックリファレンス http://www.htmq.com/tutorial/

1つ目は、HTMLクリックリファレンスの「ウェブ制作チュートリアル」です。

HTMLクイックリファレンスは、サイト制作に必要な情報をまとめているリファレンスサイトです。HTMLの書き方をググった時に、目にしたことがある人もいるのではないでしょうか。

「ウェブ制作チュートリアル」は全30章で構成されているため、1日1章すすめるだけで学習できます。

毎日少しずつ進めるだけでサイトが作れるので、これからHTMLを始める方にもおすすめです。


こんな人におすすめ

  • HTMLをこれから始めようと思っている人
  • 毎日ちょっとずつ学習を進めたい人


2. MDN - Mozilla


引用元:チュートリアル | MDN - Mozilla https://developer.mozilla.org/ja/docs/Web/Tutorials

2つ目は「MDN - Mozilla」のチュートリアルです。HTMLに限らず、Web入門、CSS、JavaScriptなどのチュートリアルがまとまっています。

それぞれ入門レベル、中級レベル、上級レベルに分かれているので、レベルに合わせてステップアップしていくことができます。


こんな人におすすめ

  • HTMLの学習レベルに合わせて学びたい人
  • CSS・JavaScriptにも興味がある人


3. 東京フリーランス


引用元:30DAYSトライアル | 東京フリーランス https://tokyofreelance.jp/category/daily-trial/

3つ目は、東京フリーランスの「30DAYSトライアル」です。1日ごとに実施する内容が決まっており、毎日ひとつずつこなしていくことでHTMLが学べます。

ただHTMLの基礎を学ぶだけでなく、ツールの使い方や、復習期間などもあるため、無理せず学ぶことがができます。

1st、2ndなどレベル分けされており、最終的にWordPressを使ったサイト制作方法も解説しているので、実践的な内容を学びたい方におすすめです。


こんな人におすすめ

  • 毎日決まった時間を学習に充てて学びたい人
  • HTMLだけでなくサイト制作に必要な知識を網羅したい人


4. W3Schools


引用元:W3Schools Online Web Tutorials https://www.w3schools.com/

4つ目は、W3Schoolsの「W3Schools Online Web Tutorials」です。

以下のように解説ページが細かく分かれているため、ひとつずつ理解して学びたい人におすすめです。

  • はじめに
  • 基本
  • HTML要素
  • HTML属性
  • HTML見出し

また、HTMLを書いて学べる「エディタ-ページ」もあります。学んだ知識をすぐに試せるので、復習もできますね。

英語サイトですが、Google Chromeの日本語翻訳機能を利用すれば、日本語としても利用できます。


こんな人におすすめ

  • 基礎からひとつずつ丁寧に学習を進めたい人
  • HTMLを実際に書いて知識を定着させたい人


5. Progate


5つ目は、Progateです。Progateは、以下の手順で学習ができるサービスです。


Progateの学習の流れ

  • スライドを見て学ぶ
  • 練習問題を解いて知識を定着させる


また、ゼロからHTMLを書いて腕試しできる「道場コース」もあります。自分の学習レベルを確認しつつ、HTMLの学習を進めたい方におすすめです。


こんな人におすすめ

  • 基礎知識 + 実践問題を通してスキルを鍛えたい人
  • ゲームのようにひとつずつこなしてHTMLを学びたい人


HTMLのチュートリアルを効率的に進める秘訣は基礎を先に学ぶこと

ここまで、おすすめのチュートリアルを紹介しました。ただ、いざチュートリアルを始めてみると、以下のように思ってします方も多いです。

入門のところを見て始めてみたけど、細かい用語とか、概要レベルで躓いてしまった......

HTMLの概要がわからないと、チュートリアルを見てもわからないことが多いです。そのため、先にHTMLの基礎を学びましょう。

以下でHTMLの基礎をまとめているので、ぜひ参考にしてみてくださいね。

HTMLとは?基本のタグやできることを世界一わかりやすく解説!
更新日 : 2021年10月1日

HTMLの学習で挫折しないための秘訣とは?

チュートリアルを完遂すればスキルが身につくのはわかるけど、時間もかかるし続けられるか不安だなぁ…と思っている方もいるのではないでしょうか。

「プログラミングは挫折しやすい」という話はよく聞きますし、独学で学ぶと以下のような理由で挫折してしまう人も多いです。


チュートリアル完遂前に挫折してしまう理由

  • チュートリアル完遂までが長くモチベーションが保てない
  • わからないことをググっても、ひとりで解決できない
  • チュートリアル通りにやってても、チュートリアルと同じ結果にならない


チュートリアルの学習で挫折しないためにも、メンターをつけることがおすすめです。

侍エンジニアでは、ただメンターをつけて相談できるだけでなく、目的に合わせてスケジュールも一緒に考えることもできます。

以下から無料レッスンが受けられるので、予定を合わせて相談してみてはいかがでしょうか。

まとめ

今回は、HTMLを学べるチュートリアルを7つご紹介しました。

お気に入りのチュートリアルが見つかったら、まずは実践してみましょう。

無料で始められるものも多いので、ぜひ挑戦してみてくださいね。

Writer

Sanshiro Wakizaka

フリーランス

北海道出身の30歳で、フリーランスエンジニア兼テックライターとして活動中。新卒入社したメーカー系のIT企業で、システムエンジニアとして約5年勤務。

Webアプリ、業務アプリ開発において、要件定義 ~ 運用保守まで様々な経験あり。また3歳の娘がいる1児のパパで、日々娘との時間を確保するために仕事を頑張っています!
侍エンジニアでは、【誰でもわかるレベルのわかりやすさ】を意識して、記事を執筆中。

あなたの目的に合わせた
SAMURAI ENGINEERの運営サービス

SAMURAI ENGINEER Pro

未経験でも挫折しないプログラミングスクール

詳細はこちら

SAMURAI ENGINEER Plus

日本最大級のサブスク型オンラインITスクール

詳細はこちら

SAMURAI ENGINEER Freelance

「一人で稼げる」スキルを身につける

詳細はこちら