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

作るもの

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

始める前に

git と .NET SDK 8 以降が必要です。Blazor プロジェクトならどれでも使えます — Blazor Web App、Server、WebAssembly のいずれでも構いません。

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

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-blazor-headless
dotnet build
dotnet test      # bUnit — 1,400+ cases across the catalog

コンポーネントは次の場所にあります: src/LilyBlazorHeadless/Components/ — Button.razor, TextInput.razor — 1 コンポーネントにつき 1 つの Razor ファイルです。Blazor アプリからそのプロジェクトを参照する(またはファイルをコピーする)か、 @using LilyBlazorHeadless.Components を次のファイルに追加します: _Imports.razor.

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

<Button OnClick="Save">Save</Button>

描画する要素: <button class="button">。共通のパラメーターの規約: Label ( aria-label の上書き用)、 CssClass (基本のフックに追加されます)、 ChildContent、そして [Parameter(CaptureUnmatchedValues = true)] 属性スプラッティングにより、追加の HTML 属性はそのまま渡されます。

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

<Form OnSubmit="HandleSubmit">
  <Field Label="Full name" Required="true">
    <TextInput Id="name" Label="Full name" @bind-Value="name" Required="true" />
  </Field>
  <Button Type="submit">Save</Button>
</Form>

@code {
  private string name = "";
}

Field は、表示用の Label を、ネストしたラベルコンポーネントではなく専用のパラメーターとして受け取ります — 一度だけ渡せば、 Field、そして TextInputの対応する Label がアクセシブルな名前を与えます。

2026-08-29 に確認済み: 以前の下書きでは、別の Label コンポーネントを Fieldの中にネストしていたため、 2 つの ラベル(1 つは空)が描画されていました。 Field は Label パラメーター — コンポーネントのソースを確認して見つけました。 Form 自体には Label パラメーターがないため、以前の下書きの <Form> の使い方は、存在しない属性を作り出すのではなく、指定しない形に修正されました。お問い合わせフォームの組み合わせルートも同じパターンで、本物の e2e テストと axe テストで検証されています。

動作の確認: アプリを実行すると、フォームは飾りのない見た目になります — 意図どおりで、スタイルはこれからです。 Tabキーを押してみましょう。フォーカスがすべてのコントロールを移動し、ラベルが読み上げられ、送信も動きます。動作は完成しています。見た目はあなた次第で、次のステップです。

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

クラスフックにスタイルを付けます — .button, .text-input, .label, .field — 次の場所で: app.css、または既成のテーマを次の場所でリンクします: App.razor / index.html:

<link rel="stylesheet" href="themes/wireframe.css" />

ステップ 5 — 動いているところを見る

Blazor Web サンプルアプリは、スタイル付きでデモ付きの完全なカタログを表示し、Playwright e2e テストも備えています:

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-blazor-web-examples
dotnet run --project src/LilyBlazorWebExamples

次のステップ

テーマ設定 — Blazor の theme-picker ヘルパー(NuGet の Razor クラスライブラリ)による実行時切り替え。
設定ヘルパー — 言語とテキストサイズ。
コンポーネントカタログ — コンポーネントごとのプロパティ、ARIA、キーボード操作。

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