折りたたみセクション機能のデモ
• 約4分
折りたたみセクション機能のデモ
このページでは、カスタムRemarkプラグインを使用して実装した折りたたみセクション機能を紹介します。
基本的な使い方
詳細を表示
これは折りたたみ可能なセクションです。クリックして開閉できます。
通常のMarkdownテキストを含めることができます：
- リスト項目1
- リスト項目2
- リスト項目3
コードブロックを含む例
JavaScriptのサンプルコード
function greet(name) {
console.log(`Hello, ${name}!`);
}
greet("World");コードブロックも折りたたみセクション内に配置できます。
複雑なコンテンツ
表とリストの例
テーブル
| 項目 | 説明 | ステータス |
|---|---|---|
| 機能A | 実装完了 | ✅ |
| 機能B | 開発中 | 🚧 |
| 機能C | 計画中 | 📋 |
リスト
- 最初のステップ
- 次のステップ
- 最後のステップ
これは引用ブロックです。折りたたみセクション内でも使用できます。
複数のセクション
セクション1
最初の折りたたみセクションの内容です。
セクション2
2番目の折りたたみセクションの内容です。
それぞれ独立して開閉できます。
セクション3
3番目の折りたたみセクションの内容です。
複数のパラグラフを含めることができます。
太字やイタリックなどの装飾も使えます。
技術的な詳細
実装の詳細
この機能は以下の技術を使用して実装されています：
- remark-directive - カスタムディレクティブ構文のサポート
- カスタムRemarkプラグイン -
:::collapseディレクティブの処理 - daisyUI collapse - スタイリングとアニメーション
構文
:::collapse{title="タイトル"}
折りたたむコンテンツ
### 生成されるHTML
```html
<details class="collapse collapse-arrow bg-base-200 my-4">
<summary class="collapse-title text-lg font-medium">タイトル</summary>
<div class="collapse-content">
<!-- コンテンツ -->
</div>
</details>:::
まとめ
この機能の利点
折りたたみセクション機能により：
- ✅ 長いコンテンツを整理できる
- ✅ ユーザーが必要な情報だけを表示できる
- ✅ ページのスクロール量を減らせる
- ✅ FAQやドキュメントに最適
daisyUIのスタイリングにより、美しく機能的なUIを実現しています。