人気ジャーニー
HTMLを学ぶ
HTMLをゼロから学べる無料オンライン講座です。文書構造、セマンティックタグ、リンク、フォーム、画像、アクセシビリティの基礎を、実践課題、実プロジェクト、AIヒント、修了証明書と一緒に身につけます。
249,002+ 人のcoddersが登録中
このジャーニーに含まれるもの
AIによるコーディングサポート
実践的なインタラクティブレッスン
全レッスンに音声ナレーション付き
知識を確かめるクイズ
無料の修了証明書
シラバス
5 セクション241 レッスン212 チャレンジ1,203 クイズの問題01セクション 1
Fundamentals
Learn the core structure and syntax to create web pages from scratch学習を始めるHTMLの基礎
5 レッスン531- 01HTMLとは？チャレンジ
- 02HTMLの基本構造チャレンジクイズ音声
- 03タグと要素チャレンジクイズ音声
- 04入れ子構造と終了タグチャレンジクイズ音声
- 05HTMLのコメントチャレンジクイズ音声
テキストと書式設定
6 レッスン1137- 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 レッスン931- 01Divisionsチャレンジマスタリークイズ音声
- 02インラインの Spanチャレンジマスタリークイズ音声
- 03セマンティックタグチャレンジマスタリークイズ音声
- 04Section と Articleチャレンジマスタリークイズ音声
- 05レイアウトのまとめチャレンジ
個人プロフィールページ
プロジェクト5 レッスン1- 01プロジェクトの概要チャレンジ
- 02ヘッダーセクションプロジェクト
- 03プロフィール画像プロジェクト
- 04自己紹介セクションプロジェクト
- 05SNSリンクプロジェクト
フォームと入力 パート1
6 レッスン937- 01フォームの基本クイズ音声
- 02テキスト入力チャレンジマスタリークイズ音声
- 03入力属性チャレンジマスタリークイズ音声
- 04パスワードフィールドチャレンジマスタリークイズ音声
- 05入力用ラベルチャレンジマスタリークイズ音声
- 06まとめ：フォームの基本チャレンジ
フォームと入力 Part 2
7 レッスン1239- 01ラジオボタンチャレンジマスタリークイズ音声
- 02チェックボックスチャレンジマスタリークイズ音声
- 03ドロップダウンチャレンジマスタリークイズ音声
- 04ボタンチャレンジマスタリークイズ音声
- 05フォーム内のボタンチャレンジマスタリークイズ音声
- 06復習：フォーム #1チャレンジ
- 07復習：フォーム #2チャレンジ
テーブル
4 レッスン725- 01テーブルの基本チャレンジマスタリークイズ音声
- 02キャプションの追加チャレンジマスタリークイズ音声
- 03行と列の結合チャレンジマスタリークイズ音声
- 04まとめ - テーブルチャレンジ
イベント登録ページ
プロジェクト5 レッスン1- 01プロジェクトの概要チャレンジ
- 02ヘッダーセクションプロジェクト
- 03イベント詳細セクションプロジェクト
- 04登録フォームプロジェクト
- 05フッターセクションプロジェクト
最終チャレンジ
4 レッスン4- 01シンプルなプロフィールカードチャレンジ
- 02イベント招待カードチャレンジ
- 03シンプルな記事ページチャレンジ
- 04お気に入りの本リストチャレンジ
02セクション 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フローティング通知チャレンジ
03セクション 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チャレンジ
04セクション 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新・世界の七不思議チャレンジ
05セクション 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の演習でつまずいたときは、AIヒントが答えを丸ごと渡さずに次の考え方を示します。
- 講座を修了すると、LinkedInや履歴書に追加できるHTMLの無料修了証明書を受け取れます。
HTML学習についてのよくある質問
HTMLは初心者でも学びやすいですか？
はい。未経験でもHTMLを始められます。Coddyでは短い演習に分けて、構文を理解し、文書構造、セマンティックタグ、リンク、フォーム、画像、アクセシビリティの基礎を練習しながら少しずつ自信をつけられます。
HTMLの習得にはどのくらい時間がかかりますか？
HTMLの基礎は、毎日練習すれば1〜2週間でつかめます。実際のプロジェクトを作れる手応えを得るには、ペースに応じて1〜3か月ほど見るとよいでしょう。
HTMLをオンラインで無料学習できますか？
CoddyではHTMLの無料オンライン講座を提供しています。レッスン、コード課題、クイズ、プロジェクトがあり、すべてブラウザで動きます。
HTMLを早く学ぶには？
最短ルートは毎日コードを書くことです。Coddyでは短い説明のあとすぐ演習し、必要に応じてAIヒントを使えるため、長い動画を見るより実践時間を増やせます。
修了後にHTMLの証明書はもらえますか？
はい。CoddyでHTML講座を完了すると、LinkedInや履歴書に追加できる無料の修了証明書を受け取れます。
HTMLを学んだ後に何を作れますか？
講座の後は、Webページ、フォーム、シンプルなランディングページ、CSSやJavaScriptプロジェクトの土台を作れるようになります。さらに高度なテーマへ進むための土台もできます。
