Component Gallery

このページは Halcyon デザインシステム のコンポーネント（Webパーツ）一覧の目次です。

Webパーツ（コンポーネント）とは、ページを構成する「部品」のことです。 ボタン・カード・ナビゲーションバーなど、繰り返し使うUIを1つのタグにまとめたもので、 HTMLに書くだけで見た目と動きが自動的に適用されます。

はじめかた
HTMLの </body> 直前に1行追加するだけで準備完了です。 <script src="components/components.js"></script> 使いたいコンポーネントのタグをHTMLに書きます。属性で外見や動作をカスタマイズできます。 <hl-button>ボタン</hl-button> <hl-alert>お知らせ文</hl-alert> <hl-card title="カードタイトル" href="#">説明文</hl-card> ブラウザで開くとデザインが自動適用されます。下記の各ページで すべてのコンポーネントの見た目と使い方を確認できます。
ギャラリー一覧
デザイン基礎 カラーパレット・レイアウト・タイポグラフィ・ヘッダー・フッター・グローバルスタイルなどの土台となる設計を解説します。
Color Palette Layout Typography Header/Footer Animation
UI コンポーネント ページで最もよく使う基本的なUI部品。ボタン・アラート・バッジ・アコーディオン・タブ・モーダル・ツールチップ・モバイルシートなど。
hl-button hl-alert hl-tabs hl-modal hl-tooltip hl-chip hl-app-sheet
コンテンツ 記事・シナリオ・ブログなどで使うコンポーネント。チャットUI・カード・カルーセル・引用・リード文・比較・図版・参考文献・脚注・検索フィルタなど。
hl-chat hl-card-grid hl-archive-search hl-lead hl-compare hl-fn
データ・フォーム フォーム入力・データ表示・スライダー・ローディング演出など。ユーザーから情報を受け取ったり、一覧データを整理・表示します。
hl-input hl-select hl-file-input hl-table hl-slider hl-skeleton
動画埋め込み YouTube・Niconico の動画を記事に埋め込むためのコンポーネント。URLを指定するだけでレスポンシブな16:9プレーヤーになります。
hl-embed YouTube Niconico responsive
コンポーネント早見表
タグ / クラスジャンル説明
site-header基礎ページ上部固定ナビゲーション
site-footer基礎ページ下部リンク・クレジット
page-title基礎H1 ページタイトル（下線付き）
section-heading基礎H2 セクション見出し（左バー付き）
hl-layout基礎1・2カラムレイアウトコンテナ
hl-buttonUIボタン（Primary / Secondary / Loading）
hl-alertUIお知らせ・警告・成功メッセージ
.hl-badgeUIカテゴリタグ・バッジ
.hl-linkUIインラインリンクスタイル
hl-accordionUIクリックで開閉する折りたたみ
hl-tabsUIタブ切り替えUI
hl-modalUIモーダルダイアログ
hl-tooltipUIホバーでヒント表示
hl-popoverUIクリックで吹き出しパネル
hl-drawerUIサイドからスライドインするパネル
hl-dividerUI区切り線（ラベル・破線・太線）
hl-avatarUIユーザーアイコン・丸サムネイル
hl-chipUI小さなタグ・ラベル要素
hl-imageUI遅延読み込み（Blur-Up）画像
hl-cardコンテンツサムネイル付き記事・作品カード
hl-chatコンテンツチャット形式のセリフUI
hl-codeコンテンツシンタックスハイライト付きコードブロック
hl-step / hl-step-itemコンテンツ番号付き手順ステップ
hl-carouselコンテンツスライドカルーセル
hl-quoteコンテンツ引用ブロック（出典リンク付き）
hl-shareコンテンツSNSシェア・URLコピーボタン
hl-tocコンテンツ目次（section-headingから自動生成）
hl-profileコンテンツサイドバー用プロフィールボックス
hl-breadcrumbコンテンツパンくずリスト
hl-sidebar-boxコンテンツサイドバーカスタムボックス
hl-inputフォームテキスト入力フィールド
hl-textareaフォーム複数行テキスト入力
hl-selectフォームドロップダウン選択
hl-checkbox / hl-radioフォームチェックボックス・ラジオボタン
hl-toggleフォームトグルスイッチ
hl-tableデータテーブル（縞々・コンパクト対応）
hl-paginationデータページネーション
hl-skeletonデータローディングプレースホルダー
hl-sliderデータスライダー入力
hl-embedメディア動画埋め込み（YouTube / Niconico）
hl-figureメディアキャプション付き画像ブロック
hl-card-gridコンテンツカードをグリッド配置するコンテナ（cols: 2/3/4）
hl-archive-searchコンテンツhl-card をリアルタイム検索フィルタリング
hl-leadコンテンツ記事冒頭のリード文ブロック
hl-compareコンテンツ左右2カラム比較レイアウト
hl-citeコンテンツ参考文献・引用元情報ブロック
hl-fn / hl-fn-item / hl-footnotesコンテンツ本文脚注の双方向リンク
hl-file-inputフォームファイル選択（ボタン型・D&Dゾーン型）
hl-app-sheetUIモバイルでサイドバーをボトムシート化