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とは?基本のタグやできることを初心者向けにわかりやすく解説
更新日:2022年11月16日

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

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

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

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

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

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

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

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

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

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

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

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

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

空きあり 満席
前週
次週

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

必須選択された日時

日時を選択してください

開催場所 オンライン

日時を選択する

必須お名前

必須電話番号

必須メールアドレス

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

まとめ

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

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

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

プログラミング学習の挫折率は約90%と言われています。学習を成功させるには、モチベーションを維持して成長を実感できる環境が必要です。

侍エンジニアなら「現役エンジニア講師」、「学習コーチ」、「Q&A掲示板」のトリプルサポート体制であなたの学習をサポートするほか、オーダーメイドカリキュラムで必要なことだけを学べるため、さまざまなランキングでNo1という実績を挙げています。

挫折せず最短でプログラミングを習得したいなら侍エンジニアがおすすめです!

詳しくはこちら

Writer

Sanshiro Wakizaka

フリーランス

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

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

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

SAMURAI ENGINEER Pro

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

詳細はこちら

SAMURAI TERAKOYA

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

詳細はこちら

SAMURAI ENGINEER Freelance

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

詳細はこちら
ページ上部へ戻る
Close