本日の構成

1. 2024年最新CSS実践テクニック 50分
2. 事前質問への回答 5分

新しいCSSを学ぶメリット

• 長いJavaScriptで実現していたものが、
  短いCSSで済む
• 読みやすいコードになり、
  開発者体験（DX）が向上する
• バグが減り、制作物の品質が向上する

クイズ

2番目の.item 要素「ぶどう」にスタイルをあてるには？

<ul>
  <li>りんご</li>
  <li class="item">桃</li>
  <!-- ぶどうにスタイルをあてたい -->
  <li class="item">ぶどう</li>
</ul>

https://codepen.io/tonkotsuboy/pen/yLWpmBm

:nth-child(2) や :nth-of-type(2) は不正解

• .item:nth-child(2)
  • 2番目の要素かつ .item がついているもの

<ul>
  <li>りんご</li>
  <!-- 桃にスタイルがあたってしまう -->
  <li class="item">桃</li>
  <li class="item">ぶどう</li>
</ul>

【モダン】 of S 構文を使う

• :nth-child(2 of .item)
  • .item 要素のうち、2番目

<ul>
  <li>りんご</li>
  <li class="item">桃</li>
  <!-- ぶどうにスタイルがあたる -->
  <li class="item">ぶどう</li>
</ul>

https://codepen.io/tonkotsuboy/pen/yLWpmBm

【実例】テーブルの偶数行に背景色（ゼブラ表示）

非表示の行には、JavaScriptで hidden 属性が付与される

:nth-child(even of :not(:hidden))

<tbody>
  <tr data-type="女の子" hidden></tr>
  <tr data-type="男の子"></tr>
  <tr data-type="女の子" hidden></tr>
  <tr data-type="女の子" hidden></tr>
  <tr data-type="男の子"></tr>

tr:nth-child(even of :not([hidden])) {
  background: #efeeee;
}

of S構文は全ブラウザ対応済み

input のエラー表示

input のエラー表示

• 必須（required）なinputに値が入力されていないとき
• メールアドレスが正しい形式ではないとき

【従来】 input:invalid はページを開いた瞬間に判定

ページを開いた瞬間に背景が赤色になる

<input required />

input:invalid {
  background-color: red;
}

【モダン】 input:user-invalid を使う

1回目の入力が終わったら背景が赤色になる

<input required />

input:user-invalid {
  background-color: red;
}

input:user-invalid の挙動

• 1回目の入力が終わった後に2回目の入力を試みると、
  入力途中のエラー扱いになる
• 「フォーカスが外れたときにだけ」エラー表示ができない

:not(:focus) を組み合わせる

• :user-invalid:not(:focus)
  • 「フォーカスがあたっていない状態の不正な要素」
  • :focus フォーカスがあたっているとき
  • :not() セレクターに一致しない要素

input:user-invalid:not(:focus) {
  background-color: red;
}

:user-invalidは全ブラウザ対応済み

input が不正なとき、親要素の背景の色を変える

<div class="item"> <!-- 背景を変えたい -->
  <label>氏名</label>
  <input required /> <!-- 不正になりうる -->
</div>

【モダン】 :has() を使う

子孫要素に input:user-invalidがある.item要素の
背景の色を変える

.item:has(input:user-invalid) {
  background: #ffe5e5;
}

:has()は全ブラウザ対応済み

【従来】ネストには Sass が必要だった

.container {
  .child {
    color: red;
  }
}

【モダン】「CSS」でネストする

.container {
  .child {
    color: red;
  }
}

https://codepen.io/tonkotsuboy/pen/ExRbPgV

CSS ネストは、Sass のネストと「ほぼ」同じ

.container {
  .child1,
  .child2 {
    color: red;
  }
}

.link {
  &:hover,
  &:active {
    color: red;
  }
}

https://codepen.io/tonkotsuboy/pen/ExRbPgV

とくに @media や @container のネストが便利

.box {
  color: blue;

  @media (width <= 800px) {
    color: red;
  }
}

2023年12月から要素セレクターの前の & が不要に

section {
  & h1 {
    color: red;
  }
}

section {
  h1 {
    color: red;
  }
}

ネストの緩和された構文の更新 https://developer.chrome.com/blog/css-nesting-relaxed-syntax-update?hl=ja

セレクター名の一部を & で表現するのは不可能

次のコードは動作しない。
筆者は歓迎だが、皆さんはどうですか？

/* 動きません */
.foo {
  &__bar {
    color: red;
  }
}

ネストは全ブラウザ対応済み

テーブルレイアウトみたいなフォームをつくる

HTML

<main>
  <div class="item">
    <label>氏名</label>
    <input />
  </div>
  <div class="item">
    <label>会社</label>
    <input />
  </div>
  <!-- 中略 -->
  <button>送信する</button>
</main>

Flexだと見出しの幅が揃わない

.item {
  display: flex;
}

【モダン】 行列を入れ子にする

• 2列の親行列を作る
• 子行列を配置する
• 子行列は、親の列に一致させる

2列の行列を作り、子を配置

main {
  display: grid;
  grid-template-columns: 
    max-content 1fr;
}

main .item {
  display: grid;
  grid-template-columns: 
    subgrid;
  grid-column: span 2;
}

レスポンシブ対応しつつ各行の高さを統一

https://codepen.io/tonkotsuboy/pen/VwqmzeJ

12分割グリッドシステムを作る

https://codepen.io/brianhaferkamp/pen/XWXEbPp

Subgridは全ブラウザ対応済み

事前質問①

【質問】

最新CSSで最も注目しているものは？

【回答】

Subgrid、:has()、コンテナクエリがアツい。どれもこれまでのCSS開発を大きく変えてくれる、ゲームチェンジャーな新機能。

コンテナクエリ @container が全ブラウザ対応。新時代のレスポンシブ対応を完全理解する by @tonkotsuboy_com - Zenn

事前質問②

【質問】

Sassを使わなくなるのはいつ頃だと思う？

【回答】

私はもう使っていない。

事前質問③

【質問】

tailwind cssなど、何のCSSライブラリを使っている？

【回答】

CSS Modulesを使うことが多い。
今はvanilla-extractが一番気に入っている。

CSS・TypeScriptの相性が抜群。vanilla-extractが最高のCSS開発体験をくれた by @tonkotsuboy_com - Zenn

事前質問④

【質問】

新しい機能をプロダクトに導入する場合に、OSやデバイスがどれくらい対応していたら導入する？

【回答】

基本的には2バージョン以下。
Safariはバージョンアップの浸透が遅いので、3バージョン以下を対象に。 必要に応じて `@support` や ポリフィルを使う。

事前質問⑤

【質問】

どうやって新しい技術にキャッチアップしている？

【回答】

ブラウザの公式アップデート情報、ブラウザ開発者のSNS、Can I use...など。「もっと便利なやり方はないか？」と常にアンテナを張っておく。
知識の定着には、SNS・技術ブログ・登壇。

アウトプットこそ最高のインプット。鹿野壮が語る「自分が一番トクする」アウトプットの力 -レバテックLAB

本日紹介したモダンCSS①

• :nth-child() の of S構文
  • .itemの2番目、といった指定が直感的にできる
• :user-invalid と :user-valid
  • ユーザー入力が終わっときの有効・無効判定
• :has()
  • 子孫要素の状態に応じてスタイルを変更できる

本日紹介したモダンCSS②

• CSSのネスト
  • @media の入れ子がとくに便利
• subgrid
  • 行列の入れ子が可能
• :not()
  • 一致しないセレクターの指定

参考資料

• What's new in CSS and UI: I/O 2023 Edition - Chrome for Developers
• CSS Wrapped: 2023! - Chrome for Developers