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
2つ目は、Udemyです。ドットインストールと同じく、動画で学習できるサービスです。
ドットインストールは無料でしたが、Udemyは有料の動画コンテンツを取り扱っています。
有料だと敷居が高そうだな……と思うかもしれませんが、定期的にセールを行っており、約1,500円程度で購入できます。
HTMLだけでなく、CSS、JavaScriptとセットで学べる動画も多く、質の高いコンテンツが豊富なので、おすすめです。
- こんな人におすすめ
-
- HTML・CSSなどの基礎をまとめて知りたい人
- 質の高いコンテンツで寄り道せず学びたい人
テキストで学ぶ
HTMLのチュートリアルをテキストで学べるおすすめサイト・サービスは、以下の5つです。
- HTMLクイックリファレンス
- MDN – Mozilla
- 東京フリーランス
- w3schools.com
- Progate
ひとつずつ解説しますね。
1. HTMLクイックリファレンス
1つ目は、HTMLクリックリファレンスの「ウェブ制作チュートリアル」です。
HTMLクイックリファレンスは、サイト制作に必要な情報をまとめているリファレンスサイトです。HTMLの書き方をググった時に、目にしたことがある人もいるのではないでしょうか。
「ウェブ制作チュートリアル」は全30章で構成されているため、1日1章すすめるだけで学習できます。
毎日少しずつ進めるだけでサイトが作れるので、これからHTMLを始める方にもおすすめです。
- こんな人におすすめ
-
- HTMLをこれから始めようと思っている人
- 毎日ちょっとずつ学習を進めたい人
2. MDN – Mozilla
2つ目は「MDN – Mozilla」のチュートリアルです。HTMLに限らず、Web入門、CSS、JavaScriptなどのチュートリアルがまとまっています。
それぞれ入門レベル、中級レベル、上級レベルに分かれているので、レベルに合わせてステップアップしていくことができます。
- こんな人におすすめ
-
- HTMLの学習レベルに合わせて学びたい人
- CSS・JavaScriptにも興味がある人
3. 東京フリーランス
3つ目は、東京フリーランスの「30DAYSトライアル」です。1日ごとに実施する内容が決まっており、毎日ひとつずつこなしていくことでHTMLが学べます。
ただHTMLの基礎を学ぶだけでなく、ツールの使い方や、復習期間などもあるため、無理せず学ぶことがができます。
1st、2ndなどレベル分けされており、最終的にWordPressを使ったサイト制作方法も解説しているので、実践的な内容を学びたい方におすすめです。
- こんな人におすすめ
-
- 毎日決まった時間を学習に充てて学びたい人
- HTMLだけでなくサイト制作に必要な知識を網羅したい人
4. W3Schools
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.必須事項を入力してください
ご予約ありがとうございます！
予約が完了しました。ご予約情報とご参加前の準備をご確認ください。
【ご予約情報】○月○日(△) ○○：○○〜
カウンセリング参加に向けてのご準備
②LINE友だち登録
人生を切り開いた卒業生の事例をご紹介！
LINEトークで簡単にお問い合わせができます。
※記入いただいたメールアドレスに確認用メールをお送りしておりますのでご確認ください。
※オンラインカウンセリングはGoogle Meetにて実施します。URLが発行したら別途ご案内いたします。
※メールが届かない場合は、SAMURAI ENGINEERサポート（support@sejuku.net）までご連絡ください。
まとめ
今回は、HTMLを学べるチュートリアルを7つご紹介しました。
お気に入りのチュートリアルが見つかったら、まずは実践してみましょう。
無料で始められるものも多いので、ぜひ挑戦してみてくださいね。
