レスポンシブデザイン

Hypermedia Components は、ブレークポイントプレフィックスつきクラスのグリッドではなく、構造そのものによってレスポンシブです。覚えるべき sm: / md: / lg: 体系はありません。代わりに 3 つの層が協調し、レイアウトは実際に与えられたスペースに適応します:

コンポーネントは本質的に流動的。 入力欄、ボタン、カードなどはコンテナを満たし、固定ピクセル幅を持ちません。オーバーレイ (hc-dialog、hc-drawer、hc-command)は幅をビューポートに制限し(max-inline-size + calc(100% - …))、横並びグループ (hc-toolbar、hc-tabs、hc-breadcrumb、hc-pagination)は折り返します。
レイアウトユーティリティはコンテナレスポンシブ。 hc-stack、 hc-cluster、hc-grid、hc-sidebar、hc-container は、ビューポートではなく自分のコンテナの幅に基づいて、flex-wrap、グリッドの auto-fill、コンテンツベースのフレックス比で再配置します。メディアクエリなし。 ページ半分の幅のパネルに置いても、そこで適応します。
シェルはビューポートレスポンシブ。 hc-shell だけがビューポートブレークポイントを持ちます。全画面アプリケーションシェルのコンテナはビューポートそのものだからです。

ビューポートファーストではなくコンテナファースト

ここでのモダンなデフォルトはコンテナクエリ(およびその intrinsic な親戚である flex-wrap とグリッド auto-fill)です。コンポーネントは画面サイズではなく、与えられた余地に応答すべきです — 同じカードグリッドがあるルートでは全幅ページに、別のルートでは狭いドロワーの中に置かれるかもしれず、どちらにいるかを知らずに両方で正しく折り返すべきです。

ツール	応答対象	用途
`hc-grid`	コンテナ幅	列数が変わるカード / タイルギャラリー
`hc-sidebar`	コンテナ幅	1 カラムに畳まれるサイドバー + コンテンツ
`hc-cluster`	コンテナ幅	ボタン行、タグリスト、ツールバー
`hc-stack`	—(リズムのみ)	一貫した縦方向の間隔
`hc-container`	コンテナ幅	中央寄せの最大幅コンテンツ領域
`hc-shell`	ビューポート幅	アプリ全体のレイアウト(サイドバー ↔ オフキャンバス)

ビューポートメディアクエリが正しい道具になるのは、ちょうど 1 つの状況だけです: ビューポートを満たし、固いしきい値で構造的に変わる必要のあるレイアウト — つまりシェルがサイドバーをオフキャンバスオーバーレイに畳むとき。それ以外はすべてコンテナレスポンシブなユーティリティを使ってください。

密度軸もレスポンシブのレバー

data-density="comfortable | compact | dense" は、1 つの属性で全コンポーネントのコントロール高さとパディングをスケールし直します。レイアウトとは直交します: 情報密度の高いデスクトップツールでは高く、タッチデバイスではタップターゲットを大きくするために下げる、という使い方ができます。トークン · 密度を参照。

よくあるパターン

レスポンシブカードグリッド — 収まるだけ並べて、折り返す:

<div class="hc-grid" style="--hc-grid-min: 16rem;">
  <article class="hc-card">…</article>
  <article class="hc-card">…</article>
  <!-- …as many as you like -->
</div>

自力で畳まれるサイドバー + コンテンツ:

<div class="hc-sidebar">
  <nav aria-label="Filters">…</nav>
  <main>…</main>
</div>

幅の広いデータテーブル — オーバーフローを閉じ込め、ページを押し広げない:

<div class="hc-table-scroll" role="region" aria-label="Orders" tabindex="0">
  <table class="hc-table">…</table>
</div>

アプリケーション全体のレイアウト:

<div class="hc-shell">
  <header class="hc-shell__header">
    <button class="hc-button" data-variant="ghost"
            data-hc-shell-toggle aria-label="Open navigation" type="button">≡</button>
    <strong>Acme</strong>
  </header>
  <nav class="hc-shell__sidebar" aria-label="Primary">…</nav>
  <main class="hc-shell__main">…</main>
</div>

Web 機能の Baseline

レスポンシブ層は広く利用可能な Baseline CSS に依っています: flex-wrap、CSS Grid の repeat(auto-fill, minmax(min(…, 100%), 1fr))、論理プロパティ (inline-size、padding-inline、…)、100dvh 動的ビューポート単位、 :has()。レイアウト自体に JavaScript は関与しません — シェルのモバイルナビゲーションオーバーレイだけが、フォーカス管理のために小さなビヘイビアを使います。

レスポンシブデザイン

ビューポートファーストではなくコンテナファースト

密度軸もレスポンシブのレバー

よくあるパターン

Web 機能の Baseline

関連