HTML5プロフェッショナル認定 レベル1の学習教材

公開済みの教材をログインせずに読めます。改訂中の教材は公開していません。

• CSSセレクタを理解する

  CSSのセレクタは、どの要素にスタイルを当てるかを決める条件です。見た目の似た空白・>・+を区別し、HTMLの親子や兄弟関係から対象を読めるようにします。

• CSSセレクタのブラウザ挙動/実装演習

  短いHTML断片に対し、セレクタが何個の要素へ一致するかを追います。ここでは色の優先順位ではなく対象選択に集中し、同じ要素の複合条件と親子関係を切り分けます。

• カスケードと詳細度を理解する

  後から書いたCSSがいつも勝つわけではありません。適用候補からカスケードで宣言を選び、同じ条件で詳細度と記述順を比較します。継承との違いも確認します。

• カスケードと詳細度のブラウザ挙動/実装演習

  ブラウザで色や余白が期待どおり変わらない原因を、候補・詳細度・継承の順に切り分けます。コードから計算し、どの宣言を直すかまで判断します。

• ボックスモデルを理解する

  width: 200pxと書いたのに、カードが200pxより広くなるのはなぜでしょうか。CSSでは内容、内側余白、枠線、外側余白を別々に扱います。それぞれの範囲を区別し、幅の計算とbox-sizingの違いをコードで確かめます。

• ボックスモデルのブラウザ挙動/実装演習

  カードが親要素からはみ出す不具合を、ボックスモデルの計算で直します。各例は通常の横書きブロック要素を対象とし、変形、スクロールバー、min/max-widthなど追加制約はありません。marginを含めるかどうかも問題ごとに確認します。