CSS パターン見本

このページは ConiferFruits で使える CSS パターンの見本。同名の CSS見本.css がこのページにだけ適用される。

1. Callout / 警告ボックス

これは標準の Note ボックス。重要な情報を強調表示する。

✅ Tip: 効率的なやり方を提案するときに使う。

⚠️ Warning: 注意が必要な操作の前に表示。

🚫 Danger: 取り返しのつかない操作（データ削除等）の警告。

2. ステータスバッジ

ドキュメントや項目の状態を一目で示す。

DRAFT 草案、まだ共有しないでください

REVIEW レビュー中、コメント募集中

APPROVED 承認済み、公式情報

DEPRECATED 廃止予定、新規参照は不可

3. テーブル

項目	担当	状態	期限
API設計	@alice	完了	2026-04-10
画面実装	@bob	レビュー中	2026-04-20
テスト	@carol	未着手	2026-04-25
ドキュメント	@dave	不要	-

4. コードブロック

インライン npm install のように使う。

def hello(name: str) -> str:
    return f"こんにちは、{name}さん！"

print(hello("世界"))

git checkout -b feature/new-thing
git push -u origin feature/new-thing

5. キーボードショートカット

保存: Cmd + S （Mac）/ Ctrl + S （Windows）

検索: Cmd + K

開発者ツール: Cmd + Option + I

6. ステップ手順

1. リポジトリをクローンする
2. 依存関係をインストール（npm install）
3. 環境変数を設定（.env.local を作成）
4. 開発サーバー起動（npm run dev）
5. ブラウザで http://localhost:3000 を開く

7. 定義リスト（用語集）

Conifer

針葉樹。このツールの名前の由来。

カスケードCSS

フォルダ階層に沿って自動適用されるスタイル。

BlockNote

Notion風のブロック編集エディタライブラリ。

Docusaurus

Meta製の静的サイトジェネレータ、ドキュメント特化。

8. 引用カード

ドキュメントは未来の自分への手紙である。書いてる最中は退屈に思えても、半年後に救われる。 — 名もなきエンジニア

9. 見出しアンカー

このページの H2/H3 にカーソルを乗せると左側に # が現れる（このページ内で確認）。

---

以上がデモ。CSS見本.css を編集すれば見た目を変えられる。