カテゴリー: CSS

CSS講座 / HTMLとCSSでレスポンシブなWebサイトを作る

意味のあるHTMLに共通変数、Flexboxナビ、Gridカードを組み合わせます。全HTMLとCSS、幅や長文の変更実習、キーボードと動きの軽減の確認を含みます。

CSS講座 / CSSの整理：共通スタイル・ネスト・カスケードレイヤー

ファイルの責任を分けた実習で、ネストの親と子孫、通常宣言とimportantのレイヤー順を比較します。読み込み失敗と上書きの切り分けも学びます。

CSS講座 / CSS変数：var()・スコープ・継承・フォールバック

共通の色と余白を変数へまとめ、カードごとの上書きを比較します。未定義の代替値と、定義済みだがプロパティに合わない値の違いも実習します。

CSS講座 / フォームの状態：フォーカス・検証・disabled・readonly

ラベルと説明を入力欄へ関連付け、フォーカスとエラーを分けて示します。送信データを表示する実習でdisabledとreadonlyの違いや検証の限界を確認します。

CSS講座 / キーフレームアニメーション：再生・終了状態・一時停止

キーフレームと再生設定を分け、方向・回数・fill-modeの組み合わせを実習します。一時停止と再開、動きを減らしても読める基本状態も確認します。

CSS講座 / transformとtransition：変形・状態変化・動きの軽減

変形しても周囲の配置が変わらない点、関数の順番と変形原点を比較します。ホバー・フォーカスの遷移を作り、動きを減らす設定にも対応します。

CSS講座 / レスポンシブCSSの点検：画面幅・拡大・キーボード

点検用ページで幅・拡大・文字設定・キーボード操作を分けて確認します。最小幅、長い文字列、固定高さの不具合を一つずつ再現し、修正後に再点検します。

CSS講座 / レスポンシブ画像と動画：aspect-ratio・object-fit

画像本来の寸法と表示領域を分け、cover・contain・切り取り位置を比較します。SVG付きの四画像実習と、操作可能な動画のサイズ指定も学びます。

CSS講座 / コンテナークエリー：再利用できるカードを作る

画面幅ではなく部品の親幅で配置を変えます。container-type、名前付きコンテナー、入れ子で選ばれる祖先と、条件が効かない場合を比較します。

CSS講座 / メディアクエリー：内容から決めるブレークポイント

カード幅・間隔・外側の余白から二列と三列の境界を計算します。minとmaxの境界、メディア条件のrem、条件が一致しても変わらない場合も確認します。