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の学習で挫折しないための秘訣とは?

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

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


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

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


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

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

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

お急ぎの方はこちらからお問い合わせください。

読み込みに失敗しました。
大変お手数ですが、本ページを再度読み込んでください。

再度読み込んでも、読み込み失敗が起こる場合は
こちらからお問い合わせください。

カウンセリングはオンラインにて実施しております。

※予約完了後に、カウンセリングのためのURLやIDなどをメールにてご案内します

1.ご希望の日時を選択してください

空きあり 満席
前週
次週

2.必須事項を入力してください

必須選択された日時

日時を選択してください

開催場所 オンライン

日時を選択する

必須お名前

必須電話番号

必須メールアドレス

    ご予約により、個人情報の取り扱いおよび利用規約に同意するものとします。

    まとめ

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

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

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

    この記事を書いた人

    【プロフィール】
    DX認定取得事業者に選定されている株式会社SAMURAIのマーケティング・コミュニケーション部が運営。「質の高いIT教育を、すべての人に」をミッションに、IT・プログラミングを学び始めた初学者の方に向け記事を執筆。
    累計指導者数4万5,000名以上のプログラミングスクール「侍エンジニア」、累計登録者数1万8,000人以上のオンライン学習サービス「侍テラコヤ」で扱う教材開発のノウハウ、2013年の創業から運営で得た知見に基づき、記事の執筆だけでなく編集・監修も担当しています。
    【専門分野】
    IT/Web開発/AI・ロボット開発/インフラ開発/ゲーム開発/AI/Webデザイン

    目次