クイックスタート

このページでは、最小構成のページを 3 つの層で組み立てます。各層は単体で動作します。次の層は必要になったときにだけ足してください。

1. スタイルのみ

スタイルシートを読み込み、セマンティックなクラスを使います。JavaScript は不要です — ボタン、入力欄、カードなどは CSS だけで描画されます。

<link rel="stylesheet" href="/assets/hc/hc.css">

<button class="hc-button" data-variant="primary">Save</button>
<input class="hc-input" type="text" placeholder="Search…">

data-variant と data-size は CSS が読むスタイリング用フックです — JavaScript なしで機能します。

2. ビヘイビアを足す

ビヘイビアバンドルを読み込むと、インタラクティブなコンポーネント(メニュー、ダイアログ、トーストなど)が動き出します。ここでは hc:toast イベントを発火するとトーストが表示されるようになります:

<link rel="stylesheet" href="/assets/hc/hc.css">
<script type="module" src="/assets/hc/hc.behaviors.min.js"></script>

<button class="hc-button"
        onclick="document.body.dispatchEvent(new CustomEvent('hc:toast', { bubbles: true, detail: { message: 'Saved' } }))">
  Save
</button>

このバンドルはすべてのビヘイビアをインストールし、トースト領域も自動で作成します。使うビヘイビアだけをインストールしたい場合はインストール → ビヘイビアを参照してください。

3. htmx を足す

リクエスト送信のために htmx を読み込みます。htmx はスクリプト 1 つです — CDN から <script defer src="https://unpkg.com/htmx.org@2"></script> で読み込むか、自分のアセットにコピーしてください。バージョン固定 + integrity 付きの形式は htmx のインストールドキュメントを参照してください。 data-hx-* 属性を読むのは htmx であって HC ではありません — HC はボタンのスタイルだけを担当します。Add item をクリックすると /items に POST し、サーバが返す <li> 1 件を htmx がリストに追加します:

<link rel="stylesheet" href="/assets/hc/hc.css">
<script defer src="/assets/htmx.min.js"></script>
<script type="module" src="/assets/hc/hc.behaviors.min.js"></script>

<button class="hc-button" data-variant="primary"
        data-hx-post="/items"
        data-hx-target="#items"
        data-hx-swap="beforeend">
  Add item
</button>
<ul id="items"></ul>

Plain HTML ガイドには、同じ構成を完全な実行可能ページ(静的サーバとトースト領域つき)としてまとめてあります。

1 ファイルで試す

サーバもインストールも不要です。これを index.html として保存し、ブラウザで開いてください — CSS とビヘイビアは CDN から読み込まれます (インストール → CDNを参照):

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hypermedia Components</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hypermedia-components/core/dist/hc.min.css">
    <script type="module" src="https://cdn.jsdelivr.net/npm/@hypermedia-components/core/dist/hc.behaviors.min.js"></script>
  </head>
  <body style="padding: 2rem;">
    <div class="hc-stack" style="--hc-stack-gap: 1rem; max-inline-size: 24rem;">
      <button class="hc-button" data-variant="primary"
              onclick="document.body.dispatchEvent(new CustomEvent('hc:toast', { bubbles: true, detail: { message: 'Saved' } }))">
        Save
      </button>
      <label class="hc-switch-label">
        <input class="hc-switch" type="checkbox" role="switch" checked>
        Email notifications
      </label>
    </div>
  </body>
</html>

ボタンはトーストを発火し(ビヘイビア。トースト領域はバンドルが自動で作成します)、スイッチは CSS だけで描画されます — CDN のファイル 2 つでキット全体が動いています。

次のステップ

コンポーネント — 全コンポーネントをライブ例つきで。
レシピ — htmx パターン集(確認、ライブ検索、トースト…)。
インテグレーション — Django、Rails、Go、Razor ほか。