AIのCSS回答が「古い」問題、ずっと感じていませんか？
「ClaudeにCSSを聞いたら、もう使われていない書き方を提案された」「ChatGPTの回答通りに書いたら、ChromeとSafariで表示がバラバラになった」——Web制作を始めると、こういう体験に一度はぶつかります。
原因はシンプルで、AIの知識にはカットオフ（学習データの締め切り日）があるからです。CSSはここ数年でコンテナクエリ・カスケードレイヤー・ネスト記法など新機能が立て続けにリリースされており、少し前のモデルではそれらを正確に知らないことがあります。
その問題を解消する可能性を持つ仕組みが、MDN（Mozilla Developer Network）が2026年6月15日に公開したMDN MCPサーバー（実験的）です。この記事では、何ができるのか・どう設定するのか・どんな人に向いているのかを、実際に触れた視点でまとめています。
MCPサーバーって何？——宅配ロッカーに例えると分かりやすい
まず「MCP」という言葉から説明します。MCPはModel Context Protocol（モデル・コンテキスト・プロトコル）の略で、「AIが外部ツールやデータベースと情報をやり取りするための共通ルール」です。
宅配ロッカーで例えると分かりやすいです。荷物（=情報）を送る側・受け取る側・ロッカー本体がそれぞれ異なる会社でも、決まったサイズと操作方法があれば誰でも使えますよね。MCPはその「共通ロッカー規格」にあたります。
MDN MCPサーバーは、そのロッカーの中にMDNのドキュメント・CSS仕様・ブラウザー互換性データを入れておくイメージです。Claude CodeやVS CodeのAI機能が「最新のCSS情報をくれ」とロッカーを叩けば、MDNが最新データを取り出して渡してくれます。
MDN MCPサーバーで何が変わるか——従来との比較
| 比較項目 | 従来（MCPなし） | MDN MCPサーバーあり |
|---|---|---|
| CSS情報の鮮度 | モデルの学習日時点の知識 | MDNの現在のドキュメントを参照 |
| ブラウザー互換性 | AIが「たぶん動く」と回答 | MDNの互換性テーブルを根拠に回答 |
| 新機能への対応 | 知らない・誤った使い方を提案することがある | 公式仕様に沿った使い方を提案しやすくなる |
| 情報の信頼性 | ブログ記事・Stack Overflowが混在 | MDN一次情報のみ |
ただし、これはあくまで実験的なサービスです。MDN公式も将来的に仕様や提供方法が変わる可能性があることを明示しています。「完璧に解決する魔法のツール」ではなく、「AIの回答の根拠をMDNに近づける補助ツール」として捉えると現実的です。
対応しているツールはどれ？
MDN公式ブログが明記している対応クライアントは以下の3つです。
- VS Code——世界で最も使われているコードエディターで、AI機能（GitHub Copilotなど）と組み合わせて使います
- Claude Code——Anthropic社が提供するターミナル（コマンド入力画面）ベースのAIコーディングエージェントです
- Codex CLI——OpenAIが提供するコマンドライン（文字入力型の操作画面）で動くAIツールです
ブラウザーで使うChatGPTの画面やClaudeの通常チャット画面には、現時点では直接対応していません。初心者がいちばん取り組みやすいのはVS Code経由です。理由は、すでにVS Codeを使っている人が多く、設定ファイルを1つ追加するだけで済むからです。
実際の設定手順——VS Code編（所要時間：約5分）
VS Codeにまだ入っていない場合は、公式サイトからインストールしておいてください（無料です）。
手順1：プロジェクトフォルダーを開く
VS Codeを起動し、上部メニューの「ファイル」→「フォルダーを開く」から、作業しているWebサイトのフォルダーを選択します。すでに開いている場合はそのままでOKです。
手順2：.vscode フォルダーと設定ファイルを作る
VS Code左側の「エクスプローラー」パネルで、フォルダーのルート（いちばん上の階層）を右クリックし、「新しいフォルダー」を選んで.vscodeという名前のフォルダーを作ります（ドットから始まる名前です）。
次に、作った .vscode フォルダーを右クリック→「新しいファイル」を選び、mcp.jsonという名前のファイルを作ります。
手順3：接続設定を書き込む
mcp.json を開いたら、MDN公式ページに掲載されている接続設定（JSONの記述）を貼り付けて保存します。設定の内容は「MDNのMCPサーバーにHTTP経由で接続する」という指示です。公式ページのコードをそのままコピーするだけなので、手打ちの必要はありません。
手順4：VS CodeのAI機能から使う
設定を保存したら、VS Code内のチャット機能（Copilot Chatなど）を開きます。ツールの選択欄やエージェントモードに切り替えると、MDN MCPが接続済みのツールとして表示されます。あとは普通に「CSSコンテナクエリの使い方を教えて」と入力するだけで、AIがMDNを参照しながら回答します。
Claude Code で接続する場合
Claude Codeはターミナル（Macの「ターミナル」アプリ、Windowsの「コマンドプロンプト」や「PowerShell」にあたる、文字を打ち込む黒い画面）で使います。
MDN公式ページにClaude Code向けの接続コマンドが1行で掲載されているので、それをターミナルに貼り付けてEnterを押すだけです。ターミナルに慣れていない人は最初に少し戸惑いますが、コマンドを1行実行するだけなので操作量はほぼゼロです。
実行後、Claude Codeのセッション（会話）を開始すると、MDNのツールが使える状態になっています。「grid-template-areasの書き方をMDNの情報で教えて」のように、MDNを明示して質問すると回答の根拠が分かりやすくなります。
初心者がつまずきやすいポイント3つ
① JSONの書き方ミスでエラーになる
mcp.json に設定を貼り付けるとき、カンマや括弧を誤って消してしまうとエラーが出ます。VS Codeは構文エラー（文法の間違い）を赤い波線で表示してくれるので、波線が出ていないか確認しましょう。公式ページからのコピーをそのまま貼れれば問題は起きにくいです。
② 「MCPが見えない」はAI機能が有効になっていないケース
VS CodeでMCPが出てこない場合、GitHub CopilotなどのAI拡張機能がインストールされていない、またはサインインが済んでいないことがほとんどです。左サイドバーの拡張機能アイコン（四角が4つ並んだアイコン）をクリックし、「Copilot」で検索してインストール・サインインを先に済ませましょう。
③ AIの回答が必ずしもMDNを参照しているとは限らない
MCPを設定したからといって、すべての回答でMDNが参照されるわけではありません。AIが「この質問にはMDNのツールを使う必要がある」と判断したときだけ参照します。確実にMDN情報を引き出したいときは「MDNのドキュメントを使って答えて」と明示するのが効果的です。
料金はかかる？無料で使える？
MDN MCPサーバー自体は無料で公開されています。ただし、使うAIツール側の料金は別です。
- VS Code + GitHub Copilot：Copilotは月額課金（無料枠あり）。学生・教職員は無料プランで使えます
- Claude Code：Anthropic APIの利用料がかかります（使った分だけの従量制）
- Codex CLI：OpenAI APIの利用料がかかります（同様に従量制）
コストを抑えたい初心者には、VS Code + Copilotの無料枠から始めるのがおすすめです。
こんな人に向いている / 向かない
向いている人
- AIに頼ってCSS実装することが多い初心者・中級者
- CSSの新機能（コンテナクエリ・カスケードレイヤーなど）を積極的に使いたい人
- 「この書き方、今のブラウザーで本当に動く？」と毎回不安になっている人
- VS CodeかClaude Codeをすでに使っている人
向かない人（今は待ちの人）
- ターミナルやJSONを一切触ったことがなく、まだHTML・CSSの基礎を学んでいる段階の人
- ChatGPTのブラウザー画面だけを使っていて、ツールを増やしたくない人
- 実験的な機能は安定してから使いたい人（今後の仕様変更リスクがあります）
注意点：「実験的」という意味を正しく理解する
MDNは公式にこのMCPサーバーをexperimental（実験的）と位置付けています。これは「提供方法・機能・URLが将来変わる・または終了する可能性がある」ことを意味します。
業務で使う場合は、MCPへの依存度を上げすぎず、MDNを直接ブラウザーで確認する習慣も並行して持っておくと安全です。実験的サービスを早めに試して学ぶ姿勢は大切ですが、「絶対に動き続ける前提」で設計や業務フローに組み込むのは避けましょう。
よくある質問
Q. ChatGPTでも使えますか？
現時点でMDN公式が対応を明記しているのはVS Code・Claude Code・Codex CLIの3つです。ブラウザー版ChatGPTへの直接接続は対応していません。OpenAIのデスクトップアプリやAPIを使ったカスタム環境ではMCPプロトコルへの対応が進んでいますが、MDN MCPとの組み合わせについては公式情報を都度確認してください。
Q. 日本語で質問しても、MDNの日本語ドキュメントを引いてくれますか？
MDNのドキュメントは英語版が最も情報量が多く、更新も速いです。AIへの質問を日本語で行っても、MCPが参照するのは英語版MDNになるケースが多いと考えておきましょう。回答自体はAIが日本語に翻訳して返してくれます。
Q. これを使えば、AIのCSS回答は完全に正確になりますか？
「完全に正確」にはなりません。MDNの情報を根拠にしやすくなる、という補助効果です。AIはMDNの情報を受け取っても解釈を誤る場合があります。重要な実装は必ずMDNで自分でも確認する習慣を持ちましょう。
Q. 設定を消したいときはどうすればいいですか？
VS Codeの場合は、作成した .vscode/mcp.json ファイルを削除するだけで接続が解除されます。Claude Codeの場合は、設定ファイル（通常はホームディレクトリの設定ファイル）からMDNのMCP設定行を削除します。どちらも元に戻すのは簡単です。
今日からできる最初の一歩
難しく考えなくて大丈夫です。まずVS Codeを持っていてGitHub Copilotを使っている人なら、今日中に設定を試せます。手順は「.vscodeフォルダーにmcp.jsonを置くだけ」です。
設定できたら、これまでAIに聞いて「本当かな？」と思っていたCSS質問をもう一度投げかけてみましょう。回答の根拠にMDNのドキュメントが引用されるようになる体験は、初めて見ると「こういうことか」とすっきりします。
まだVS CodeもAIツールも使っていない人は、まずVS Codeのインストールから始めてみてください。無料で使えて、Web制作の現場で最もよく使われるエディターです。土台を作っておくと、今回のMCPのような新しい仕組みも乗せやすくなります。
参考・公式情報
📦 Amazonで関連商品を探す
🛒 楽天市場でVS Code 入門を探す
