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> ブラウザで開くとデザインが自動適用されます。下記の各ページで すべてのコンポーネントの見た目と使い方を確認できます。
ギャラリー一覧 コンポーネント早見表
タグ / クラスジャンル説明
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モバイルでサイドバーをボトムシート化