カテゴリー: CSS

CSS講座 / display：block・inline・inline-block・非表示

同じspanで三つのボックスの並び方と寸法を比較します。imgのような置換要素の例外、noneとhiddenが空間に与える違いも実行して確認します。

CSS講座 / 要素の大きさ：width・height・min/max・box-sizing

内容幅と枠までの幅を比較し、画面に追従する幅や最小・最大制約を設定します。固定高、可変高、スクロール、パーセント高さの成立条件も実習します。

CSS講座 / ボックスモデル：内容・padding・border・margin

要素を構成する四つの領域と幅の足し方を確認します。余白の短縮形、論理プロパティ、隣接する正の縦marginの相殺を同じ例で測ります。

CSS講座 / 背景色と背景画像：cover・contain・繰り返し・位置

固定比率の練習画像でcoverとcontainを比較します。背景画像の相対パス、no-repeat、位置変更、読み込まれない原因と、意味のある画像をimgにする判断も学びます。

CSS講座 / リンクの状態とキーボードフォーカスを表示する

link・visited・hover・activeの競合とfocus-visibleを学びます。二ファイルの例でマウスとTab操作を比較し、訪問済み表示の制約や移動しない原因を確認します。

CSS講座 / 段落とリストの配置・字下げ・余白

行の高さと段落間隔、最初の一行の字下げを区別します。リスト記号のinsideとoutsideを同じ長文で比較し、折り返しや項目間隔を確認します。

CSS講座 / フォント・文字サイズ・行の高さを指定する

フォントのフォールバックと実際に描画されたフォントを確認します。単位なしとemのline-heightが子へどう継承するか、読みやすい行幅とともに比較します。

CSS講座 / 色と単位：px・em・rem・パーセントの基準

色名、16進数、RGBと透明度を比較します。emとremの入れ子、paddingとborder-boxを含む幅の計算を、基準値を変える実習で確認します。

CSS講座 / 継承・詳細度・カスケードで適用値を決める

親からの継承と要素への直接指定を分け、詳細度を三列で比較します。宣言順、プロパティ単位の競合、importantとインライン指定の条件を完全な例で検証します。

CSS講座 / 擬似要素：before・afterで装飾を加える

beforeとafterで見出しの点やリンクの線を作ります。contentとdisplayの関係、currentColor、必須情報をHTMLに残す理由を、変更前後の比較で確認します。