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

HTMLを学ぶ

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

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

281,604+ 人のcoddersが登録中

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

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

シラバス

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

    Fundamentals

    セクションを始める開始開く閉じる    Learn the core structure and syntax to create web pages from scratch60 レッスン75 チャレンジ252 問題3 プロジェクト

    HTMLの基礎

    5 レッスン531

    テキストと書式設定

    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

    Styling with CSS専用ページ

    セクションを始める開始開く閉じる    Bring your web pages to life with colors, layouts, and styles76 レッスン100 チャレンジ419 問題3 プロジェクト

    イントロダクション

    5 レッスン540

    CSSの追加

    4 レッスン725

    基本セレクター

    7 レッスン1247

    テキストの基本

    8 レッスン1450

    色と背景

    5 レッスン834

    カフェメニュー

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

    ボックスモデル パート1

    6 レッスン943

    ボックスモデル パート2

    5 レッスン834

    Flexbox

    6 レッスン943

    ログインフォーム

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

    レイアウト手法

    7 レッスン1151

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

    6 レッスン1052

    トンガのウェブページ

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

    最終チャレンジ

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

    CSS Mastery専用ページ

    セクションを始める開始開く閉じる    Take you css skills to the next level!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

    Practical Frontend

    セクションを始める開始開く閉じる    Combine structure and style to design complete, responsive web pages35 レッスン34 チャレンジ197 問題

    変数

    5 レッスン432

    モバイルファースト戦略

    6 レッスン643

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

    5 レッスン535

    エクストリームスポーツ

    3 レッスン3

    UIコンポーネント

    6 レッスン642

    レスポンシブ・パターン

    6 レッスン645

    最終チャレンジ

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

    JavaScript in Action

    セクションを始める開始開く閉じる    Explore how javascript is used with html and css27 レッスン27 チャレンジ163 問題

    インタラクション / UIコンポーネント

    4 レッスン433

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

    3 レッスン324

    通知とフィードバック

    3 レッスン327

    トースト通知付きのフォーム

    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

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

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

  • 10
  • 3

ボトムナビゲーションバー - HTML/CSSプロジェクト

このコースでは、HTMLを使用してシンプルなボトムナビゲーションバーを作成し、CSSでスタイリングを行います。また、CSSの(:hover)セレクターを使って、簡単なアニメーションを追加する方法を学びます。

  • 12
  • 2

DOMプロジェクト：電卓

このコースでは、HTML、CSS、JSを使用して、インタラクティブなシンプルな電卓を作成します。

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

Learn by Doing

Write real code, query databases, build websites, and master AI prompts. Our interactive lessons cover every skill modern developers need.

playground.js
Code Editor
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3    return greeting + " " + name
4}
5
bottombar Collapse icon
Test #1test Case Success icon
Test #2test Case Success icon
Test #3test Case Failure icon
Input
"Alex"
Output
"Hello, Coddy! Alex"

Build Your Coding Streak

Stay consistent and watch your progress grow! Track your daily coding habit, protect your streak with freeze days, and earn rewards for showing up every day.

12 days streak

Return tomorrow to keep your streak!

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

Double or Nothing

Day 5 of 7

fire Freeze icon

Streak Freeze

2 left

Code Anywhere, Anytime

Take your coding journey on the go! No setup, no downloads - just open and start coding. Available on iOS, Android and Web with 4.9 star ratings.

Python
7Streak
250Score
5Energy
Variables
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
CONTINUE
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
Journey
Goals
Leaderboard
Profile
4.9
StarStarStarStarStar
Rating

You're Not Alone in This

Compete on global leaderboards, invite friends to earn rewards, and celebrate each other's wins. Coding is better with friends!

Challenger League
Challenger LeagueTop 7 advance
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 iconPromotion zoneleaderboard Arrow Up icon

Every way to learn

Read, listen, test yourself, ask the AI, or look up anything you've already covered. Every lesson meets you where you are.

Intro to Variables
Audio

A variable is a named container that stores a value you can reference later in your program.

In Python, you create one by writing the name, an equals sign, then the value you want to store.

The value can change over time - reassigning the name simply points it to a new value.

1xSarah

Prove Your Skills

Earn certificates for every course you complete. Add them to your LinkedIn profile and resume to showcase your coding expertise to employers.

CoddyCertificate of Completion
This certifies thatJohn Doehas successfully completed
PythonPython Fundamentals
Verified
DateJan 2026
LinkedInAdd to 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を組み合わせたポートフォリオへ進むためのステップとして使う人が多いです。
Coddy programming languages illustration

CoddyでHTMLを学ぼう

始める