Web技術マップ
全体像を把握して、学習の道筋を明確にしましょう
このマップは、Web開発に必要な技術を体系的に整理したロードマップです。
各カードにカーソルを合わせると、「何ができるようになるか」「どんな画面を作れるか」が表示されます。
基礎技術
まずはここから！Web開発の基本を学びます
HTML 基礎
マークアップ言語
Webページの骨組みを作る
難易度
CSS 基礎
スタイリング言語
見た目を美しくデザインする
難易度
CSS 基礎
スタイリング言語
できるようになること
- 見た目を変えられる
- レイアウトを整えられる
- 色やフォントを調整できる
作れる画面の例：
おしゃれな名刺、カード型レイアウト、グリッドギャラリー
JavaScript 基礎
プログラミング言語
ページに動きをつける
難易度
JavaScript 基礎
プログラミング言語
できるようになること
- 動かせる
- ユーザーの操作に反応できる
- データを処理できる
作れる画面の例：
電卓、ToDoリスト、スライドショー、クイズアプリ
VSCode
ツール
開発を快適にするエディタ
難易度
次のステップ
サーバーサイド技術
本格的なWebアプリケーションを作る技術
学習の流れ
1
HTML/CSSから始める
まずは見た目を作る技術から学びましょう
2
JavaScriptで動きをつける
インタラクティブなページを作れるようになります
3
Node.js/Expressでアプリ化
サーバーサイドも理解して、本格的なWebアプリを作ります
今すぐ学習を始めましょう！
無料でHTML、CSS、JavaScriptの基礎から学べます