HTML チュートリアル — Lily Design System

作るもの

小さなお問い合わせフォーム — ラベル付き入力、送信ボタン、本物のキーボードとスクリーンリーダーの動作 — まずは装飾なしで、次にスタイルを付けて、約 10 分で作ります。

始める前に

必要なのはブラウザーとテキストエディターだけです。(コンポーネントのファイルを取得するには git が便利ですが、ブラウザーで GitHub からコピーすることもできます。)

ステップ 1 — コードを入手する

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-html-headless

すべてのコンポーネントは、次の場所に単独のファイルとして置かれています: components/ — button.html, text-input.htmlなど — 先頭のコメントに、HTML タグ、クラスフック、キーボード操作、アクセシビリティの契約が書かれています。これらのファイルは ライブラリそのものです — 必要なものをコピーして始めましょう。

ステップ 2 — 最初のコンポーネント

開く: components/button.html、またはマークアップをそのまま書きます — クラスフックが契約です:

<button class="button" type="button">
  Save
</button>

本物の <button>なので、キーボードフォーカス、Enter と Space による操作、暗黙のボタンロールは、すでに正しく動作します。

ステップ 3 — 小さなフォームを組み立てる

<form class="form">
  <div class="field">
    <label class="label" for="name">Full name</label>
    <input class="text-input" type="text" id="name" name="name" required />
  </div>
  <div class="field">
    <label class="label" for="email">Email</label>
    <input class="email-input" type="email" id="email" name="email" required />
  </div>
  <button class="button" type="submit">Save</button>
</form>

パターンに注目してください: すべてのコントロールが自分の <label for>にひも付き、最も具体的な input タイプを使い、ケバブケースのクラスフックをちょうど 1 つだけ持ちます。

動作の確認: ブラウザーでページを開きます。見た目は素っ気ないはずです — 意図どおりで、スタイルはこれからです。 Tab: フォーカスがすべてのコントロールを移動し、ラベルが読み上げられ、送信も動きます。動作は完成しています。見た目はあなた次第で、次のステップです。

ステップ 4 — スタイルを付ける

フックに対して CSS を書きます:

.button {
  background: #2563eb;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 0.5rem;
}
.text-input,
.email-input {
  padding: 0.5rem 0.75rem;
  border: 2px solid #6b7280;
  border-radius: 0.25rem;
}
.label { display: block; font-weight: 600; margin-bottom: 0.25rem; }

あるいは CSS を自分で書くのをやめて、45 の既成テーマのどれかをリンクすれば、同じマークアップがそのまま装飾されます:

<link rel="stylesheet" href="/themes/united-kingdom-national-health-service-england-for-patients.css" />

ステップ 5 — さらに探る

このリポジトリのテストは、本物のブラウザーで実行されます: pnpm install && pnpm test (WebDriverIO)。
すべてのコンポーネントの Storybook: pnpm run storybook.
HTML+CSS+JS サンプルアプリは、571 のコンポーネントすべてを、スタイル付きで、検索可能に、デモ付きで表示します。

次のステップ

テーマ設定 — theme-picker による実行時のテーマ切り替え。
設定ヘルパー — 言語とテキストサイズ。
コンポーネントカタログ — 完全なリファレンス。

途中で疑問があれば、ヘルプページに答えがたくさんあります。もし手順がもっと分かりやすくできるなら、お知らせください。喜んでチュートリアルを改善します。