カテゴリー: CSS

CSS講座 / 可変幅のレイアウト：min・max-width・clamp

親の幅とビューポートの幅を区別し、上限付きの本文とカードを作ります。clampの文字サイズ計算、余白込みの寸法、狭い画面での比較方法も確認します。

CSS講座 / z-indexとスタッキングコンテキスト：重なり順を調べる

大きなz-indexでも前に出ない理由を、親と子のまとまりで説明します。コンテキストの生成条件、overflowの切り取り、比較する対象の探し方を実習します。

CSS講座 / positionの基礎：relative・absolute・fixed・sticky

通常の配置に残る要素と外れる要素を区別します。バッジの基準、固定表示、親の終端で止まるstickyを実習し、動かない原因を確認します。

CSS講座 / Gridの応用：repeat・auto-fit・auto-fill・エリア

自動繰り返しの列数と空の列の扱いを比較します。denseの見た目と文書順、名前付きエリアの長方形条件、狭い画面での再配置も学びます。

CSS講座 / Gridの基礎：行・列・ラインとアイテム配置

Gridのライン、トラック、セル、エリアを図とコードで区別します。frの幅計算、明示・暗黙の行、全幅配置、長い文字列によるはみ出しも確認します。

CSS講座 / Flexboxの整列・折り返し・gap・伸縮

justify-content、align-items、align-contentの条件を分けて比較します。grow・shrink・basisの計算例と、折り返すカードや長い識別子の対処も学びます。

CSS講座 / Flexboxの基礎：コンテナー・アイテム・二つの軸

display: flexを指定する親と直接の子の関係を確認します。rowとcolumn、初期の伸縮、交差軸のstretch、見た目と文書順の違いを完全例で比較します。

CSS講座 / 表のデザイン：枠線・列幅・table-layout

表の幅とセルの余白を分け、autoとfixedの列幅計算を比較します。長い識別子の省略と、狭い画面で表だけを横にスクロールする実装も確認します。

CSS講座 / 枠線・角丸・影を使い分ける

border、border-radius、box-shadowの寸法と役割を比較します。円と楕円、影の移動・ぼかし・広がり、親のoverflowによる切れ方を実習します。

CSS講座 / あふれた内容・長い文字列・省略記号を扱う

overflowの四つの値、長いURLの折り返し、一行省略の成立条件を比較します。内部スクロールをキーボードで操作し、全文へアクセスできる状態を保ちます。