📖 Uniz Bits 使い方ガイド

1. スニペットの追加方法

VSCodeで新規ファイル作成後、snip-newと入力してTabを押すと、テンプレートが展開されます。

<!--
title: スニペットのタイトル
description: 説明文
tags: タグ1, タグ2
memo: メモ欄（任意）
reference: https://参考URL（任意）
-->
<style>
/* CSSコード */
</style>

2. メタデータ一覧

• title: カードに表示されるタイトル（必須）
• description: 簡単な説明文
• tags: カンマ区切りのタグ（検索に使用）
• memo: 補足メモ（カード内に表示）
• reference: 参考サイトのURL（リンクアイコンで表示）

3. コードの書き方

1つのHTMLファイルに、HTML/CSS/JSをまとめて書きます。ビルド時に自動分離されます。

<!-- メタデータ -->
<div class="example">HTML</div>

<style>
.example { color: red; }
</style>

<script>
console.log('JS');
</script>

4. ビルド方法

ターミナルで npm run build を実行すると、dist/ フォルダにサイトが生成されます。

VSCodeで保存時に自動ビルドするには、Ctrl+Shift+B でビルドタスクを開始してください。

5. ファイル構成

bits/
├── assets/snippets/   ← スニペットを追加する場所
│   └── css/
│       ├── reset.html
│       └── ...
├── system/
│   ├── src/           ← サイトのソースコード
│   └── scripts/       ← ビルドスクリプト
└── dist/              ← 公開用フォルダ（自動生成）