モダンHTML/CSSのあまり知られていない機能

• 最近のWebサイトの性能低下の主因は、過剰なJavaScriptの使用とトラッキングスクリプトであり、多くの場合はHTML/CSSだけでも十分に置き換え可能
• CSSネスト、相対色、新しいビューポート単位（lvh, svh, dvh） など最近追加された機能により、以前はJSやプリプロセッサに依存していた作業を簡単に解決できるようになった
• CSSは単なるスタイルツールではなく、アニメーション、入力検証、ダークモードのテーマ、アコーディオンメニュー まで実装できる強力な言語である
• 性能面でもCSSはGPUアクセラレーションと別スレッドで動作し、アニメーションやトランジションでJSより滑らかで効率的 である
• 筆者はCSSを単なる実用ツールではなく、表現と芸術の手段 として強調し、Web開発者がモダンCSSの可能性をもっと活用することを勧めている

---

序論: Webの複雑さ、そして新しい試み

• 多くのWebサイトがJavaScriptフレームワークの過剰使用によって性能低下と複雑化に悩まされている
  • Reactアプリは読み込みに数秒かかり、NextJSはハイドレーションエラーを発生させる
  • node_modules フォルダは数GBの容量を占める
• JavaScriptがなくてもHTMLとCSSだけで強力な機能を実装できる
  • ECサイトの複雑なカートやダッシュボード以外では、JavaScriptが必須ではない場合もある
• この記事はCSSの最新機能を紹介し、開発者がJavaScriptだけに依存せず多様な可能性を探るよう促している

CSSに対する誤解と認識

CSSは本当に難しくて不便なのか?

• CSSに対する否定的な認識は、基礎学習の不足に由来する
  • 多くの開発者はCSSの基礎を飛ばして、JavaScriptやTypeScriptに集中している
  • CSSは単なるスタイリングツールではなく、ドメイン特化言語として強力な機能を提供する
• CSSは**フレックスボックス（flexbox）**のようなツールで複雑なレイアウトを簡単に実装できる
  • 例: display: flex と justify-content: center でdivの中央揃えが簡単
  • ブラウザの開発者ツールは、フレックスボックスのプロパティを視覚的に調整できるウィジェットを提供する
• 一方（例: JS）だけを深く掘り下げてCSSをおろそかにすれば、負担が大きくなるのは当然である

CSSを書く苦痛、そして変化

• 昔のCSSはあまり快適ではなかったため、SassやTailwindのようなツールが登場した
  • 例: .post > .buttons .like:hover のような長いセレクタチェーンを管理しなければならなかった
• 最近は品質改善機能（ネストなど）が追加され、素のCSSだけでも快適に開発できるようになった
  • CSSネスト（nesting） は関連スタイルを1か所にまとめ、可読性を高める
    • 例: .post { & > .buttons { .like { &:hover { ... } } } }
    • 親子関係が明確になり、短くシンプルなクラス名を使える
• 相対色（relative colors） は色調整を容易にする
  • hsl(from #123456 h s calc(l + 10)) で明るさを調整できる
  • color-mix() で2色を混ぜて動的な色を作れる
• メディアクエリの範囲構文 により、(width <= 768px) のように直感的な条件設定が可能
• lh単位 は行の高さに合わせたスタイリングをサポートする
• scrollbar-gutter プロパティは、スクロールバーによるレイアウトシフトの問題を解決する
• Baseline は主要ブラウザでの機能互換性を保証する
  • newly available は最新ブラウザで動作する
  • widely available は2.5年前のブラウザまでサポートする
  • 例: CSSネストは2023年12月からすべてのブラウザでサポートされている

なぜCSS/HTMLだけで開発するのか?

• 一部のユーザーはJavaScriptをデフォルトで無効化している（セキュリティ、プライバシー保護などの理由）
• 純粋なCSS/HTMLだけでWebサイトを提供すれば、こうしたユーザーもサイトを利用できる可能性が高まる
• 開発側・利用側の両面で、CSS/HTMLだけを使うことには速度、アクセシビリティ、CPU/バッテリー使用の面で利点が大きい
  • CSSアニメーションはコンポジタスレッドで実行され、CPU負荷を減らす
  • JavaScriptはイベントループを通じて実行されるため、わずかな遅延が生じうる
• アクセシビリティと使いやすさも向上する
  • ボタンのホバー効果、トーストアニメーション、入力検証などはCSSで簡単に実装できる

CSSの実用的な例と主な機能

@starting-styleで自然な開始アニメーションを実装

• 以前は要素の登場アニメーションを実装するために、keyframesやJSトリガーなど複雑な構造が必要だった
• @starting-style の導入で開始状態の指定が簡単になった。要素の初期状態アニメーション（例: フェードイン）を容易に実装できる
  • transition: opacity 1s; @starting-style { opacity: 0; } のように設定
  • 別途 @keyframes やJavaScriptがなくても動作する
• transitionとともに初期状態を明示するだけで、自然にアニメーションが適用される
  • 例: トーストメッセージの透明度や位置の切り替えを滑らかに処理

ダーク/ライトモードの簡単なテーマ設定

• color-scheme: light dark は、ユーザーの設定に応じてテーマを自動で切り替える
• light-dark(#000, #FFF) 関数は、ライト/ダークモードに合った色を指定する
• ラジオボタンと**:has**セレクタで、ユーザーによるテーマ選択をサポートする
  • JavaScriptなしでCSSだけでテーマ切り替えが可能
  • 必要に応じてJavaScriptでテーマ保存/読み込みを追加できる

ラジオ/チェックボックスと :has, :checked などでカスタムUIを生成

• タブ、アコーディオン、トグルなど複雑なインタラクションもJavaScriptなしで実装可能
• ラジオボタン は :checked と :has でカスタムスタイリングできる
  • 例: label:has(input:checked) で選択されたボタンのスタイルを指定
  • opacity: 0 で入力要素を隠しつつ、スクリーンリーダーのアクセシビリティは維持する
• details要素 はFAQのようなアコーディオンメニューの実装に適している
  • name 属性で単一オープン状態を制御できる
  • [open] 状態に応じてアニメーションを追加できる

入力検証と状態反映

• pattern、required などのHTML属性と、CSS疑似クラス（:valid, :invalid, :user-valid など）を組み合わせることで、リアルタイム検証と視覚的フィードバックを提供できる
• 入力フィールドのoutline/borderスタイル変更などでユーザー体験を向上できる
• HTMLのpattern属性で入力フィールドの妥当性を検証する
  • 例: \w{3,16} で3〜16文字の英数字またはアンダースコアを許可
• CSSの**:valid** と :invalid で妥当性に応じてスタイリングする
  • :user-valid と :user-invalid は、ユーザーが入力した後にのみスタイルを適用する
• :has セレクタにより、入力状態に応じて別要素をスタイリングできる
• 一部の場合（例: 複雑な入力条件）ではJSが必要だが、大半はCSS/HTMLで十分である

ビューポート単位の正しい使い方

• vw/vh 単位はモバイルでアドレスバー（ナビゲーションバー）の表示/非表示に応じて精度の問題が発生する
• lvh/svh/dvh（largest/smallest/dynamic viewport height）など新しいビューポート単位の使用が推奨される
  • lvh: 全画面用（例: 全画面背景）
  • svh: 常に画面に見えている必要があるボタンやリンクなどに活用
  • dvh: スクロールなどの変化に応じて動的にサイズを割り当てる
• キーボードオーバーレイは interactive-widget 属性や VirtualKeyboard API で処理する
  • <meta name="viewport" content="width=device-width, interactive-widget=resizes-content">
  • Chromium系ブラウザでは navigator.virtualKeyboard.overlaysContent = true

CSSウィッシュリスト（惜しい点・欲しい機能）

• 再利用可能なブロック: クラス内で別のクラスを適用（例: @apply border）
• 結合されたメディアクエリセレクタ: @media とクラスセレクタの結合
• nth-child変数: span { --nth: nth-child(); } による動的スタイリング
• nth-letterセレクタ: 特定の文字をスタイリング（例: p::nth-letter(2)）
• 単位の除去: calc(100vw / 1px) で単位なしの値を生成
• image()関数: 代替色と画像断片のサポート
• body内のstyleタグ: 公式標準サポートによるFOUC問題の緩和

まとめ: CSS、そしてWebの芸術性

• CSSは単なるツールではなく、創造的表現の手段である
• AIツール やビルドチェーン（リンター、minifyツール）は創造性を制限しうる
• CSSは性能、アクセシビリティ、芸術的表現を同時に満たす
• この記事は約49kBのJavaScriptなしのHTML/CSSで書かれている
  • すべてのインタラクティブなウィジェットと視覚要素は手作業で実装されている
  • 例: CSSクリックゲーム は、CSSのプログラミング言語としての可能性を証明している