Menu
CoddyTech
学習を始める
flag Ja icon日本語down icon
人気ジャーニー

HTMLを学ぶ

無料で使える、インタラクティブなHTMLオンライン講座。すべてのレッスンで実際にHTMLを書きます。入力に合わせてプレビューがリアルタイムに更新され、修了すれば無料の修了証明書がもらえます。

学習を始める(無料)
シラバスを見るHTMLプレイグラウンド

336,814+ 人のcoddersが登録中

241 レッスン212 チャレンジ1,193 クイズの問題

  • 初心者向け
  • sparkles iconAIによるコーディングサポート
  • hint icon実践的なインタラクティブレッスン
  • volume On icon全レッスンに音声ナレーション付き
  • quiz icon知識を確かめるクイズ
  • certificate icon無料の修了証明書

シラバス

5 セクション6 プロジェクト241 レッスン212 チャレンジ1,193 クイズの問題
  1. セクション 1

    基礎

    セクションを始める開始開く閉じる    ウェブページをゼロから作成するための基本構造と構文を学びましょう60 レッスン75 チャレンジ251 問題3 プロジェクト

    HTMLの基礎

    5 レッスン530

    テキストと書式設定

    6 レッスン1135

    リストの操作

    4 レッスン721

    レシピカード

    プロジェクト4 レッスン1

    コンテンツの追加

    5 レッスン837

    ページレイアウト

    5 レッスン930

    個人プロフィールページ

    プロジェクト5 レッスン1

    フォームと入力 パート1

    6 レッスン936

    フォームと入力 Part 2

    7 レッスン1239

    テーブル

    4 レッスン723

    イベント登録ページ

    プロジェクト5 レッスン1

    最終チャレンジ

    4 レッスン4
  2. セクション 2

    CSSによるスタイリング専用ページ

    セクションを始める開始開く閉じる    色、レイアウト、スタイルを使ってウェブページに命を吹き込みましょう76 レッスン100 チャレンジ418 問題3 プロジェクト

    はじめに

    5 レッスン540

    CSSの追加

    4 レッスン725

    基本セレクター

    7 レッスン1247

    テキストの基礎

    8 レッスン1450

    色と背景

    5 レッスン834

    カフェメニュー

    プロジェクト3 レッスン1

    ボックスモデル パート1

    6 レッスン943

    ボックスモデル パート2

    5 レッスン833

    Flex Box

    6 レッスン943

    ログインフォーム

    プロジェクト4 レッスン1

    レイアウト技法

    7 レッスン1151

    レスポンシブデザインの基礎

    6 レッスン1052

    トンガのWebページ

    プロジェクト6 レッスン1

    最終チャレンジ

    4 レッスン4
  3. セクション 3

    CSSマスタリー専用ページ

    セクションを始める開始開く閉じる    CSSスキルを次のレベルへ引き上げましょう！43 レッスン40 チャレンジ164 問題

    セレクターを極める：結合

    6 レッスン539

    インタラクティブな疑似クラス

    5 レッスン431

    構造擬似クラス

    5 レッスン432

    ドロップダウンメニューのプロジェクト

    4 レッスン4

    ビジュアルエフェクト

    5 レッスン536

    ランディングページ

    5 レッスン5

    CSS Gridで構築する

    4 レッスン426

    Flavor Fiesta ウェブサイト

    4 レッスン4

    最終チャレンジ

    5 レッスン5
  4. セクション 4

    実践的フロントエンド

    セクションを始める開始開く閉じる    構造とスタイルを組み合わせて、完全なレスポンシブウェブページをデザインしましょう35 レッスン34 チャレンジ197 問題

    変数

    5 レッスン432

    モバイルファースト戦略

    6 レッスン643

    テーマ設定とビジュアルスタイル

    5 レッスン535

    エクストリームスポーツ

    3 レッスン3

    UIコンポーネント

    6 レッスン642

    レスポンシブ・パターン

    6 レッスン645

    最終チャレンジ

    4 レッスン4
  5. セクション 5

    JavaScriptの実践

    セクションを始める開始開く閉じる    HTMLとCSSでJavaScriptがどのように使用されるかを探求しましょう27 レッスン27 チャレンジ163 問題

    インタラクティブ性/UIコンポーネント

    4 レッスン433

    フォームとバリデーション

    3 レッスン324

    通知とフィードバック

    3 レッスン327

    Toast通知付きフォーム

    2 レッスン2

    ナビゲーション

    3 レッスン329

    テーマ設定とパーソナライズ

    2 レッスン217

    アニメーションとエフェクト

    3 レッスン327

    アニメーション付きナビゲーション

    3 レッスン36

    最終課題

    4 レッスン4

HTMLのコース

ブラウザで無料で始められる、実践的なHTMLコース。

日食アニメーション | HTML/CSS プロジェクト

人気

このコースでは、素晴らしい「日食」アニメーションを作成します。アニメーションを活用して、魅力的で機能的なユーザーインターフェースを構築する方法を学びましょう。

  • 10
  • 2

Instagramページのクローン作成 | フロントエンド・プロジェクト

人気

このコースでは、標準的でシンプルな HTML と CSS の手法を練習しながら、Instagramページのクローン・プロジェクトを作成します。

  • 16
  • 5

YouTubeビデオプレーヤー - HTMLプロジェクト

人気

このプロジェクトでは、HTMLを使ってYouTubeビデオプレーヤーを作成しながら、さまざまな属性について学びます。

  • 7
  • 1

JavaScript DOM メソッド

このコースでは、最もよく使われる JavaScript の DOM メソッドとその使い方について学びます！

  • 13

ストップウォッチ - HTML/CSS/JS プロジェクト

このプロジェクトでは、HTML、CSS、JavaScriptを使用して、基本的なストップウォッチを作成します。

  • 10
  • 3

HTML/CSS チャレンジ - パック I

このコースでは、HTMLとCSSの知識を楽しく効果的な方法で試すことができます！

  • 11
26件のすべてのHTMLコースを見る →
使える機能
コーディングを学ぶために使うすべて

実践で学ぶ

実際のコードを書き、データベースをクエリし、ウェブサイトを構築し、AIプロンプトをマスターしましょう。インタラクティブなレッスンで現代の開発者に必要なすべてのスキルを網羅しています。

playground.js
コードエディタ
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3    return greeting + " " + name
4}
5
bottombar Collapse icon
テスト #1test Case Success icon
テスト #2test Case Success icon
テスト #3test Case Failure icon
入力
"Alex"
出力
"Hello, Coddy! Alex"

連続記録を築こう

継続して進捗を見守りましょう！毎日のコーディング習慣を追跡し、フリーズ日で連続記録を守り、毎日参加することで報酬を獲得しましょう。

12 日連続

明日も戻ってきて連続記録を維持しましょう！

fire Filled icon
left icon

January 2026

right icon

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

product Double Or Nothing icon

ダブル・オア・ナッシング

7日中5日目

fire Freeze icon

連続記録フリーズ

2 left

どこでも学べる

コーディングの旅を持ち歩こう！セットアップ不要、ダウンロード不要 - 開いてすぐにコーディング開始。iOS、Android、Webで4.9星評価で利用可能。

Python
7ストリーク
250スコア
5エネルギー
変数
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Right Done icon
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Left Done icon
journey Hex Active Base iconjourney Hex Active Shadow iconjourney Hex Active Top iconjourney Lesson Theory Challenge icon
続ける
journey Path Right icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson Theory Challenge icon
journey Path Left icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson All icon
ジャーニー
目標
リーダーボード
プロフィール
4.9
星星星星星
評価

あなたは一人じゃない

グローバルリーダーボードで競い、友達を招待して報酬を獲得し、お互いの成功を祝いましょう。プログラミングは友達と一緒の方が楽しい！

チャレンジャーリーグ
チャレンジャーリーグ上位7名が昇格
leaderboard First icon1
avatar 1 icon
fire Filled icon
Alex7+ Days
2840
leaderboard Second icon2
avatar 2 icon
fire Filled icon
Jordan7+ Days
2650
leaderboard Third icon3
avatar 3 icon
fire Filled icon
Sam7+ Days
2420
4
avatar 4 icon
Casey
2180
5
avatar placeholder icon
fire Filled icon
Morgan7+ Days
1950
leaderboard Arrow Up icon昇格ゾーンleaderboard Arrow Up icon

あらゆる学び方に対応

読む・聴く・自分を試す・AIに聞く・学んだことを調べる。どんな学び方にも対応したレッスンです。

変数の入門
音声

変数は、後でプログラム内で参照できる値を格納する、名前のついた入れ物です。

Pythonでは、名前、イコール記号、格納したい値の順で書くことで作成します。

値は後から変えられます。再代入すると、名前は新しい値を指すようになります。

1xSarah

修了証を取得

完了したすべてのコースで証明書を獲得しましょう。LinkedInプロフィールや履歴書に追加して、雇用主にプログラミングスキルをアピールしましょう。

Coddy修了証明書
これは以下を証明します山田 太郎が正常に完了しました
python iconPythonの基礎
認証済み
日付2026年1月
LinkedInLinkedInに追加

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を組み合わせたポートフォリオへ進むためのステップとして使う人が多いです。

このコースを含む学習パス

このコースは、より長いパスの1ステップです。メンターが教える順番で並んだ複数のコースで、それぞれに無料の修了証があります。

Coddyのプログラミング言語のイラスト

CoddyでHTMLを学ぼう

始める