LEARNING ROADMAP

学習ロードマップ

上から順に進めると、HTMLの基礎から実務レベルのCSSまで無理なく身につきます。各項目のタグ・プロパティを選ぶと、辞典の詳細ページで解説とサンプルを確認できます。

STAGE 01 · BEGINNER

初心者

HTMLで文書の骨組みをつくり、CSSで色・文字・余白を整えるところまで。Webページの仕組みを理解する段階です。

01
HTML・CSSの基本
HTMLは構造、CSSは見た目を担当します。両者の役割の違いを知りましょう。
<html><link>
02
HTMLの基本構造
すべてのページに共通する骨組みと、head・bodyの役割。
<html><head><body><meta>
03
見出し・文章
見出しの階層と段落で、読みやすい文書をつくります。
<h1><p><strong>
04
画像・リンク
ページに画像を置き、他のページとつなげます。
<a><img>
05
CSSの基本的な書き方
セレクタ・プロパティ・値の関係を覚えます。
color font-size 値と単位
06
色・文字・余白
文字色や背景色、余白で見た目を整えます。
color background-color margin padding
07
ボックスモデル
すべての要素は箱。内容・padding・border・marginの関係を理解します。
ボックスモデル margin padding border box-sizing

STAGE 02 · INTERMEDIATE

Flexbox・Gridでレイアウトを組み、スマートフォンにも対応させる段階。実際のサイト制作に必要な技術がそろいます。

STAGE 03 · ADVANCED

保守しやすいCSS設計、アクセシビリティ、パフォーマンスまで。品質の高いサイトを長く運用するための知識です。