中級

10ステップ約5時間

HTML/CSS基礎マスターコース

Webページの仕組みからHTMLの構造化、CSSのセレクタ・ボックスモデル・中央寄せ・Flexbox・Grid・レスポンシブ・日本語タイポグラフィ、そして「書いたのに効かない」レイアウト崩れのデバッグまでを体系的に学びます。実務で詰まりやすいハマりどころを「効くケース／効かないケース」で対比し、DevToolsとAIコーディングツール（Claude Code / Codex）を使った切り分けまで身につきます。

このコースを始める

学習ロードマップ

1

STEP 1記事12分

Webページはどう動く？ — HTML・CSS・JavaScriptの三層

URL入力からブラウザ表示までの流れと、HTML（構造）・CSS（見た目）・JavaScript（動き）の三層の役割を、非エンジニアにもわかりやすく解説

このステップを学ぶ

2

STEP 2記事15分

HTMLの基礎 — 要素・タグ・属性で文書を組み立てる

HTMLの要素・タグ・属性の関係、文書の基本骨格、よく使う要素、入れ子構造、セマンティックHTML、フォーム、アクセシビリティの初歩を実コード付きで学ぶ

このステップを学ぶ

3

STEP 3記事14分

CSSの基礎とセレクタ — スタイルの当て方を理解する

CSSの構文・適用方法から、セレクタの種類、カスケード・詳細度・継承、!importantの危険性、:has()など最新セレクタまでを実例で解説

このステップを学ぶ

4

STEP 4記事14分

ボックスモデルとサイジング — はみ出しを根絶する

CSSの全要素は「箱」。content/padding/border/marginの入れ子、box-sizing:border-box、margin相殺、overflow、min/max-widthまで、レイアウト崩れの原因を仕組みから理解する

このステップを学ぶ

5

STEP 5記事14分

テキスト制御と日本語対応 — 不自然な改行を防ぐ

font-family・line-height・word-break・overflow-wrap など、CSSのテキスト制御を体系的に学び、日本語が単語の途中で不自然に折り返される問題やはみ出しを解決する方法を実例で解説

このステップを学ぶ

6

STEP 6記事16分

中央寄せの完全攻略 — 「左揃えのまま中央配置」まで

text-align・margin auto・Flexbox・Grid・display:tableまで、CSSの中央寄せを「効く/効かない」の理由から徹底解説。左揃えのまま箱だけ中央に置く実務の難問も攻略する

このステップを学ぶ

7

STEP 7記事15分

Flexbox実践と落とし穴 — 親が子を支配する

display:flexで親が子のレイアウトを支配する仕組みから、align-items:stretchで中央寄せや幅が効かなくなる直接原因、min-width:0問題まで、動くコードで実践的に解説

このステップを学ぶ

8

STEP 8記事14分

CSS Grid入門 — 2次元レイアウトを宣言的に

CSS Gridで行と列の2次元レイアウトを宣言的に組む方法を、fr単位・gap・repeat/minmax・auto-fit・セル結合・grid-template-areas・Flexboxとの使い分けまで実例で解説

このステップを学ぶ

9

STEP 9記事16分

レスポンシブデザイン入門 — モバイルファーストで作る

viewport meta・メディアクエリ・相対単位・dvh・clamp・container query・レスポンシブ画像まで、1つのコードで多様な画面幅に対応するモダンなレスポンシブCSSを実例で解説

このステップを学ぶ

10

STEP 10記事14分

レイアウト崩れのデバッグ手順 — 「書いたのに効かない」を切り分ける

CSSが効かない典型原因と「親要素を疑う」思考法、Chrome DevToolsとAIコーディングツールを使った切り分け手順を実例で解説

このステップを学ぶ