人気ジャーニー
HTMLを学ぶ
無料で使える、インタラクティブなHTMLオンライン講座。すべてのレッスンで実際にHTMLを書きます — タグ、属性、フォーム、リンク、画像、そして実際のWebページの構造まで。入力に合わせてプレビューがリアルタイムに更新され、修了すれば無料の修了証明書がもらえます。
256,507+ 人のcoddersが登録中
- 初心者向け
AIによるコーディングサポート
実践的なインタラクティブレッスン
全レッスンに音声ナレーション付き
知識を確かめるクイズ
無料の修了証明書
シラバス
セクション 1
Fundamentals
セクションを始める開始開く閉じるLearn the core structure and syntax to create web pages from scratchHTMLの基礎
5 レッスン531- 01HTMLとは？チャレンジ
- 02HTMLの基本構造チャレンジクイズ
- 03タグと要素チャレンジクイズ
- 04入れ子構造と終了タグチャレンジクイズ
- 05HTMLのコメントチャレンジクイズ
テキストと書式設定
6 レッスン1135- 01見出しチャレンジマスタリークイズ
- 02段落チャレンジマスタリークイズ
- 03改行チャレンジマスタリークイズ
- 04太字と斜体チャレンジマスタリークイズ
- 05太字と斜体（続き）チャレンジマスタリークイズ
- 06おさらい：書式設定チャレンジ
リストの操作
4 レッスン721- 01順序なしリストチャレンジマスタリークイズ
- 02順序付きリストチャレンジマスタリークイズ
- 03ネストされたリストチャレンジマスタリークイズ
- 04リストのまとめチャレンジ
レシピカード
プロジェクト4 レッスン1- 01プロジェクトの概要チャレンジ
- 02レシピのタイトルと説明プロジェクト
- 03材料プロジェクト
- 04手順プロジェクト
コンテンツの追加
5 レッスン837- 01HTML属性クイズ
- 02リンクチャレンジマスタリークイズ
- 03新しいページへのリンクチャレンジマスタリークイズ
- 04画像チャレンジマスタリークイズ
- 05画像の属性チャレンジマスタリークイズ
ページレイアウト
5 レッスン930- 01Divisionsチャレンジマスタリークイズ
- 02インラインの Spanチャレンジマスタリークイズ
- 03セマンティックタグチャレンジマスタリークイズ
- 04Section と Articleチャレンジマスタリークイズ
- 05レイアウトのまとめチャレンジ
個人プロフィールページ
プロジェクト5 レッスン1- 01プロジェクトの概要チャレンジ
- 02ヘッダーセクションプロジェクト
- 03プロフィール画像プロジェクト
- 04自己紹介セクションプロジェクト
- 05SNSリンクプロジェクト
フォームと入力 パート1
6 レッスン936- 01フォームの基本クイズ
- 02テキスト入力チャレンジマスタリークイズ
- 03入力属性チャレンジマスタリークイズ
- 04パスワードフィールドチャレンジマスタリークイズ
- 05入力用ラベルチャレンジマスタリークイズ
- 06まとめ：フォームの基本チャレンジ
フォームと入力 Part 2
7 レッスン1239- 01ラジオボタンチャレンジマスタリークイズ
- 02チェックボックスチャレンジマスタリークイズ
- 03ドロップダウンチャレンジマスタリークイズ
- 04ボタンチャレンジマスタリークイズ
- 05フォーム内のボタンチャレンジマスタリークイズ
- 06復習：フォーム #1チャレンジ
- 07復習：フォーム #2チャレンジ
テーブル
4 レッスン723- 01テーブルの基本チャレンジマスタリークイズ
- 02キャプションの追加チャレンジマスタリークイズ
- 03行と列の結合チャレンジマスタリークイズ
- 04まとめ - テーブルチャレンジ
イベント登録ページ
プロジェクト5 レッスン1- 01プロジェクトの概要チャレンジ
- 02ヘッダーセクションプロジェクト
- 03イベント詳細セクションプロジェクト
- 04登録フォームプロジェクト
- 05フッターセクションプロジェクト
最終チャレンジ
4 レッスン4- 01シンプルなプロフィールカードチャレンジ
- 02イベント招待カードチャレンジ
- 03シンプルな記事ページチャレンジ
- 04お気に入りの本リストチャレンジ
セクション 2
Styling with CSS
セクションを始める開始開く閉じるBring your web pages to life with colors, layouts, and stylesイントロダクション
5 レッスン540- 01CSSとは？チャレンジクイズ
- 02CSSの構文チャレンジクイズ
- 03CSSのコメントクイズ
- 04headタグチャレンジクイズ
- 05titleタグチャレンジマスタリークイズ
CSSの追加
4 レッスン725- 01インラインCSSチャレンジマスタリークイズ
- 02内部CSSチャレンジマスタリークイズ
- 03外部CSSチャレンジマスタリークイズ
- 04基本のスタイリングチャレンジチャレンジ
基本セレクター
7 レッスン1247- 01セレクター入門チャレンジクイズ
- 02タイプセレクターチャレンジマスタリークイズ
- 03クラスセレクターチャレンジマスタリークイズ
- 04IDセレクターチャレンジマスタリークイズ
- 05グループセレクターチャレンジマスタリークイズ
- 06ユニバーサルセレクターチャレンジマスタリークイズ
- 07セレクションチャレンジチャレンジ
テキストの基本
8 レッスン1450- 01テキストの色チャレンジマスタリークイズ
- 02フォントファミリーチャレンジマスタリークイズ
- 03フォントサイズチャレンジマスタリークイズ
- 04フォントの太さチャレンジマスタリークイズ
- 05テキストの配置チャレンジマスタリークイズ
- 06テキストの装飾チャレンジマスタリークイズ
- 07復習チャレンジ #1チャレンジ
- 08復習チャレンジ #2チャレンジ
色と背景
5 レッスン834- 01背景色チャレンジマスタリークイズ
- 02HEXカラーチャレンジマスタリークイズ
- 03RGBカラーチャレンジマスタリークイズ
- 04RGBAによる透明度チャレンジクイズ
- 05復習チャレンジ #1チャレンジ
カフェメニュー
プロジェクト3 レッスン1- 01タイポグラフィの基本チャレンジ
- 02テキストのスタイリングプロジェクト
- 03カラーと背景プロジェクト
ボックスモデル パート1
6 レッスン943- 01ボックスモデルとは？クイズ
- 02パディングチャレンジマスタリークイズ
- 03マージンチャレンジマスタリークイズ
- 04ボーダーチャレンジマスタリークイズ
- 05幅と高さチャレンジマスタリークイズ
- 06復習チャレンジチャレンジ
ボックスモデル パート2
5 レッスン834- 01Box Sizingチャレンジクイズ
- 02Border Radiusチャレンジマスタリークイズ
- 03Overflowチャレンジマスタリークイズ
- 04Box Shadowチャレンジマスタリークイズ
- 05復習チャレンジチャレンジ
Flexbox
6 レッスン943- 01Flexboxとは？チャレンジクイズ
- 02Flex Directionチャレンジマスタリークイズ
- 03Justify Contentチャレンジマスタリークイズ
- 04Align Itemsチャレンジマスタリークイズ
- 05完璧な中央揃えチャレンジクイズ
- 06Flexbox チャレンジチャレンジ
ログインフォーム
プロジェクト4 レッスン1- 01ボディチャレンジ
- 02フォームコンテナプロジェクト
- 03インプットプロジェクト
- 04ボタンプロジェクト
レイアウト手法
7 レッスン1152- 01ブロック要素とインライン要素チャレンジクイズ
- 02配置の基本チャレンジマスタリークイズ
- 03相対配置チャレンジマスタリークイズ
- 04絶対配置チャレンジマスタリークイズ
- 05固定配置チャレンジマスタリークイズ
- 06Z-Index の基本チャレンジクイズ
- 07復習チャレンジチャレンジ
レスポンシブデザインの基礎
6 レッスン1052- 01レスポンシブデザインとは？チャレンジクイズ
- 02Viewport メタタグチャレンジクイズ
- 03フルイドレイアウトチャレンジマスタリークイズ
- 04Viewport 単位チャレンジマスタリークイズ
- 05メディアクエリの基礎チャレンジマスタリークイズ
- 06フレキシブルイメージチャレンジマスタリークイズ
トンガのウェブページ
プロジェクト6 レッスン1- 01ナビゲーションメニューチャレンジ
- 02ウェルカムヘッダープロジェクト
- 03Aboutセクションプロジェクト
- 04お問い合わせセクションプロジェクト
- 05Viewportタグプロジェクト
- 06メディアクエリプロジェクト
最終チャレンジ
4 レッスン4- 01アイテムの配置チャレンジ
- 02映画リストチャレンジ
- 03結婚式の招待状チャレンジ
- 04フローティング通知チャレンジ
セクション 3
CSS Mastery
セクションを始める開始開く閉じるTake you css skills to the next level!セレクターを極める：結合
6 レッスン539- 01はじめにクイズ
- 02子孫セレクターチャレンジクイズ
- 03子セレクターチャレンジクイズ
- 04隣接兄弟セレクターチャレンジクイズ
- 05一般兄弟セレクターチャレンジクイズ
- 06復習チャレンジチャレンジ
インタラクティブな疑似クラス
5 レッスン431- 01疑似クラスクイズ
- 02ホバーエフェクトチャレンジクイズ
- 03フォーカスエフェクトチャレンジクイズ
- 04アクティブスタイルチャレンジクイズ
- 05復習チャレンジチャレンジ
構造擬似クラス
5 レッスン432- 01構造擬似クラスクイズ
- 02最初の要素を選択するチャレンジクイズ
- 03最後の要素を選択するチャレンジクイズ
- 04パターンの活用：nth-child を使うチャレンジクイズ
- 05復習チャレンジチャレンジ
ドロップダウンメニューのプロジェクト
4 レッスン4- 01サブメニューの追加チャレンジ
- 02サブメニューの表示チャレンジ
- 03さらなるスタイリングチャレンジ
- 04Inputとボタンチャレンジ
ビジュアルエフェクト
5 レッスン536- 01グラデーションチャレンジクイズ
- 02CSS フィルターチャレンジクイズ
- 03Transformチャレンジクイズ
- 04トランジションとホバーエフェクトチャレンジクイズ
- 05復習チャレンジチャレンジ
ランディングページ
5 レッスン5- 01ヘッダーセクションのスタイル設定チャレンジ
- 02ボタンのスタイル設定チャレンジ
- 03セクションのレイアウトチャレンジ
- 04カードのレイアウトチャレンジ
- 05仕上げの調整チャレンジ
CSS Gridで構築する
4 レッスン426- 01Gridの基本チャレンジクイズ
- 02Grid-row アイテムの配置チャレンジクイズ
- 03名前付きエリアチャレンジクイズ
- 04復習チャレンジチャレンジ
Flavor Fiesta ウェブサイト
4 レッスン4- 01グリッドの設定チャレンジ
- 02ヘッダーチャレンジ
- 03メイン部分チャレンジ
- 04フッターチャレンジ
最終チャレンジ
5 レッスン5- 01アクティブメニューのハイライトチャレンジ
- 02テーブルのゼブラストライプチャレンジ
- 03ボタンのホバーエフェクトチャレンジ
- 04Gridカードレイアウトチャレンジ
- 05ぼかしを入れたHero Imageチャレンジ
セクション 4
Practical Frontend
セクションを始める開始開く閉じるCombine structure and style to design complete, responsive web pages変数
5 レッスン432- 01変数クイズ
- 02CSS変数の使用チャレンジクイズ
- 03デザイン・トークン用変数チャレンジクイズ
- 04ローカル変数チャレンジクイズ
- 05復習チャレンジチャレンジ
モバイルファースト戦略
6 レッスン643- 01「モバイルファースト」の意味チャレンジクイズ
- 02モバイルファーストのタイポグラフィチャレンジクイズ
- 03モバイルファーストのナビゲーションチャレンジクイズ
- 04モバイルファーストの画像チャレンジクイズ
- 05モバイルファーストのフォームチャレンジクイズ
- 06復習チャレンジチャレンジ
テーマ設定とビジュアルスタイル
5 レッスン535- 01CSSでのテーマ設定チャレンジクイズ
- 02ダーク/ライトモードの基本チャレンジクイズ
- 03アクセントカラーとハイライトチャレンジクイズ
- 04タイポグラフィのテーマ設定チャレンジクイズ
- 05復習チャレンジチャレンジ
エクストリームスポーツ
3 レッスン3- 01変数チャレンジ
- 02モバイルファーストチャレンジ
- 03テーマ設定チャレンジ
UIコンポーネント
6 レッスン642- 01ドロップダウンメニューチャレンジクイズ
- 02タブチャレンジクイズ
- 03バッジチャレンジクイズ
- 04ツールチップチャレンジクイズ
- 05通知バナーチャレンジクイズ
- 06復習チャレンジチャレンジ
レスポンシブ・パターン
6 レッスン645- 01聖杯レイアウトチャレンジクイズ
- 02カードグリッド・レイアウトチャレンジクイズ
- 03サイドバー + コンテンツ・レイアウトチャレンジクイズ
- 04スプリットスクリーン・レイアウトチャレンジクイズ
- 05スティッキーヘッダー / フッターチャレンジクイズ
- 06復習チャレンジチャレンジ
最終チャレンジ
4 レッスン4- 01プロフィールカードチャレンジ
- 02チョコレートギャラリーのグリッドチャレンジ
- 03世界の七不思議チャレンジ
- 04新・世界の七不思議チャレンジ
セクション 5
JavaScript in Action
セクションを始める開始開く閉じるExplore how javascript is used with html and cssインタラクション / UIコンポーネント
4 レッスン433- 01タブチャレンジクイズ
- 02アコーディオン (開閉)チャレンジクイズ
- 03モーダル (開閉)チャレンジクイズ
- 04ドロップダウンチャレンジクイズ
フォームとバリデーション
3 レッスン325- 01入力バリデーションチャレンジクイズ
- 02カスタムエラーメッセージチャレンジクイズ
- 03送信ボタンチャレンジクイズ
通知とフィードバック
3 レッスン327- 01トーストメッセージチャレンジクイズ
- 02閉じることができるバナーチャレンジクイズ
- 03ローディングインジケーターチャレンジクイズ
トースト通知付きのフォーム
2 レッスン2- 01トーストメッセージを表示するチャレンジ
- 02トーストメッセージを非表示にするチャレンジ
ナビゲーション
3 レッスン329- 01モバイルハンバーガーメニューの切り替えチャレンジクイズ
- 02折りたたみ式サイドナビゲーションチャレンジクイズ
- 03ドロップダウンメニューチャレンジクイズ
テーマ設定とパーソナライズ
2 レッスン217- 01ダーク/ライトテーマチャレンジクイズ
- 02テーマ選択の保存チャレンジクイズ
アニメーションとエフェクト
3 レッスン327- 01CSS トランジションチャレンジクイズ
- 02スクロール時の要素アニメーションチャレンジクイズ
- 03ボタンクリックのアニメーションチャレンジクイズ
アニメーションナビゲーション
3 レッスン36- 01変数チャレンジクイズ
- 02イベントリスナーチャレンジ
- 03CSSトランジションチャレンジ
最終課題
4 レッスン4- 01インタラクティブなFAQアコーディオンチャレンジ
- 02ログインフォームチャレンジ
- 03レスポンシブ・ナビゲーションバーチャレンジ
- 04テーマ機能付きブログページチャレンジ
CoddyでHTMLを学ぶ理由
- ブラウザでHTMLを書くと、レンダリングされたページが横に並んで表示されます。エディタのインストールも環境構築も不要。HTMLコードを変更するたびに結果がすぐ反映されるので、フィードバックの待ち時間がほぼありません。
- モダンでセマンティックなHTML：見出し、リスト、リンク、画像、テーブル、フォーム、そして
<header>、<nav>、<main>、<section>、<footer>といったセマンティックタグ。実際のWebサイト制作で使うHTMLそのものです。 - AIヒントが、閉じ忘れたタグ、属性の構文ミス、アクセシビリティの抜け漏れといったHTMLの間違いを、答えを丸出しにせず直す手助けをします。だからHTMLを書く習慣が自然と身につきます。
- 修了すると無料のHTML証明書がもらえます。Web開発への確かな第一歩として、CSSやJavaScriptの講座と自然に組み合わせられます。
HTML学習についてのよくある質問
HTMLは初心者でも学びやすいですか？
HTMLはIT分野の中でも特に学びやすいものの一つです。プログラミング言語ではなくマークアップ言語なので、ロジックを書くというより、コンテンツの各部分(見出し、段落、リンク、画像など)にラベルを付けていくイメージです。多くの初心者は最初の1時間で、初めての実際のWebページを作り上げます。
HTMLの習得にはどのくらい時間がかかりますか？
HTMLの基礎は、毎日練習すれば1〜2週間でつかめます。実際のプロジェクトを作れる手応えを得るには、ペースに応じて1〜3か月ほど見るとよいでしょう。
CSSやJavaScriptより先にHTMLを学ぶべき?
はい。HTMLはページの構造を定義し、CSSは見た目を整え、JavaScriptで動きをつけます。HTMLを最初に学べば、あとからスタイルを当てたり動かしたりする対象が手元にできます。HTMLコースはあえて短くしてあるので、すぐにCSSとJSへ進めます。
HTMLはプログラミング言語ですか？
厳密にはプログラミング言語ではありません。HTMLはWebコンテンツの構造を記述するためのマークアップ言語です。それ自体には変数も条件分岐もループもありません。Webページ上での実際のプログラミングはJavaScriptが担っており、こちらは別のコースで扱っています。
HTMLをオンラインで無料で学べますか？
はい。インタラクティブなHTMLコースは無料です — レッスン、コーディング演習、HTMLのライブプレビュー、修了証まで含まれています。すべてブラウザ上で動くので、エディタやツールをインストールしなくてもすぐに始められます。
HTMLコースを修了すると修了証はもらえますか？
はい。HTMLコースを修了すると、無料の修了証がもらえます。履歴書に書いたりLinkedInでシェアしたりできる、検証可能な実績の証——HTML、CSS、JavaScriptを組み合わせたポートフォリオへ進むためのステップとして使う人が多いです。
