HTMLを学ぶ
無料で使える、インタラクティブなHTMLオンライン講座。すべてのレッスンで実際にHTMLを書きます。入力に合わせてプレビューがリアルタイムに更新され、修了すれば無料の修了証明書がもらえます。
348,572+ 人のcoddersが登録中
241 レッスン233 チャレンジ1,193 クイズの問題
- 初心者向け
AIによるコーディングサポート
実践的なインタラクティブレッスン
全レッスンに音声ナレーション付き
知識を確かめるクイズ
無料の修了証明書
シラバス
セクション 1
基礎
セクションを始める開始ウェブページをゼロから作成するための基本構造と構文を学びましょうHTMLの基礎
5 レッスン530テキストと書式設定
6 レッスン1135レシピカード
プロジェクト4 レッスン4コンテンツの追加
5 レッスン837ページレイアウト
5 レッスン930個人プロフィールページ
プロジェクト5 レッスン5フォームと入力 パート1
6 レッスン936フォームと入力 Part 2
7 レッスン1239テーブル
4 レッスン723イベント登録ページ
プロジェクト5 レッスン5最終チャレンジ
4 レッスン4セクション 2
CSSによるスタイリング専用ページ
セクションを始める開始色、レイアウト、スタイルを使ってウェブページに命を吹き込みましょうCSSの追加
4 レッスン725基本セレクター
7 レッスン1247テキストの基礎
8 レッスン1450色と背景
5 レッスン834カフェメニュー
プロジェクト3 レッスン3ボックスモデル パート1
6 レッスン943ボックスモデル パート2
5 レッスン833Flex Box
6 レッスン943レイアウト技法
7 レッスン1151レスポンシブデザインの基礎
6 レッスン1052トンガのWebページ
プロジェクト6 レッスン6セクション 3
CSSマスタリー専用ページ
セクションを始める開始CSSスキルを次のレベルへ引き上げましょう!セレクターを極める:結合
6 レッスン539インタラクティブな疑似クラス
5 レッスン431構造擬似クラス
5 レッスン432ドロップダウンメニューのプロジェクト
4 レッスン4ビジュアルエフェクト
5 レッスン536ランディングページ
5 レッスン5CSS Gridで構築する
4 レッスン426最終チャレンジ
5 レッスン5セクション 4
実践的フロントエンド
セクションを始める開始構造とスタイルを組み合わせて、完全なレスポンシブウェブページをデザインしましょう変数
5 レッスン432モバイルファースト戦略
6 レッスン643テーマ設定とビジュアルスタイル
5 レッスン535UIコンポーネント
6 レッスン642レスポンシブ・パターン
6 レッスン645最終チャレンジ
4 レッスン4セクション 5
JavaScriptの実践
セクションを始める開始HTMLとCSSでJavaScriptがどのように使用されるかを探求しましょうインタラクティブ性/UIコンポーネント
4 レッスン433フォームとバリデーション
3 レッスン324通知とフィードバック
3 レッスン327Toast通知付きフォーム
2 レッスン2ナビゲーション
3 レッスン329テーマ設定とパーソナライズ
2 レッスン217アニメーションとエフェクト
3 レッスン327アニメーション付きナビゲーション
3 レッスン36最終課題
4 レッスン4
HTMLのコース
ブラウザで無料で始められる、実践的なHTMLコース。
日食アニメーション | HTML/CSS プロジェクト
人気このコースでは、素晴らしい「日食」アニメーションを作成します。アニメーションを活用して、魅力的で機能的なユーザーインターフェースを構築する方法を学びましょう。
- 10
- 8
- 1
Instagramページのクローン作成 | フロントエンド・プロジェクト
人気このコースでは、標準的でシンプルな HTML と CSS の手法を練習しながら、Instagramページのクローン・プロジェクトを作成します。
- 16
- 14
- 1
HTML/CSS チャレンジ - パック I
このコースでは、HTMLとCSSの知識を楽しく効果的な方法で試すことができます!
- 11
HTML - 初心者向けサイト
このコースでは、HTMLの基礎知識をテストしながら、画像やテキストを使った自分だけの基本的なサイトを作成します。準備はいいですか?
- 5
- 4
- 1
ボトムナビゲーションバー - HTML/CSSプロジェクト
このコースでは、HTMLを使用してシンプルなボトムナビゲーションバーを作成し、CSSでスタイリングを行います。また、CSSの(:hover)セレクターを使って、簡単なアニメーションを追加する方法を学びます。
- 12
- 11
- 1
YouTubeビデオプレーヤー - HTMLプロジェクト
このプロジェクトでは、HTMLを使ってYouTubeビデオプレーヤーを作成しながら、さまざまな属性について学びます。
- 7
- 5
- 1
実践で学ぶ
実際のコードを書き、データベースをクエリし、ウェブサイトを構築し、AIプロンプトをマスターしましょう。インタラクティブなレッスンで現代の開発者に必要なすべてのスキルを網羅しています。
連続記録を築こう
継続して進捗を見守りましょう!毎日のコーディング習慣を追跡し、フリーズ日で連続記録を守り、毎日参加することで報酬を獲得しましょう。
12 日連続
明日も戻ってきて連続記録を維持しましょう!
January 2026
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
21
22
23
24
25
26
27
28
29
30
ダブル・オア・ナッシング
7日中5日目
連続記録フリーズ
2 left
どこでも学べる
コーディングの旅を持ち歩こう!セットアップ不要、ダウンロード不要:開いてすぐにコーディング開始。iOS、Android、Webで4.9星評価で利用可能。
あなたは一人じゃない
グローバルリーダーボードで競い、友達を招待して報酬を獲得し、お互いの成功を祝いましょう。プログラミングは友達と一緒の方が楽しい!
あらゆる学び方に対応
読む・聴く・自分を試す・AIに聞く・学んだことを調べる。どんな学び方にも対応したレッスンです。
変数は、後でプログラム内で参照できる値を格納する、名前のついた入れ物です。
Pythonでは、名前、イコール記号、格納したい値の順で書くことで作成します。
値は後から変えられます。再代入すると、名前は新しい値を指すようになります。
修了証を取得
完了したすべてのコースで証明書を獲得しましょう。LinkedInプロフィールや履歴書に追加して、雇用主にプログラミングスキルをアピールしましょう。
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を組み合わせたポートフォリオへ進むためのステップとして使う人が多いです。