Playwright MCPでCSSの修正が楽になった
最近、AI エージェントに Playwright MCP を設定した状態で、CSS の調整作業を行っていました。
デザイン上どうしても原因を特定できず、修正に行き詰まっていたスタイルがあったのですが、Playwright MCP を使って調査を進めたことで解決に至りました。
本記事では、そのときの経緯と、CSS の修正がどのように進めやすくなったかを振り返ります。
罫線付きノート風レイアウトの調整
今回対象としていたのは、次のページのような罫線付きノート風のレイアウトです。
ブログサイトのリニューアル作業中のページになります。
このレイアウトでは、横罫線の上に文字が自然に配置されることを前提としてデザインしています。
一見すると単純な構造ですが、文字と罫線の位置関係がわずかに崩れるだけでも、ノートとしての印象が損なわれてしまいます。
この横罫線と文字配置の調整を進める中で、Playwright MCP が CSS 修正の手助けになる場面がありました。
技術的な構成
記事本文は Markdown で記述し、Next.js の Markdown パーサを使って HTML に変換しています。
変換後のコンテンツは、Chakra UI の Prose コンポーネントを利用して表示しています。
https://nextjs.org/docs/app/guides/mdx
https://chakra-ui.com/docs/components/prose
Markdown を使うことで記述自体は簡潔になりますが、表示上は複数の要素が混在する構成になります。
罫線デザインと Markdown
罫線の上に文字を載せるためには、罫線の間隔、文字サイズ、行の高さが適切に対応している必要があります。
テキストのみで構成されている場合であれば、line-height や margin、padding を罫線間隔の倍数に揃えることで、比較的整った見た目になります。
一方で、Markdown にはテキスト以外にも、画像、テーブル、コードブロックなど、さまざまな要素が含まれます。
これらを含んだ状態でも、罫線が途切れず、文字の位置がずれないことを目標に実装を進めていました。
罫線と文字のズレに気づく
実装を進める中で、特定の要素を境に罫線と文字の位置が合わなくなる箇所があることに気づきました。
- テーブルの直下から罫線の位置がずれる
- 画像の下から罫線の位置がずれる
- コードブロックの下から罫線の位置がずれる
上下方向の余白や行の高さに影響する CSS プロパティについては、すべて罫線間隔の倍数になるように調整していました。
それにもかかわらず、特定の箇所から整合性が崩れ、原因を特定できない状態が続いていました。
Playwright MCP による調査
調整に行き詰まったため、次のような内容で AI に相談しました。
- 「http://localhost:3000/blog/contents/xxx の本文途中から、罫線の上に文字が載らなくなる。原因が分からない」
すると、Playwright MCP が起動し、ブラウザが立ち上がって該当ページへアクセスし始めました。
スナップショットの取得や DOM 要素の確認などを行いながら、表示状態を段階的に確認していく様子が見られました。
これまでは、記述した CSS の内容や JSX の構造をコンテキストに渡し、それを前提に調査してもらうことがほとんどでした。
一方で Playwright MCP を使った今回の調査では、実際の描画結果を起点として、画面上の状態を確認しながら原因を追っていく流れになっていた点が印象的でした。
判明した原因と修正
調査の結果、コードブロック内で使用している Mono フォントと、本文で使用しているフォントが異なっていることが分かりました。
フォントの字面の違いにより、同じ line-height を指定していても、実際の表示高さが揃っていませんでした。（たぶん）
その差分が積み重なり、コードブロック以降で罫線と文字の位置がずれて見える状態になっていました。
コードブロックのフォント指定を本文と揃えることで、罫線の上に文字が自然に配置されるようになりました。
Mono フォントの使用を検討していましたが、今回は調整が難しかったため見送っています。
技術スタックと MCP
現在の開発では、公式に MCP が提供されている次のライブラリやフレームワークを利用しています。
- Next.js
https://nextjs.org/docs/app/guides/mcp - Playwright
https://github.com/microsoft/playwright-mcp - Storybook
https://storybook.js.org/addons/@storybook/addon-mcp - Chakra UI
https://chakra-ui.com/docs/get-started/ai/mcp-server
CSS の修正で行き詰まった際に、実際の画面を確認しながら原因を一緒に探れる点は、開発を進める上でとても助かりました。
既存の知識に加えて、MCP による補助を受けながら作業できる体験は、安心感のある開発体験につながっていると感じています。
-
シェアする
フォローする
関連する記事
タグ「フロントエンド」の記事
最近、iframeを使っています。 クライアントサイドで埋め込む想定で、iframeを使おうとしています。 色々と苦労したことがあったので、書いて残しておこうと思います。 レスポンスヘッダー 前提として、ウェブアプリケーションをプロダクショ
紙を積んだイラストをSVGで書こうとしていました。 （当たり前ですが）図形を表現するためには数学の知識が必要で、学生の頃の記憶を思い出したので疲れました。 所感について、諸々書こうと思います。 成果物 実際に完成したのは、以下の画像ができま
2026年02月17日
以下の記事で書いた CSSをテストする方法について、試してみました。 https://zenn.dev/silverbirder/articles/df6752b230f04c ソースコードは、以下に置いています。 https://gith
タグ「AI」の記事
主にWeb関連の個人開発をしている際に心がけていることを書きます。 月末に近づくにつれ、AIの利用上限に達してしまうことがあります。 その状況になった時、以下のいずれかの選択肢が私の中では残っています。 課金して利用上限を増やす 無料モデル
なんでやねん！AIに指摘をしたとき、なんかモヤっとする。「するどい指摘です！」とか言われると、褒められてるようでいて、微妙にずれてる感じ。反論しても不毛なので、冷静に淡々と指示を出そう。「いい気づきです！」みたいな返事もあるけれど……ぬぬぬ。
2025年11月11日
AIが生成するコードは、必ずレビューしましょう。この記事では、AIが生成CSSをレビューする際の7つのポイントを紹介します。CSSのレビューをする際に参考にしてください。