0Pricing
HTML for Kids icon

HTML for Kids

HTMLKidsWebFrontendBeginner

HTML for Kidsで、楽しくて簡単なHTMLレッスンを通じて、子どもたちにウェブ開発を紹介します。

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

HTML for Kids: ゼロからリアルなウェブページを作ろう

HTMLは、すべてのウェブページが構築される言語です。このトラックは、プロフェッショナル開発者が使うのと同じツール——実践的なHTMLとCSS——を短く分かりやすいレッスンを通じて学ぶことで、経験のない初心者向けにウェブ開発を紹介します。

学べること

コアHTMLエレメントとページ構造から始まり、スタイリングのためのCSSへ進みます:スタイル定義、classセレクタタイプの操作、marginとpaddingの制御、色と背景の設定、最もよく使われるCSSプロパティの適用。このトラックはHTMLのベストプラクティスもカバーし、基礎が固まった後のHTMLを超えた世界をのぞき見します。

学習パス

16のコースがA1からB1へと進みます。最初のコースはIntroduction to HTML、Getting Started with CSS、Basic HTML Elementsをカバーします。中盤のコースはStyling HTML、Class Selectors、Selector Types、Fun Challenges and Activitiesで自信を深めます。トラックはCSS Margin、CSS Padding、Color and Background、HTML Best Practices、Beyond HTMLで終わり、学習者に次に何を勉強すべきか明確なビューを与えます。

どのように機能するか

各コースは短いハンズオンレッスンに分割され、ビルトインエディタで完了でき、リアルタイムフィードバックが得られます。AIチューターはコンセプトがさらに説明を必要とするときはいつでも利用可能なので、子どもたちは立ち止まることなく自分のペースで進むことができます。

学習を始める →

学び方

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

16コース

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

01

HTML入門

A14レッスン

HTML入門は、初心者がWeb開発を始めるのに最適なコースです。このカテゴリーでは、HTMLとは何か、どのように動作するのか、簡単なWebページをどう作成するのかなど、HTMLの基礎を学びます。このセクションを終える頃には、コンテンツの構造化方法を理解し、初めてのHTMLプロジ…

02

CSSを始めよう

A11レッスンPRO

「Introduction to CSS」コースでWebデザインの学習を始め、Webページの見た目を高めるために必要なCSSの概念とテクニックを学びましょう。このコースでは、インラインスタイル、CSSセレクター、スタイル定義の基本から、セレクターのネストや継承といった発展的なト…

03

CSS入門

A11レッスンPRO

前のコースでは、CSSとは何か、そしてなぜ使うべきなのかを学びました。ここでは、簡単な例を使ってCSSを手短に紹介します。

04

HTMLの基本要素

A14レッスンPRO

HTMLの基本要素では、すべてのWebページを構成する基本的な部品を学びます。見出し、段落、リンク、リスト、画像を使って、意味があり整理されたコンテンツを作成する方法を身につけます。このカテゴリーを通して、機能的で見た目にも魅力的なWebサイトを作るために必要なスキルを習得でき…

05

スタイルを定義する方法

A11レッスンPRO

「How Can We Define Styles?」レッスンでは、WebページにCSSを適用する3つの主な方法を学びます。インラインスタイル、内部スタイルシート用の<style>タグ、外部CSSファイルを使う方法です。このモジュールでは、それぞれの方法を明確な例と実践的なガイ…

06

HTMLの高度な要素

A24レッスンPRO

HTMLの高度な要素では、インタラクティブで動的な機能を学び、HTMLの知識をさらに深めます。フォームや表、動画や音声などのマルチメディアの埋め込みを扱います。これらの要素を使いこなすことで、より複雑でインタラクティブなWebページを作成できるようになります。

07

HTMLのスタイリング

A24レッスンPRO

HTMLのスタイリングでは、CSSを使ってWebページを魅力的に仕上げる方法を学びます。インラインスタイル、色、フォント、レイアウトを扱い、見た目にも優れたWebサイトをデザインできるようにします。構造とスタイルをつなぐ内容として、Webページをより印象的に仕上げる力を身につけ…

08

楽しいチャレンジとアクティビティ

A22レッスンPRO

楽しいチャレンジとアクティビティは、スキルと創造性を試す実践的なカテゴリーです。ゲーム、コードに合わせて学ぶ演習、ミニプロジェクトを通して、学んだことを現実のシナリオに応用します。Web開発の学習を刺激的でやりがいのあるものにします。

09

クラスセレクター

A21レッスンPRO

簡潔なコースモジュールでCSSのクラスセレクターを身につけ、複数のHTML要素に一貫したスタイルを効率よく適用する方法を学びましょう。このレッスンでは、クラスセレクターの定義、HTMLでの使用方法、クリーンで再利用しやすいコードを保つためのベストプラクティスを扱います。実践例と…

10

セレクターの種類

A21レッスンPRO

「Selector Types」コースモジュールで、CSSの基本的かつ重要なセレクターを身につけましょう。このレッスンでは、コンビネーションセレクター、子セレクター、:first-childのような疑似クラスなど、基本から発展までのセレクターを扱います。明確な例と演習を通して、…

11

よく使うCSSプロパティ

A21レッスンPRO

「Most Used CSS Properties」コースでWebデザインのスキルを高め、レイアウトとタイポグラフィを制御する重要なCSSプロパティを学びましょう。この包括的なモジュールでは、width、height、max-width、content-boxとborder-b…

12

CSSのマージン

A21レッスンPRO

「CSS Margin」コースモジュールで、余白の扱い方を身につけましょう。マージンは要素の周囲のスペースを制御し、整理された見た目にも優れたWebデザインを実現するために重要です。このレッスンでは、margin-top、margin-right、margin-bottom、m…

13

CSSのパディング

A21レッスンPRO

CSS Paddingコースへようこそ。パディングはHTML要素の境界線の内側に余白を作るために使用します。マージンと同様に、要素の上下左右4方向にパディングを追加できます。詳しく学びましょう。

14

色と背景

A21レッスンPRO

簡潔なCSSコース「Color and Background」でWebデザインのスキルを高めましょう。background-color、opacityなどの基本プロパティや、背景画像の設定、位置、繰り返し、固定について学びます。実践例と演習を通して、見た目に優しくレスポンシブな…

15

HTMLのベストプラクティス

B14レッスンPRO

HTMLのベストプラクティスでは、クリーンで効率的、かつアクセシブルなコードの書き方に重点を置きます。セマンティックHTML、コメント、バリデーション、アクセシビリティを学び、使いやすくプロフェッショナルなWebサイトを作成できるようにします。これらの実践を身につけることで、熟…

16

HTMLのその先へ

B14レッスンPRO

HTMLのその先へでは、スタイリングのためのCSSやインタラクティブ性を加えるJavaScriptなど、HTMLを補完するツールと技術を探究します。さらに、Webホスティング、ドメイン、フレームワークについても学び、完全に機能する動的なWebサイトを構築するための基礎を身につけ…

よくある質問

よくある質問

HTML for Kidsコースは無料ですか?

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

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

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

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

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

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

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

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

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

HTML for Kidsを今すぐ始める

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

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