この講座について
プログラミング未経験の方でも理解しやすいよう、HTML の基礎から段階的に学べます。
- ゴール: HTMLの基礎知識を習得し、簡単なページを組み立てられる
- 伸ばす力: HTML を追加・修正できる
できるようになること
- HTML の基本構造（html / head / body など）を説明できる
- 見出し、段落、リスト、画像、リンクなどの基本要素を使ってページを組み立てられる
- フォーム（入力欄・ボタンなど）をマークアップできる
- header / main / footer など、意味のわかる構造タグを選べる
- 学んだタグを組み合わせて、簡単な自己紹介ページを書ける
よくある質問（FAQ）
このコースは 11 レッスン、クイズ 10 回（計 106 問）、練習問題 15 問です。全体の学習時間はおおよそ 14 時間です。1 日 1 レッスン＋その日のクイズ・練習なら、およそ 2〜3 週間で一通り終えられます。
ペースや理解度は人によって違います。焦らず、理解してから次のレッスンへ進んでください。
大丈夫です。このコースはプログラミング初学者向けです。
HTML はプログラミング言語ではなくマークアップ言語なので、複雑なロジックは必要ありません。基本的なパソコン操作ができれば学習を始められます。
はい。この HTML 基礎講座は無料で利用できます。登録料や月額料金はかかりません。
レッスン、練習問題、クイズ、コードエディタも無料です。学習を続けるためのアカウント作成も無料です。
レッスン一覧
1. HTMLでできることと基本ルール
HTMLの基本概念と文書の基本構造を解説します。
学習するタグ：html, head, meta, title, body
2. 見出し・段落・リンク・画像・強調
HTMLの見出し(h1〜h6)・段落(p)・リンク(a)・画像(img)・強調(strong)などの基本タグを解説します。
学習するタグ：h1, p, a, img, strong
3. リスト・区切り・改行
HTMLのリスト(ul, ol, li)、区切り線(hr)、改行(br)などの文章構造タグの使い方を解説します。
学習するタグ：ul, ol, li, hr, br
4. 親要素と子要素
HTMLにおける親要素と子要素の関係を解説。ネスト構造の考え方を学び、読みやすく正しいHTMLを書く基礎力を身につけます。
5. フォーム
HTMLで入力フォームを作成する方法を解説。テキスト入力欄、ラベル、ボタンの使い方を理解し、ユーザーから情報を受け取る基本を学べます。
学習するタグ：form, input, button, label
6. セレクトボックスとテキストエリア
HTMLでセレクトボックス、ラジオボタン、チェックボックスを使い、プルダウンメニューや複数行入力欄を作成。柔軟なフォーム構築の方法を学べます。
学習するタグ：select, option, radio, checkbox, textarea
7. セクションとナビゲーション
Webページの論理構造を表すHTMLタグを解説。header、nav、main、section、article、aside、footer、divの役割を理解できます。
学習するタグ：section, nav, header, footer, main, article, aside, div
8. table
HTMLの表を構成する基本タグを解説。行と列の仕組みを理解し、セル結合や見出しセルを使って見やすい表を作成する方法を学べます。
学習するタグ：table
9. メタタグとSEOの基礎
HTMLの<head>内に記述するメタ情報を解説。meta、title、link、scriptなど基本タグの役割を学び、SEOに役立つ基礎知識を身につけます。
学習するタグ：meta, head, title, link, script
10. HTMLで1ページWebサイトを制作しよう
これまでに学んだHTMLタグや構造を復習し、シンプルなWebページを作成。実際の制作フローを体験しながら基礎を定着させます。
11. 作ったページを公開しよう！Webページの最終チェックと公開方法
自分のHTMLページが正しく書けているかを確認し、Web上に公開する方法を学習。CodePenを使った基本的な操作も解説します。
クイズ一覧
HTML基礎 レッスン1
HTMLの基本構造とタグについて
HTML基礎 レッスン2
見出し、段落、リンク、画像、強調タグについて
HTML基礎 レッスン3
リスト、区切り線、改行などの文章構造タグについて
HTML基礎 レッスン4
親要素・子要素とネスト構造について
HTML基礎 レッスン5
テキスト入力欄、ラベル、ボタンの使い方
HTML基礎 レッスン6
セレクトボックス、ラジオボタン、チェックボックス、テキストエリア
HTML基礎 レッスン7
セクションとナビゲーション
HTML基礎 レッスン8
表組み（table）の基本構造、th/tdタグ、colspan/rowspan属性について
HTML基礎 レッスン9
メタタグとSEOの基礎について
HTML応用クイズ
HTMLの基本構造、タグ、要素についてのクイズ
練習問題一覧
HTML練習問題 基礎構文
HTMLの基礎構文の理解を確認します。ドラッグ&ドロップでHTMLタグを正しい位置に配置してください。
HTML練習問題 リンク(aタグ)
リンク(aタグ)の理解を確認します。ドラッグ&ドロップでHTMLタグを正しい位置に配置してください。
HTML練習問題 画像(imgタグ)
画像(imgタグ)の理解を確認します。ドラッグ&ドロップでHTMLタグを正しい位置に配置してください。
HTML練習問題 リスト
リストタグの理解を確認します。ドラッグ&ドロップでHTMLタグを正しい位置に配置してください。
HTML練習問題 親要素・子要素
親要素と子要素の関係、開始タグと終了タグの順序を理解します。ドラッグ&ドロップでHTMLタグを正しい位置に配置してください。
HTML練習問題 フォーム
フォームタグの理解を確認します。ドラッグ&ドロップでHTMLタグを正しい位置に配置してください。
HTML練習問題 ラベル
ラベルタグの理解を確認します。ドラッグ&ドロップでHTMLタグを正しい位置に配置してください。
HTML練習問題 セレクトボックス
セレクトボックスタグの理解を確認します。ドラッグ&ドロップでHTMLタグを正しい位置に配置してください。
HTML練習問題 ラジオボタン
ラジオボタンの理解を確認します。ドラッグ&ドロップでHTMLタグを正しい位置に配置してください。
HTML練習問題 チェックボックス
チェックボックスの理解を確認します。ドラッグ&ドロップでHTMLタグを正しい位置に配置してください。
HTML練習問題 テキストエリア
テキストエリアの理解を確認します。ドラッグ&ドロップでHTMLタグを正しい位置に配置してください。
HTML練習問題 セクション要素（header、main、footer）
セクション要素（header、main、footer）の理解を確認します。ドラッグ&ドロップでHTMLタグを正しい位置に配置してください。
HTML練習問題 セクション要素（nav、section、article、aside）
セクション要素（nav、section、article、aside）の理解を確認します。ドラッグ&ドロップでHTMLタグを正しい位置に配置してください。
HTML練習問題 テーブル
テーブルタグの理解を確認します。ドラッグ&ドロップでHTMLタグを正しい位置に配置してください。
HTML練習問題 メタタグ
メタタグの理解を確認します。ドラッグ&ドロップでHTMLタグを正しい位置に配置してください。
コース概要
- 学習時間: 約14時間（レッスン・クイズ・練習問題込み）
- ゴール: 基礎知識（簡単なページを組み立てられる）
- レッスン数: 11レッスン
- クイズ数: 106問
- 練習問題数: 15問
- 難易度: 初級レベル
インストラクター
学習に役立つリソース
HTML練習問題
HTML の練習問題で、学んだ知識を定着させましょう。
HTML練習問題を解くHTMLクイズ
学習した内容の理解度を確認したい場合は、クイズページでテストしてみましょう。
HTMLクイズを受けるHTMLリファレンス
タグの詳しい使い方や属性について知りたい場合は、リファレンスページをご確認ください。
HTMLリファレンスを見るコードエディタ
学んだ内容を自由に試してみたい場合は、コードエディタをご利用ください。
コードエディタを使う実践サンプル集
学んだHTMLの知識を実際のサンプルで確認してみましょう。