🚀 中学生・高校生のための無料プログラミング学習

コードを書けば、
画面が変わる。

HTML・CSS・JavaScript の3つの言葉を順番に学ぶ、全19レッスン。1レッスン30分、ゼロから「自分のページを公開する」まで一緒に進みましょう。

無料・登録不要 全19レッスン スマホでも読める
19レッスン
約10h総学習時間
100+記事
¥0無料
コース一覧

学んで、練習して、作る。

HTML → CSS → JavaScript の順に進み、ドリルで定着、チャレンジで実践。
すべて無料で学べます。

🏠
HTML
HyperText Markup Language
ページの骨組みを作る言葉。見出し・段落・リンクなど、30個ほどのタグでほとんどのページが書けます。
7レッスン · 約3.5時間コースへ →
👕
CSS
Cascading Style Sheets
色・かたち・並べ方を指示する言葉。HTMLに服を着せるイメージです。同じページでも大きく印象が変わります。
6レッスン · 約3時間コースへ →
JavaScript
ECMAScript / JS
ボタンを押すと何かが起きる、スクロールで動く。ページに命を吹き込む言葉。
7レッスン · 約3.5時間コースへ →
📦
Git
バージョン管理ツール
コードの変更履歴を記録し、チームで共有する仕組み。GitHubを使った公開方法も学びます。
4レッスン · 約2時間コースへ →
🛠️
学習ツール
手を動かして理解する
Flexbox・Grid・カラーパレット・正規表現など、43個のインタラクティブなビジュアライザー。コードをいじりながら直感的に学べます。
43ツール · 無料ツール一覧へ →
🔥
問題ドリル
ドリルで定着
HTML・CSS・JavaScript の知識を90問のクイズで確認。コースで学んだ内容を反復練習で定着させよう。
90問 · 各30分ドリルへ →
🏆
実践チャレンジ
作って身につける
お手本を見ながら実際にページを作る10の課題。プロフィールカード・カフェメニュー・クイズアプリなど。
10課題 · 各30分〜2時間チャレンジへ →
学習ロードマップ

はじめての一歩から、自分の作品まで。

0
STEP 0 環境準備
VS Code とブラウザを用意する
30分
1
STEP 1 HTML基礎
ページの骨格を作る · 7レッスン
約3.5時間
2
STEP 2 CSS基礎
色・レイアウト・フォント · 6レッスン
約3時間
3
STEP 3 JavaScript基礎
ページに動きを与える · 7レッスン
約3.5時間
🔥
ドリルで定着
練習問題90問で反復練習
各30分
🏆
実践チャレンジ
10課題でお手本を見ながら作る
各30分〜2時間
6
STEP 6 GitHub Pages 公開
自分のページをインターネットに公開する
約1時間
🏁
STEP 7 自由課題
自分のテーマで作品をつくる
自分のペース
ブログ

学習に役立つ読み物、100本以上。

すべての記事を読む →
もっと学べるコンテンツ

サイトでできること

📋

チートシート

よく使うタグ・プロパティの早見表

📖

用語集

117語のプログラミング用語をやさしく解説

🚨

エラー辞典

103件のよくあるエラーと直し方

🗺️

学習ロードマップ

ゼロから公開までの全体像

Q&A

みんなの質問と回答

📝

ブログ

100+本の学習記事