AI時代にHTMLを学ぶ意味は？40・50代の学び直し・副業準備に｜無料から試せる3サイト
「AIがコードを書いてくれるなら、今からHTMLを勉強しても意味がないのでは？」。以前のこの記事を読むと、そう感じる方もいると思います。
私が2020年にHTMLを学んだきっかけは、ブログで使うコードを少しでも理解したかったからでした。今なら、覚える量を増やすよりも、出てきたコードを読んで、必要なところを直し、表示を確かめることを最初の目標にします。
結論からいうと、ブログやWebページを自分で調整したい人には、今もHTMLの基礎を学ぶ意味があります。ただし、ブログを書き始めるために、最初から全部を覚える必要はありません。
この記事では、無料から試せる学習先3つと、AIを補助に使う学び方を整理します。40代・50代の学び直しも、まずは小さな1ページからで十分です。
サービス情報の確認日：2026年9月20日。Progateの体験談・掲載画面は2020年当時のものです。無料範囲や料金は変更されるため、利用前に各公式ページでご確認ください。
AI時代にHTMLを学ぶ意味は「自分で確かめられること」
HTMLは、見出し・段落・リンクなど、Webページの内容と構造を表すための言語です。文字の色や余白などの見た目は、主にCSSが担当します。まずはこの役割の違いが分かれば、何を調べればよいかが見えやすくなります。
たとえば、「文字を大きくしたい」のか、「ここを文章の見出しにしたい」のか。見た目が似ていても、直す場所は同じとは限りません。AIに質問するときも、自分が変えたいことを具体的に伝えられると、回答を確かめやすくなります。
私なら、暗記したタグの数よりも、「この見出しを変えると、どこが変わるか」を説明できることを大切にします。基礎があると、コピーしたコードをそのまま貼るだけで終わりにしなくて済むからです。
何のために学ぶ？最初のゴールを小さく決める
| やりたいこと | まず目指すところ |
|---|---|
| ブログの記事を整えたい | 見出し・段落・リンクの役割を理解する |
| 自己紹介ページを作りたい | HTMLで内容を並べ、CSSで色と余白を調整する |
| Web制作の仕事に関心がある | 小さな作品を作り、希望する仕事で必要なスキルを調べる |
ブログの文章や画像を入れるだけなら、編集画面の機能で済む場面もあります。「HTMLを覚えてからブログを始めよう」と、書くことを後回しにしなくても大丈夫です。
一方、HTMLの入門講座を終えただけで、転職や副業の仕事が決まるわけではありません。仕事につなげたい場合は、希望する業務、作品の完成度、CSSやほかの技術をどこまで求められるかも確認しましょう。
無料から試せるHTML学習サイト3選
3つとも、すべての機能・教材が無料という意味ではありません。Progateとドットインストールには有料の範囲があります。MDNは無料で読める学習資料で、演習サービスとは使い方が異なります。
| 学習先 | 学び方・無料範囲 | 選ぶ目安 |
|---|---|---|
| Progate | スライド＋演習。各コースの冒頭部分が無料 | 説明を読み、自分のペースで手を動かしたい |
| ドットインストール | 短い動画。一部の動画を無料公開 | 操作の流れを見ながら学びたい |
| MDN Web Docs | 無料で読める解説・チュートリアル | 仕組みを調べ、自分のページで試したい |
1．Progate｜読む・書くを交互に進めたい人へ
Progateは、説明を読んでからコードを書く流れで学べます。HTML & CSSのコースは、学習環境を自分で用意せずに始められるため、最初の設定で止まりたくない人の候補になります。
現在の公式FAQでは、無料で利用できるのは各コースの冒頭部分と案内されています。「初級編なら最後まで無料」と思い込まず、レッスン詳細で対象範囲を確認してください。
私が当時気に入ったのも、自分のペースで読み返せるところでした。ただ、演習の手順どおりに進められることと、何もないところから作れることは別です。一区切りついたら、教材と違う文章に書き換えてみると理解を確かめやすくなります。
ProgateのHTML & CSSコースを見る ／ 公式FAQ：無料版と有料プランの違い
2．ドットインストール｜画面の動きを見て学びたい人へ
ドットインストールは、短い動画を見ながら学ぶサービスです。「はじめてのWeb制作」では、プロフィールサイトを作る流れが紹介されています。文章だけでは操作を想像しにくい人は、無料公開の動画から相性を確かめるとよいと思います。
有料プランの対象レッスンや機能もあるため、見たい講座の無料公開表示を確認しましょう。動画を見終えることをゴールにせず、途中で止めて同じ操作を試す使い方がおすすめです。
私も以前に何度か利用しましたが、当時は、スライドを読み返しながら進めるProgateのほうが好みでした。動画が合うか、文章が合うかは人によって違います。人気だけで決めるより、まず1本見てみるほうが判断しやすいです。
ドットインストール「プロフィールサイトを作っていこう」を見る ／ 公式の料金・有料機能を確認する
3．MDN Web Docs｜分からないところを調べながら作りたい人へ
MDNには、HTMLの基本を日本語で読める学習資料があります。見出し、段落、リンク、画像などの役割を確認しながら、自分のファイルで試す学び方ができます。
ただし、Progateのように問題を順番に解くだけで進められる教材ではありません。初めて読むと説明量が多く感じられるかもしれません。最初から全部を読もうとせず、「今日は見出しと段落だけ」と区切るのがよいと思います。
このページではMDNを、私の受講体験としてではなく、学習や確認に使える資料として紹介しています。AIの説明で疑問が残ったときに、基礎を確認する先としても使えます。
私がProgateを使った2020年の体験
当時はPCでHTML & CSS初級編を進めました。スライドで説明を読み、その後にブラウザ上でコードを入力する流れです。画面には入力欄とプレビュー、お手本が並んでいて、書いたものと表示を見比べられる作りでした。
見出しのh2、段落のp、リストのul・li、画像のimgなど、ブログで見かけるタグが出てきたのが印象に残っています。知らない記号の集まりだったものが、「ここは見出し」「ここは画像」と少しずつ読めるようになる。その入口として、取り組みやすいと感じました。
私が当時の初級編を終えるまでにかかったのは、約2時間30分でした。これは2020年の私個人の記録で、現在の講座の所要時間や、読んでいる方の習得時間を示すものではありません。
今振り返ると、一気に終えることよりも、何回かに分けて復習するほうを勧めたいです。「修了した」だけで終わらず、自分の言葉に書き換えられるところまで試すと、学んだことが使いやすくなると思います。
AIも使うなら「教わる→変える→確かめる」の順番で
ここからは、今から始める方に向けて、AIを補助に使う手順を紹介します。あくまで学び方の一例としてご覧ください。
ステップ1：作るものを1つ決める
最初は、名前・短い自己紹介・好きなことを3つ並べたページくらいで十分です。見出し、段落、リストがあれば作れます。完成したかどうかを自分で判断できる大きさにしましょう。
ステップ2：教材で学び、分からないところだけAIに聞く
学習先はまず1つ選びます。AIに頼むなら、最初からページ全部を作ってもらうより、今つまずいている箇所を説明してもらう使い方から始めてみてください。
質問例：「HTML初心者です。h2とpの役割の違いを短く説明してください。そのあと、私が自分で書くための練習問題を1つ出してください。答えはまだ出さないでください」
AIの回答だけで正しいと決めず、教材やMDNの説明と照らし合わせます。会社の非公開情報や個人情報を練習用のコードに混ぜる必要はありません。架空の自己紹介で試せます。
ステップ3：一か所変えて、結果を自分で見る
見出しの文章を変える、リストを1行増やす、CSSで色を変える。ひとつ変更したら、ブラウザで表示を確かめます。いくつも同時に変えると、どの変更が原因だったのか分かりにくくなります。
分からなくなったら、AIには「完成コード」だけでなく、変更した箇所と理由を説明してもらいましょう。例：「この修正前と修正後で何が変わるか、初心者向けに説明してください」。説明と実際の表示が合っているか、最後は自分で確認します。
練習は教材の演習画面やローカルのHTMLファイルで行いましょう。運営中のブログを直接書き換えて試すより、戻せる場所を用意したほうが落ち着いて取り組めます。
お金を払うか迷ったら、先に「足りないもの」を確かめる
無料部分を終えたからといって、すぐに有料プランやスクールへ進む必要はありません。「次の教材を学びたい」「質問できる相手がほしい」など、必要なものが見えてから比較しましょう。
| 今の状態 | 次に試すこと |
|---|---|
| 教材どおりなら作れる | 見本と違う文章・色に変えてみる |
| 説明が難しくて進まない | 文章と動画を切り替え、説明方法との相性を見る |
| 作りたいものに必要な内容が有料 | 学べる範囲・料金・更新や解約の条件を確認する |
| 仕事につなげたい | 希望する業務と必要なスキルを調べ、学習内容を照らし合わせる |
以前の記事では、高い授業料で自分を追い込む考え方にも触れていました。今は、まず無料で触れ、続けられる方法と学ぶ目的を確かめるほうがよいと考えています。金額の大きさが、そのまま上達につながるわけではないからです。
Web制作系の未経験転職を考えている方は、学んだ内容と自分で作ったものを、職務経歴書でどう伝えるかも整理してみましょう。ポータブルスキルの整理と、経験を自己PRにつなげる方法を参考に、これまでの仕事で培った強みと、新しく学んだ技術を分けて書くと伝えやすくなります。
応募先で必要な技術や、入社後に任される仕事を確かめる際は、40代・未経験転職の面接で使える逆質問12例も参考にしてください。学習中のことと、実務で経験したことは区別して伝えましょう。
HTMLの学び直しでよくある質問
40代・50代からでも、最初に取り組める内容ですか？
この記事で勧めているのは、小さなページを作り、変更した結果を確かめるところまでです。学習の速さには個人差があります。年齢だけで判断せず、まず無料部分で、説明の分かりやすさや使える時間を確かめてみてください。
HTMLのタグは全部暗記したほうがよいですか？
最初から全部を覚える必要はありません。見出し・段落・リンク・画像・リストなど、自分が作るものに必要な要素から始めましょう。分からないときに調べて使えることも大切です。
スマホだけで学んでもよいですか？
説明を読むことから始めても構いません。ただ、コードの入力と表示の確認を行き来する練習には、PCがあると取り組みやすいと思います。最初から機材を買い足さず、今ある環境でできる範囲を試しましょう。
どのサイトがいちばんおすすめですか？
読みながら進めたいならProgate、画面の動きを見たいならドットインストール、仕組みを調べながら試したいならMDNが候補です。私の当時の好みはProgateでしたが、全員に同じ方法が合うとは限りません。まず1つ試し、合わなければ切り替えて大丈夫です。
まとめ｜サイトを選んだら、小さく作ってみよう
AIを使える今も、HTMLの基礎は「自分で読んで、直して、確かめる」ために役立ちます。ただし、最初から大量の知識や高額な講座をそろえる必要はありません。
Progate・ドットインストールの無料部分、またはMDNの入門資料から、自分に合いそうなものを1つ選んでみてください。次に、見出しや自己紹介の一文を、自分の言葉へ変えてみる。それが最初の練習になります。
学んだことをどう残すか迷ったら、47歳で書き始めた私のアウトプットの話も参考にしてみてください。上手にまとめる前に、今日分かったことを一行書くだけでも構いません。
今日、自分で作ってみたいのは、どんな小さなページですか？
