データ・フォーム
入力フォーム・データ表示・スライダー・ローディングなどを扱うページです。
コンポーネント一覧は Gallery インデックス をご覧ください。
Forms
フォームはユーザーから情報を入力・選択してもらうためのUI部品です。
お問い合わせページ・登録フォーム・設定画面などで使います。
label・placeholder・required属性をタグに書くだけで、アクセシブルなフォームが完成します。
<hl-input name="name" label="お名前" placeholder="例：きゅー" required></hl-input>
<hl-input name="email" label="メールアドレス" type="email"
placeholder="example@mail.com" hint="公開されることはありません" optional></hl-input>
<hl-input name="password" label="パスワード" type="password"
placeholder="8文字以上" required></hl-input>
<hl-textarea
name="message"
label="お問い合わせ内容"
placeholder="ご自由にどうぞ。"
hint="10文字以上でご記入ください。"
required
rows="5"></hl-textarea>
<hl-select name="category" label="カテゴリ" required>
<option value="">選択してください</option>
<option value="web">Webツール</option>
<option value="game">ゲーム</option>
<option value="design">デザイン</option>
</hl-select>
<div class="hl-field">
<span class="hl-label">興味のある分野</span>
<div class="hl-check-group">
<hl-checkbox name="interest" value="web" label="Webツール" checked></hl-checkbox>
<hl-checkbox name="interest" value="game" label="ゲーム"></hl-checkbox>
</div>
</div>
<div class="hl-field">
<span class="hl-label">ご連絡方法</span>
<div class="hl-check-group">
<hl-radio name="contact" value="email" label="メール" checked></hl-radio>
<hl-radio name="contact" value="twitter" label="X (Twitter)"></hl-radio>
</div>
</div>
<hl-toggle name="notify" label="メール通知を受け取る" checked></hl-toggle>
<hl-toggle name="darkmode" label="ダークモード"></hl-toggle>
<hl-toggle name="public" label="プロフィールを公開する" checked></hl-toggle>
スタイル付きのファイル選択コンポーネントです。drop属性でドラッグ＆ドロップゾーンUIになります。
.filesプロパティで選択されたFileListを取得でき、changeイベントが発火します。
標準（ボタン型）
ドロップゾーン型（drop属性）
<!-- 標準ボタン型 -->
<hl-file-input accept="image/*"></hl-file-input>
<!-- ドラッグ＆ドロップゾーン型 -->
<hl-file-input accept="image/*" multiple drop></hl-file-input>
<!-- accept: MIME タイプ・拡張子（例: "image/*" ".pdf"） -->
<!-- multiple: 複数ファイル選択を許可 -->
<!-- drop: ドラッグ＆ドロップゾーン UI を使用 -->
/* JS API */
const fi = document.querySelector('hl-file-input');
// ファイル選択・ドロップ時に発火
fi.addEventListener('change', () => {
console.log(fi.files); // FileList
});
// 選択状態をクリア
fi.reset();
Slider
数値を視覚的なトラック上でドラッグして入力する UI です。
音量・透明度・価格範囲など、連続した値を直感的に選ばせたい場面に使います。
マウス・タッチ・キーボード（← → Home End）での操作に対応します。
<hl-slider label="音量" min="0" max="100" value="60" unit="%"></hl-slider>
<!-- step・ticks属性で目盛り表示 -->
<hl-slider label="明るさ" min="0" max="100" value="80" step="5" unit="%" ticks="0,25,50,75,100"></hl-slider>
<!-- 小数点ステップ -->
<hl-slider label="ズーム倍率" min="1" max="5" step="0.5" value="2" unit="×"></hl-slider>
スライダーを動かすと hl-slider-change イベントが発火します。
e.detail.value で現在値を取得できます。
このボックスの透明度が変わります
現在値: 80
<hl-slider id="my-slider" label="不透明度" min="0" max="100" value="80" unit="%"></hl-slider>
<script>
document.getElementById('my-slider')
.addEventListener('hl-slider-change', e => {
console.log('value:', e.detail.value);
});
</script>
| 属性 | 型 | デフォルト | 説明 |
|---|
min | number | 0 | 最小値 |
max | number | 100 | 最大値 |
step | number | 1 | 刻み値 |
value | number | min | 初期値・現在値 |
label | string | — | ラベル文字列 |
unit | string | — | 値の後ろに付く単位（例: %、px） |
ticks | string | — | カンマ区切りの目盛りラベル |
disabled | 真偽値 | false | 操作を無効化 |
Data Display
複数のデータを整理・表示するためのパーツです。
テーブルは行・列で情報を整理、
ページネーションは大量データをページ分割、
スケルトンはコンテンツロード中のプレースホルダーを表示します。
スマホでのテーブルに注意 —
列数が多いテーブルはスマホで横に広がりすぎて読みにくくなります。
列数が多い場合は「カードUI」「リスト表示」に置き換えるか、overflow-x: auto で横スクロールさせる扱いが一般的です。
| 名前 |
カテゴリ |
状態 |
更新日 |
| Halcyon UI | Webツール | 公開中 | 2025-05-07 |
| ゲームログ vol.3 | ゲーム | 準備中 | 2025-04-20 |
| アバターメーカー | デザイン | 公開中 | 2025-03-15 |
| 音楽プレイリスト | 音楽 | 非公開 | 2025-02-01 |
<hl-table striped>
<table>
<thead>
<tr><th>名前</th><th>カテゴリ</th><th>状態</th></tr>
</thead>
<tbody>
<tr><td>Halcyon UI</td><td>Webツール</td><td>公開中</td></tr>
</tbody>
</table>
</hl-table>
<!-- 属性: striped（縞々） compact（コンパクト） -->
現在: 3ページ目 / 12ページ
<hl-pagination total="12" page="3"></hl-pagination>
<!-- page変更イベントを受け取る例 -->
<script>
document.querySelector('hl-pagination')
.addEventListener('hl-page-change', e => {
console.log('ページ:', e.detail.page);
});
</script>
<!-- 属性: total（総ページ数）, page（現在ページ）, siblings（前後に表示するページ数） -->
<!-- カードのロード前プレースホルダー -->
<hl-skeleton type="circle" width="56px" height="56px"></hl-skeleton>
<hl-skeleton type="title" width="55%"></hl-skeleton>
<hl-skeleton type="text" lines="3"></hl-skeleton>
<hl-skeleton type="card" height="160px"></hl-skeleton>
<!-- type: text | title | circle | rect | card -->
Loading Overlay
ページ最初の読み込み時に表示される全画面ローディング演出です。
キャラクターが道を歩き、プログレスバーが進捗を表示します。
ページ読み込み完了後に自動でフェードアウトします。
このコンポーネントはページ読み込み時に自動起動するため、通常ページ内デモはできません。
ページをリロードするとローディング画面を確認できます。
ローディング画面は以下のステージで進行します：
キャラクターが頷いて登場。
プログレスバーに合わせてキャラクターが道を歩く。マイルストーン（星）が順番に点灯。
読み込みが遅れる場合、つま先立ちでじっと待機。
キャラクターが手を振り、フェードアウト。
.hl-bar-track と .hl-bar-fill で構成されるプログレスバーです。
グラデーションが Sage → Dusty Blue → Peach へ変化します。
<!-- ローディングオーバーレイのHTMLはcomponents.jsが自動生成します -->
<!-- JSで進捗を直接操作する場合: -->
<script>
const fill = document.querySelector('.hl-bar-fill');
const pct = document.querySelector('.hl-bar-pct');
fill.style.width = '75%';
pct.textContent = '75%';
</script>
ローディングで表示するキャラクターは components.js 内の変数で設定します。
// components.js 内で設定
const LOADING_CHAR = 'Akari'; // hl-char/Akari.png を参照
// 画像が存在しない場合は CSS で描いた
// デフォルトの鳥キャラクター (.css-bird) にフォールバックします