LANGUAGE
CSS の技術記事一覧
4件の記事があります
- Web開発 📚 モダンCSS入門 第4回 #CSS #モダンCSS #Sass
【モダンCSS入門 第4回】ネイティブ CSS Nesting 完全入門 — Sass いらずでネストが書ける
2023年に Baseline 入りした『ネイティブ CSS ネスト』。Sass / SCSS なしで、ブラウザがそのままセレクタの入れ子を理解してくれます。基本構文・& 記号の使い所・メディアクエリのネスト・つまずきポイントを実例で解説します。
📅 2026.05.22 · ⏱ 約8分
- Web開発 📚 モダンCSS入門 第3回 #CSS #モダンCSS #セレクタ
【モダンCSS入門 第3回】`:is()` / `:where()` で重複セレクタとサヨナラ — 違いと使い分け
:is() と :where() を使うと『複数のセレクタを1つにまとめる』ことができます。両者の決定的な違い(特異性の扱い)から、ナビ・見出し・記事内要素での実用パターンまで、迷わず使い分けるコツを解説します。
📅 2026.05.21 · ⏱ 約7分
- Web開発 📚 モダンCSS入門 第2回 #CSS #モダンCSS #レスポンシブ
【モダンCSS入門 第2回】コンテナクエリ完全入門 — 親要素の幅でレスポンシブする新常識
ビューポート幅ではなく『親要素の幅』に応じてスタイルを切り替える @container クエリ。同じカードコンポーネントを画面幅ではなく置き場所で出し分ける実例で、レスポンシブデザインの新常識を解説します。
📅 2026.05.20 · ⏱ 約7分
- Web開発 📚 モダンCSS入門 第1回 #CSS #モダンCSS #セレクタ
【モダンCSS入門 第1回】CSS `:has()` 擬似クラス完全入門 — 親要素を選択する5つの実用パターン
長年待ち望まれた「親要素を選択できる CSS セレクタ」がついに実用化。:has() の基本構文から、カード・フォーム・ナビでの5つの実用パターンまで、JavaScript なしで実現するコード例で解説します。
📅 2026.05.19 · ⏱ 約7分