まずAIエディタを用意しよう

Cursorエディタ → https://www.cursor.com/ja

Windsurfエディタ → https://codeium.com/windsurf

VSCode+copilot → https://azure.microsoft.com/ja-jp/products/visual-studio-code

Claude + MCP（MCPの設定が必要。上級者向き）

AIエディタのルールファイルを活用しよう

AIエディタにhtmlやcssのコーディングルールを事前に伝えておくと、

そのルールに沿ってコーディングしてくれます。

ルールファイルはエディタによって違います。

ルールファイルの種類

Cursorエディタの場合 → .cursorrules
Windsurfエディタの場合 → .windsurfrules
VSCode+copilotの場合 → .github/copilot-instructions.md

ルールの書き方例

ルールファイルの記述方法は特に決まってません（AIが自然言語で読み込みます）
例えば以下のようなルールを作ります。

copy

Markdown

# HTMLコーディングルール

# すべてのHTMLファイルは、以下のガイドラインに従うこと

1. セマンティックなHTMLを使用する
   - 適切なタグ（例：<header>, <footer>, <article>）を使用すること。

2. アクセシビリティを考慮する
   - すべての画像にはalt属性を設定すること
   - フォーム要素にはラベルを付けること

3. SEOを考慮する
   - SEOを考慮した構造とすること

3. コードの整形
   - インデントはスペース2つを使用すること
   - 各要素の間には1行の空白を入れること

4. CSSクラス名の命名規則
   - BEM（Block Element Modifier）命名規則を使用すること。
   - ただし modifier は使用しない。全て別のクラスとして定義すること。
   - 例：`block__element__error`

5. htmlの命名規則
   - コンテナには xxxxx_container という命名を用いること

ルールは自動的に読み込まれる

ルールは自動的に読み込まれます。

「本当に読み込まれてるかな？」と気になる場合はAIに聞いてみるといいです。

copy

Plain

HTMLコーディングルールは理解してますか？理解している場合は1行でまとめて答えて。

このように返ってきます。

はい、セマンティックなHTML、アクセシビリティ、SEO対応、スペース2つのインデント、BEM命名規則（modifierは別クラス）、コンテナの_container命名など、HTMLコーディングルールを完全に理解しています。

あとは画像を貼り付けてコーディングを依頼するだけです。