# HTML構造ガイド ## 基本テンプレート ```html 【図解タイトル】- 本気AI

【タイトル】

サブタイトル

``` --- ## Lucide Icon の使い方 ### 基本構文 ```html ``` ### よく使うアイコン | 用途 | アイコン名 | コード | |-----|----------|--------| | 重要 | `alert-circle` | `` | | ヒント | `lightbulb` | `` | | チェック | `check-circle` | `` | | 情報 | `info` | `` | | 警告 | `triangle-alert` | `` | | 設定 | `settings` | `` | | コード | `code` | `` | | ファイル | `file-text` | `` | | フォルダ | `folder` | `` | | 矢印 | `arrow-right` | `` | | ユーザー | `user` | `` | | ロック | `lock` | `` | | 鍵 | `key` | `` | | 許可 | `shield-check` | `` | | 禁止 | `shield-x` | `` | | 質問 | `help-circle` | `` | | 本 | `book-open` | `` | | 学習 | `graduation-cap` | `` | | ツール | `wrench` | `` | | プレイ | `play` | `` | | 停止 | `square` | `` | ### セクションヘッダーでの使用例 ```html

セクションタイトル

サブタイトル

``` --- ## コード例の前の日本語解説コードを見せる前に、必ず「このコードが何をするのか」を日本語で説明する。 ### ❌ 悪い例 ```html


hook.onPreToolUse((event) => {
  if (event.toolName === 'Write') {
    return { permissionDecision: 'deny' };
  }
});

``` ### ✅ 良い例 ```html

このコードがやること

「Writeツール（ファイルを書き込む道具）が使われそうになったら、許可しない」というルールを設定しています。


hook.onPreToolUse((event) => {
  if (event.toolName === 'Write') {
    return { permissionDecision: 'deny' };
  }
});

``` --- ## フローチャートの表現 ```html

開始

チェック

完了

```