HTML・CSSによるWebページ制作の基礎。構造・スタイル・レイアウト・レスポンシブ・デバッグを実践的に学ぶ
CSSが効かない典型原因と「親要素を疑う」思考法、Chrome DevToolsとAIコーディングツールを使った切り分け手順を実例で解説
viewport meta・メディアクエリ・相対単位・dvh・clamp・container query・レスポンシブ画像まで、1つのコードで多様な画面幅に対応するモダンなレスポンシブCSSを実例で解説
font-family・line-height・word-break・overflow-wrap など、CSSのテキスト制御を体系的に学び、日本語が単語の途中で不自然に折り返される問題やはみ出しを解決する方法を実例で解説
CSS Gridで行と列の2次元レイアウトを宣言的に組む方法を、fr単位・gap・repeat/minmax・auto-fit・セル結合・grid-template-areas・Flexboxとの使い分けまで実例で解説
display:flexで親が子のレイアウトを支配する仕組みから、align-items:stretchで中央寄せや幅が効かなくなる直接原因、min-width:0問題まで、動くコードで実践的に解説
text-align・margin auto・Flexbox・Grid・display:tableまで、CSSの中央寄せを「効く/効かない」の理由から徹底解説。左揃えのまま箱だけ中央に置く実務の難問も攻略する
CSSの全要素は「箱」。content/padding/border/marginの入れ子、box-sizing:border-box、margin相殺、overflow、min/max-widthまで、レイアウト崩れの原因を仕組みから理解する
CSSの構文・適用方法から、セレクタの種類、カスケード・詳細度・継承、!importantの危険性、:has()など最新セレクタまでを実例で解説
HTMLの要素・タグ・属性の関係、文書の基本骨格、よく使う要素、入れ子構造、セマンティックHTML、フォーム、アクセシビリティの初歩を実コード付きで学ぶ
学習ステップが決まったコースで、順番に沿って学べます。