0Pricing
HTML Academy icon

HTML Academy

HTMLWebFrontendBeginner

HTML Academyでウェブ開発の強固な基礎を構築し、HTMLを学びます。

🤖 AI 搭載📚 40 コース👥 100,000+ ユーザー⭐ 4.9 評価
コース概要

HTML: すべてのウェブページの背後にある言語

HTMLはウェブの構造的基礎です — すべてのブラウザタブ、フォーム送信、埋め込まれたビデオはマークアップから始まります。このトラックは、有効なドキュメントを支配するルールから、モダンな本番環境のサイトで使用されるブラウザAPIとコンポーネントモデルまで、HTMLの本当の流暢性を構築します。目標は単にタグを書くだけでなく、各要素が存在する理由と、それがブラウザ、支援技術、検索エンジンに何を信号するかを理解することです。

学べること

ドキュメント構造、テキストコンテンツ、リンク、画像、リストから始めて、テーブル、フォーム、フォーム検証属性へと進みます。このトラックはセマンティックHTML5要素、<head>とメタデータ、オーディオとビデオ、ARIAロールと属性を含むアクセシビリティの基礎をカバーします。その後のコースではカスタムデータ属性、HTMLテンプレート、CanvasとSVG要素、Web Storage、ドラッグ・アンド・ドロップAPI、SEOとソーシャルメタタグ、HTMLメールテンプレートに対応します。高度なセクションでは、Shadow DOM、Web Componentsとカスタム要素、HTMLモジュールとインポートマップ、プログレッシブエンハンスメント、国際化、セキュリティ、HistoryとNavigation API、Intersection Observer、Progressive Web AppのためのHTMLの構築について深掘りします。

学習パス

40のコースはA1からA2、B1からB2へと進み、HTMLスケールに関するC1キャップストーンで完了します。A1およびA2コースは必須要素 — ドキュメント構造、セマンティック要素、フォーム、メタデータを確立します。B1ではアクセシビリティ、ARIA、Canvas、SVG、ブラウザストレージを導入します。B2が最大ブロックで、Web Components、Shadow DOM、パフォーマンス、セキュリティ、国際化、Intersection Observerをカバーします。最終的なC1コース、HTML at Scaleは、HTMLが大規模なコードベース全体で作成、テスト、メンテナンスされる場合に重要なパターンと制約に対応します。

仕組み

各コースは短く、実践的なレッスンに分かれており、組み込みコードエディタでリアルタイムフィードバック付きで完了します。困ったときはいつでもAIチューターが利用でき、自分のペースで進むことができます — 各レッスンは自己完結しているため、後で任意のトピックをリファレンスとして戻って参照できます。

学習を始める →

学び方

🎯
インタラクティブレッスン
リアルタイムフィードバック付きの実践的なコード演習
🤖
AIチューター
わからないときは、AIが即座にサポート
💻
組み込みエディタ
ブラウザで直接コードを書いて実行
🏆
認定資格
コース完了時に認定資格を取得
カリキュラム

40コース

HTML Academyラーニングパスのすべてのコース

01

HTMLドキュメント構造

A13レッスン

ブラウザがHTMLを解析する仕組み、DOCTYPEの役割、html、head、body要素がすべてのWebページを整理する方法を学びます。

02

テキストコンテンツ要素

A14レッスンPRO

HTMLのテキストタグを使って、見出し、段落、強調、インライン要素、空白の制御を習得します。

03

リンクとナビゲーション

A14レッスンPRO

アンカー要素、絶対URLと相対URL、新しいタブで開くリンク、フラグメント識別子を使ってナビゲーションを構築します。

04

画像と図

A14レッスンPRO

img、srcset、picture要素、意味のあるfigureキャプションを使って、画像をレスポンシブに表示します。

05

リスト

A14レッスンPRO

適切な入れ子構造とセマンティックな意味を持つ、順序なしリスト、順序付きリスト、説明リストを作成します。

06

テーブル

A24レッスンPRO

適切な構造、セルの結合、テーブルセクションを備えたアクセシブルなデータテーブルを構築します。

07

HTML属性とグローバル属性

A24レッスンPRO

すべてのHTML要素で使われるid、class、style、hidden、tabindex、カスタムdata-*属性について理解します。

08

HTMLフォームの基礎

A24レッスンPRO

inputタイプ、ラベル、ボタン、form要素のaction属性とmethod属性を使って、アクセシブルなWebフォームを構築します。

09

高度なフォームコントロール

A24レッスンPRO

ドロップダウン、textarea、チェックボックスグループ、ラジオボタン、datalistによるオートコンプリートでフォームを強化します。

10

フォームのバリデーション属性

A24レッスンPRO

required、pattern、min、maxなどのHTML5バリデーション属性を使い、送信前にユーザー入力を検証します。

11

セマンティックHTML5

A24レッスンPRO

汎用的なdivを、header、nav、main、footer、article、sectionなどの意味を持つHTML5要素に置き換えます。

12

その他のセマンティック要素

A24レッスンPRO

aside、details、summary、progress、meterを学び、ページにより豊かな意味とインタラクティブ性を加えます。

13

HTMLのheadとメタデータ

A24レッスンPRO

headセクションを習得します。title、metaタグ、viewport、canonical URL、robotsディレクティブ、faviconについて学びます。

14

オーディオとビデオ要素

A24レッスンPRO

HTML5でオーディオとビデオをネイティブに埋め込み、複数の形式を提供し、trackとWebVTTで字幕を追加します。

15

HTMLアクセシビリティの基礎

B14レッスンPRO

WCAGのレベル、見出しの階層、代替テキストの方針、包括的なWebページのためのキーボードナビゲーションを理解します。

16

ARIAロールと属性

B14レッスンPRO

ARIAロール、ラベル、説明を使ってアクセシビリティを高め、まずネイティブHTMLを使うという原則を学びます。

17

カスタムデータ属性

B14レッスンPRO

data-*属性、dataset API、CSSセレクターを使って、HTML要素にカスタムメタデータを保存・取得します。

18

HTMLテンプレート

B14レッスンPRO

template要素で非アクティブなマークアップを定義し、効率的に複製し、innerHTMLを使ったレンダリングと比較します。

19

Canvas要素

B14レッスンPRO

2Dキャンバスに図形、テキスト、画像を描画し、requestAnimationFrameでアニメーションさせます。

20

HTMLのSVG

B14レッスンPRO

スケーラブルベクターグラフィックスをインラインで埋め込み、基本図形を使い、viewBoxを制御し、CSSでSVGをアニメーションさせます。

21

iframeと埋め込みコンテンツ

B14レッスンPRO

iframeで外部コンテンツを埋め込み、セキュリティのためのサンドボックス化を理解し、パフォーマンス向上のために遅延読み込みを使います。

22

HTML Web Storage

B14レッスンPRO

localStorageとsessionStorageでクライアント側のデータを保存し、storageイベントを監視し、セキュリティガイドラインに従います。

23

ドラッグ&ドロップAPI

B14レッスンPRO

HTML5 Drag and Drop APIとdataTransferオブジェクトを使って、ドラッグ&ドロップ操作を実装します。

24

SEOとソーシャルメタデータ

B14レッスンPRO

OpenGraph、Twitter Cards、JSON-LD、hreflangを使って、検索エンジンとソーシャル共有向けにページを最適化します。

25

HTMLメールテンプレート

B14レッスンPRO

テーブルベースのレイアウト、インラインスタイル、各種メールクライアントに対応した画像技法を使って、メール向けHTMLを構築します。

26

高度なARIAパターン

B24レッスンPRO

トグルパターン、タブインターフェース、ライブリージョンを実装し、実際のスクリーンリーダーでテストします。

27

HTMLのパフォーマンス

B24レッスンPRO

asyncとdeferのスクリプト、preloadヒント、遅延読み込み画像、リソースヒントを使ってページの読み込みを高速化します。

28

Web Componentsのカスタム要素

B24レッスンPRO

Custom Elements API、ライフサイクルコールバック、observed attributesを使って、再利用可能なカスタムHTML要素を定義します。

29

Shadow DOM

B24レッスンPRO

Shadow DOM内にマークアップとスタイルをカプセル化し、スロットでコンテンツを配分し、partでスタイル設定APIを公開します。

30

HTMLモジュールとImport Maps

B24レッスンPRO

ESモジュールスクリプト、bare specifier向けのimport maps、動的インポート、モジュールフェデレーションの概念を学びます。

31

プログレッシブエンハンスメント

B24レッスンPRO

プログレッシブエンハンスメントで構築します。堅牢なHTMLから始め、CSSとJavaScriptを段階的に重ね、機能を正しく検出します。

32

国際化

B24レッスンPRO

lang、dir、bdi、bdo、charset、および右から左へのテキスト対応を使って、世界中のユーザー向けにHTMLを準備します。

33

HTMLセキュリティ

B24レッスンPRO

CSP、サンドボックス化、SRI、安全なHTML処理の実践を使って、XSS、クリックジャッキング、インジェクションからページを保護します。

34

HTMLフォーム高度API

B24レッスンPRO

FormData、Constraint Validation API、カスタムバリデーションメッセージ、フォーム状態管理を活用します。

35

HTML HistoryおよびNavigation API

B24レッスンPRO

pushState、popstateイベント、SPAルーティング向けの最新のNavigation APIを使って、ブラウザー履歴を管理します。

36

Intersection Observer

B24レッスンPRO

IntersectionObserverを使って、遅延読み込み、無限スクロール、スクロール連動アニメーションのトリガーを実装します。

37

PWA向けHTML

B24レッスンPRO

Web App Manifest、service workerの登録、オフライン用フォールバックページを使って、プログレッシブWebアプリを構成します。

38

HTMLの検証とテスト

B24レッスンPRO

W3C Validatorでマークアップを検証し、LighthouseでHTMLを監査し、pa11yとaxeでアクセシビリティをテストします。

39

HTMLの未来

B24レッスンPRO

Declarative Shadow DOM、Popover API、selectlist、command属性など、登場しつつあるHTML機能を先取りして学びます。

40

大規模開発におけるHTML

C14レッスンPRO

コンポーネントの抽出、サーバーサイドテンプレート、デザインシステム、スタイルガイドのドキュメントを使って、大規模プロジェクトのHTMLを管理します。

よくある質問

よくある質問

HTML Academyコースは無料ですか?

はい。HTML Academyコースは無料で始められ、インタラクティブレッスンをすべて無料で完了できます。オプションのPRO登録で、高度なAIツールと共有可能な認定資格がアンロックされます。

HTMLを学ぶのに事前経験は必要ですか?

いいえ。コースは基礎から始まり、より高度なトピックへと進むので、HTMLの事前経験がなくても始められます。

CoddyKitでHTMLをどのように学びますか?

実践しながら学びます。短いインタラクティブレッスンは、わかりやすい説明と、リアルタイムで実行される実践的なコード演習が組み合わさっており、24時間対応のAIチューターがわからないときにいつでもサポートします。

HTML Academyを完了すると認定資格がもらえますか?

はい。PRO学習者は試験を受けて、HTML Academyコースの完了を証明する共有可能な認定資格を取得できます(認証コード付き)。

スマートフォンでHTMLを学べますか?

はい。CoddyKitはウェブとネイティブiOS・Androidアプリで利用でき、どのデバイスでもHTMLを学習でき、進捗がすべてのデバイスで同期されます。

HTML Academyを今すぐ始める

AI搭載レッスンでプログラミングをマスターする数千人の学習者に参加しましょう。

無料で始める →すべてのコースを見る