コンテンツ
記事・ブログ・シナリオなどコンテンツを表示するためのコンポーネントをまとめたページです。
コンポーネント一覧は Gallery インデックス をご覧ください。
Cards
カードは、サムネイル画像・タイトル・説明文をひとまとめにしたUI部品です。
hl-card-gridでグリッドレイアウト、hl-archive-searchでリアルタイム検索フィルタが使えます。
hl-card-gridのcols属性でカラム数を指定します。スマホ(≦540px)は1カラム、タブレット(≦860px)は2カラムに自動調整されます。
cols="2"
サムネイル画像付きの標準カードです。ホバーで浮き上がり、画像が拡大します。
画像を省略した軽量版カードです。テキストのみの場合に使います。
cols="3"（デフォルト）
カード説明文のサンプルテキストです。
カード説明文のサンプルテキストです。
カード説明文のサンプルテキストです。
<!-- hl-card-grid の cols 属性でカラム数を指定 -->
<hl-card-grid cols="2">
<hl-card
title="画像付きカード"
image="https://example.com/image.jpg"
href="#">
説明文テキスト
</hl-card>
<hl-card title="シンプルカード" href="#">
画像を省略した軽量カードです。
</hl-card>
</hl-card-grid>
<!-- cols: 2 | 3 | 4（省略時はデフォルト 3） -->
<!-- ≦860px → 2カラム、≦540px → 1カラムに自動調整 -->
target属性に指定したコンテナ内のhl-cardをタイトル・本文でリアルタイムフィルタリングします。
マッチするカードが0件のセクションは丸ごと非表示になります。
Webデザインシステム。カスタム要素・CSS・ローディングを1ファイルで提供します。
最近プレイしたゲームの記録。感想・攻略メモなどをまとめています。
キャラクターアバターを生成できるWebツールです。
最近聴いている曲をまとめたプレイリストです。
カラーパレット・タイポグラフィの設計思想を解説します。
毎日解けるロジックパズルのWebアプリです。
<!-- target属性に検索対象コンテナの id を指定 -->
<hl-archive-search target="my-cards" placeholder="検索…"></hl-archive-search>
<div id="my-cards">
<section class="hl-section">
<hl-card-grid cols="3">
<hl-card title="タイトルA" href="#">説明文A</hl-card>
<hl-card title="タイトルB" href="#">説明文B</hl-card>
</hl-card-grid>
</section>
</div>
<!-- フィルタリングはタイトル・本文テキストに対してリアルタイムで実行 -->
<!-- セクション内のカードが全件非表示になるとセクションごと非表示 -->
Chat UI
LINEやDiscordのようなチャット形式でセリフを表示するUIです。
キャラクターが複数登場するシナリオ・SSS・小説など、「会話形式で内容を伝える」ページに最適です。
左寄せのメッセージです。キャラA（Akari）が話しています。
右寄せのメッセージです。align="right" で右寄せになります。
char 属性でアイコンとバブルの色が切り替わります。
画像がない場合はアルファベットにフォールバックします。
<!-- char: A〜F またはキャラクター名 / align: left または right -->
<hl-chat char="A" align="left">左寄せのメッセージです。</hl-chat>
<hl-chat char="B" align="right">右寄せのメッセージです。</hl-chat>
char 属性に A〜Fのアルファベットを指定すると、内部でキャラクター名に変換されます。
アイコン画像は hl-char/{キャラクター名}.png から自動取得されます。
| char属性 | キャラクター名 | バブル色 | アイコンパス |
|---|
A | Akari | Rose | hl-char/Akari.png |
B | Becky | Sky Blue | hl-char/Becky.png |
C | Charlotte | Lavender | hl-char/Charlotte.png |
D | Dulcie | Coral | hl-char/Dulcie.png |
E | Esme | Amber | hl-char/Esme.png |
F | Fuka | Mint | hl-char/Fuka.png |
A〜F以外の文字列（例: char="Akari"）を直接指定することもできます。
その場合は hl-char/{char属性の値}.png が直接参照されます。
複数キャラクターの会話の例です。
キャラA：おはよう！今日の天気は？
キャラB：小雨が降りそうだよ。
キャラC：じゃあ傘を持って帰るね。
キャラA：また明日ね！
<hl-chat char="A" align="left">キャラA：おはよう！今日の天気は？</hl-chat>
<hl-chat char="B" align="right">キャラB：小雨が降りそうだよ。</hl-chat>
<hl-chat char="C" align="left">キャラC：じゃあ傘を持って帰るね。</hl-chat>
<hl-chat char="A" align="left">キャラA：また明日ね！</hl-chat>
記事の文字数に合わせて登場人物の人数を調整すると、読み心地のよい会話が生まれます。
| 記事の長さ |
適切な人数 |
ポイント |
短め
〜6,000字 |
2〜3人 |
サクッと読ませるコラムなので、登場人物が多すぎると読者の視点がブレます。1ペアの会話で走り切るか、最後に1人が締める程度がスッキリします。 |
中程度
6,000〜11,000字 |
3〜4人 |
最も自由度の高い黄金比です。導入でA×B、中盤でCが加わり、最後にEが締めるなど、記事の進行に合わせてメンバーを入れ替えると心地よいリズムとグループの立体感が生まれます。 |
長め
11,000字以上 |
4〜5人 |
章ごとに「内向的な2人」「外向的な3人」とシーンを切り替えることで、長文でも読者を飽きさせません。ごちゃまぜの組み合わせでもかまいません。 |
アイコン画像が存在しないキャラクターは、char 属性の値がアイコン内にテキスト表示されます。
画像なしのキャラクター。「X」と表示されます。
画像ファイルのみ用意すれば OK。画像を用意しなくても使えます。
src 属性に画像URLやパスを直接指定できます。char 属性はバブルの色のみに使われます。
画像は中央を基準にトリミングされます（object-fit: cover）。
src属性で画像パスを直接指定しています。
外部URLや自サイトの任意のパスを指定できます。
正方形でない画像も中央切り抜きで表示されます。
<!-- src属性で直接画像パスを指定（ローカルパス・外部URLどちらも可） -->
<hl-chat src="/images/chara.png" char="A" align="left">メッセージ</hl-chat>
<hl-chat src="https://example.com/avatar.png" char="B" align="right">メッセージ</hl-chat>
<!-- char属性はバブルの色のみを担当（A〜F）。src未指定なら画像URLも決まる -->
<!-- 画像は中央切り抜き（object-fit: cover / object-position: center）-->
Code & Step
記事・ドキュメント的なページで活躍するパーツです。
hl-codeはコードを色付きで整形・コピーボタン付きで表示、
hl-stepは手順・フローを視覚的な番号付きステップで表現します。
function helloHalcyon() {
console.log("Where the world falls silent.");
}
<hl-layout cols="2">
<div class="hl-layout-main">...</div>
<aside class="hl-layout-sidebar">...</aside>
</hl-layout>
<hl-code lang="javascript">
function helloHalcyon() {
console.log("Where the world falls silent.");
}
</hl-code>
<hl-code lang="html">
<hl-layout cols="2">
<div class="hl-layout-main">...</div>
</hl-layout>
</hl-code>
VS Codeを開き、components.js をプロジェクトに配置します。
HTMLの </body> 直前に <script src="components/components.js"></script> を追加します。
カスタム要素（<hl-button> など）をHTMLに書くだけでデザインが適用されます。
<hl-step>
<hl-step-item num="1" title="事前準備">
VS Codeを開き、components.js をプロジェクトに配置します。
</hl-step-item>
<hl-step-item num="2" title="スクリプトを読み込む">
HTMLの </body> 直前に <script src="components/components.js"></script> を追加します。
</hl-step-item>
<hl-step-item num="3" title="完成！">
カスタム要素をHTMLに書くだけでデザインが適用されます。
</hl-step-item>
</hl-step>
Article Components
ブログ記事・ノートなどで活躍するコンテンツ装飾コンポーネントです。
リード文・引用・比較・図版・参考文献・脚注・シェアを専用タグで簡単に配置できます。
記事冒頭に置くリード文コンポーネントです。左ボーダーとライトグリーンの背景で本文と区別されます。
このページは Halcyon デザインシステムのコンテンツ系コンポーネントを紹介するデモページです。各コンポーネントはHTMLタグひとつで呼び出せます。
<!-- 記事先頭、page-title の直後に配置 -->
<hl-lead>
<p>このページは…リード文テキスト…</p>
</hl-lead>
画像にキャプションと出典を付けるコンポーネントです。src・caption・source・source-url属性で指定します。
<hl-figure
src="https://example.com/image.jpg"
alt="画像の説明"
caption="画像のキャプションテキスト"
source="出典サイト名"
source-url="https://example.com/">
</hl-figure>
<!-- src を省略すると子要素の <img> をそのまま使用 -->
<!-- source-url を省略するとリンクなしの出典テキスト表示 -->
左右2カラムで内容を並べて比較するコンポーネントです。left-label・right-label属性でラベルを指定し、子要素のslot="left"/slot="right"に内容を入れます。スマホでは縦積みになります。
変更前
- 手書きのCSS
- コンポーネントなし
- コード量が多い
変更後
- デザイントークンで統一
- カスタム要素を利用
- 1行で配置完了
<hl-compare left-label="Before" right-label="After">
<div slot="left">
左カラムの内容
</div>
<div slot="right">
右カラムの内容
</div>
</hl-compare>
<!-- left-label / right-label: 各カラムの見出し（デフォルト: A / B） -->
<!-- スマホ(≦640px)では縦積みに自動変換 -->
参考文献・引用元情報を整形して表示するコンポーネントです。title・author・publisher・year・url・accessed属性で指定します。
<hl-cite
title="記事・書籍名"
author="著者名"
publisher="出版社・サイト名"
year="2025"
url="https://example.com/"
accessed="2026.06.03">
</hl-cite>
<!-- url・accessed は任意。URLは自動でリンクになります -->
本文中に<hl-fn num="1">を置き、末尾の<hl-footnotes>内に<hl-fn-item num="1">で対応する注釈を書きます。番号はリンクで相互ジャンプできます。
Halcyon はカスタム要素を使ったデザインシステムです。
コンポーネントは components.js 1ファイルで提供されます。
Web Components 仕様に基づくカスタム HTML 要素のこと。ブラウザネイティブで動作します。
約 200KB のファイルに CSS・コンポーネント定義・ローディング演出がすべて含まれます。
<!-- 1. 本文中に参照マーカーを置く -->
<p>
Halcyon はカスタム要素<hl-fn num="1"></hl-fn>を使ったデザインシステムです。
</p>
<!-- 2. 記事末尾に注釈リストを配置 -->
<hl-footnotes label="注記">
<hl-fn-item num="1">
Web Components 仕様に基づくカスタム HTML 要素のこと。
</hl-fn-item>
</hl-footnotes>
<!-- num 属性の番号でマーカー注釈が双方向リンクになります -->
Where the world falls silent, we found our own halcyon days.
静かな世界で、私たちは穏やかな日々を見つけた。
<hl-quote source="Halcyon Design System" href="https://5gkyu.github.io/">
Where the world falls silent, we found our own halcyon days.<br>
静かな世界で、私たちは穏やかな日々を見つけた。
</hl-quote>
<!-- href属性を省略するとリンクなしのプレーンな引用元表示になります -->
<hl-share text="このページを共有する"></hl-share>
<!-- X（Twitter）へのシェア・OS標準シェア・全文クリップボードコピーが使えます -->
Carousel
カルーセルは画像やコンテンツを横方向にスライドして切り替えるUIです。
前後ボタンとドットインジケーターが自動生成されます。
スワイプ操作にも対応しています。
「カルーセル」はWeb業界では長年「非推奨」のトレンド
— ユーザーは2枚目以降のスライドをほぼ見ないというデータが多くあります。
コンテンツが大事な場合はカードグリッドやリスト表示の方が開示率が高まりやすいです。
<hl-carousel>
<div class="hl-carousel-slide">
<img src="image1.jpg" alt="スライド1" style="width:100%;border-radius:12px;">
</div>
<div class="hl-carousel-slide">
<img src="image2.jpg" alt="スライド2" style="width:100%;border-radius:12px;">
</div>
</hl-carousel>
<!-- 前後ボタン・ドットインジケーターは自動生成されます -->
<!-- スワイプ（タッチ・マウスドラッグ）にも対応しています -->
サイドバーはページの右列に表示する補助情報エリアです。
ここに並べるパーツ（プロフィール・目次）は、
このページの右側サイドバーで実際に動作しています。
title と icon 属性で見出しをカスタマイズできます。中には自由にコンテンツを配置できます。
<hl-sidebar-box title="カスタムボックス">
<p class="hl-content-text">
title と icon 属性で見出しをカスタマイズできます。
</p>
</hl-sidebar-box>
<hl-sidebar-box title="タグ一覧">
<div class="hl-tags-wrapper">
<a href="#" class="hl-badge">デザイン</a>
<a href="#" class="hl-badge">Webツール</a>
</div>
</hl-sidebar-box>
<!-- サイドバーに配置するだけ（内容はcomponents.jsに固定） -->
<hl-profile></hl-profile>
ページ内の <section-heading> を自動収集して目次を生成します。
スクロール位置に応じて現在地がハイライトされます。
右側のサイドバーで動作を確認できます。
<!-- サイドバーに置くだけで section-heading を自動収集 -->
<aside class="hl-layout-sidebar">
<hl-toc></hl-toc>
</aside>
Navigation
hl-breadcrumb はページのメインコンテンツ内、<page-title> の直前に配置します。
上位ページへの途中リンクを自動生成し、現在ページ名を最後に表示します。
<!-- page-title の直前に配置 -->
<div class="hl-layout-main">
<hl-breadcrumb current="このページ名"></hl-breadcrumb>
<page-title>ページタイトル</page-title>
...
</div>