ブックマーク / zenn.dev/dragon1208 (1)

  • モダンCSSが変えるフロントエンド設計「アフォーダンスレイヤー」のすすめ

    1. はじめに:コンポーネント指向の限界 UIを構築する際、ファイルアップロード用の<input type="file">を、ページ内の他のボタンと同じ見た目(シャドウ、ホバーエフェクト、余白など)にしたいケースはよくありますよね。しかし、ファイル入力をネイティブのUIと競合させずにスタイリングするには、クリック可能な要素として<label>を使用する必要があります。 一見問題ないように思えますが、例えばTailwind Labsの「Catalyst」のようなコンポーネントライブラリを使用している場合、<Button>コンポーネントは<button>要素や<Link>としてしかレンダリングされず、<label>にそのボタンスタイルを適用することができません。asChildのようなプロパティで要素を切り替えられる場合もありますが、これらはスタイルだけでなくコンポーネントの「振る舞い」まで渡し

    モダンCSSが変えるフロントエンド設計「アフォーダンスレイヤー」のすすめ
    tech0403
    tech0403 2026/03/25
  • 1