◉CLAUDE LABEN
●2.1.302 — fork サブエージェントが claude -p・Agent SDK・デスクトップで既定オンになりました。無効化は CLAUDE_CODE_FORK_SUBAGENT=0(10/16)●2.1.299 — 200K トークン超で約54分放置した会話はアイドル圧縮。MCP の許可ルールは名指ししたサーバーだけに一致します●SONNET 4.5 — Claude API での提供終了は 11/30、残り43日。移行先は Sonnet 5.5●WINDOWS — 日本語の環境でだけフックが黙って壊れる報告があり、文字コードの確認が呼びかけられています●FAST MODE — Opus 5.5 の Fast mode がリサーチプレビューを終え、ベータヘッダーが不要になりました(10/15)●NEW — Cowork に渡したフォルダの先頭に、十行の約束ファイルを置いてみました●2.1.302 — fork サブエージェントが claude -p・Agent SDK・デスクトップで既定オンになりました。無効化は CLAUDE_CODE_FORK_SUBAGENT=0(10/16)●2.1.299 — 200K トークン超で約54分放置した会話はアイドル圧縮。MCP の許可ルールは名指ししたサーバーだけに一致します●SONNET 4.5 — Claude API での提供終了は 11/30、残り43日。移行先は Sonnet 5.5●WINDOWS — 日本語の環境でだけフックが黙って壊れる報告があり、文字コードの確認が呼びかけられています●FAST MODE — Opus 5.5 の Fast mode がリサーチプレビューを終え、ベータヘッダーが不要になりました(10/15)●NEW — Cowork に渡したフォルダの先頭に、十行の約束ファイルを置いてみました
記事一覧/Claude Code
⟐ Claude Code/2026-10-19中級

375px で横に 90px はみ出した朝、犯人は querySelectorAll に映らない疑似要素でした

スマホ幅でページが横に広がる原因が ::after だったとき、要素の走査では見つかりません。疑似要素まで差分で確定する観測スクリプトと、sticky を壊さない直し方を実測つきでまとめました。

Claude Code268CSSデバッグ4レスポンシブPlaywright

✦ プレミアム記事

自分のサイトの課金ページをスマホ幅(375px)で開いたとき、ヘッダー右端のテーマ切替とメニューが画面の外へ出ていました。

計測すると document.documentElement.scrollWidth が 465px。画面幅より 90px 広い、つまり 1.24 倍(465÷375)に伸びたページです。決済へ進む課金ページでメニューが画面外に出るのは、コンバージョンに直結する不具合でした。

要素を全部走査して、右端が画面外に出ているものを探しました。見つかったのは 0 件でした。

犯人は、先頭の節に掛けていた装飾の ::after でした。幅 540px の金色の光です。疑似要素は querySelectorAll にも getBoundingClientRect にも現れません。

ここからは、同じ症状を自分のページで再現して、疑似要素まで含めて原因を一つに確定する観測スクリプトを書きます。直し方も三通り比べました。overflow-x: hidden で直ったように見えて、別の場所で sticky が壊れる落とし穴があります。

再現用の最小ページを用意する

本番ページをそのまま触る前に、同じ構造を 20 行ほどで再現しました。「全ページの先頭の節」に装飾を掛ける書き方が、今回の発端です。

<!doctype html><html lang="ja"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{margin:0;font:16px/1.7 sans-serif}
header{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;border-bottom:1px solid #ccc}
header button{width:40px;height:40px}
main>div{padding:0 15px}
section{position:relative;padding:24px 0}
/* 全ページの「先頭の節」に掛かる装飾 */
main > div > section:first-child::after{
  content:"";position:absolute;top:0;left:50%;width:540px;height:200px;
  transform:translateX(-50%);background:radial-gradient(closest-side,gold,transparent);
  pointer-events:none;z-index:-1}
</style></head><body>
<header><span>Site</span><button id="menu">≡</button></header>
<main><div>
<section><h1>Membership</h1><p>先頭の節です。</p></section>
<section><h2>Plan</h2><p>二つ目の節です。</p></section>
</div></main></body></html>

節の幅は 345px(375px から左右の余白 15px ずつ)です。そこに幅 540px の光を中央寄せで置くと、右端は 345 の中心 187.5 に 270 を足した 457.5px に届きます。

ヘッドレス Chromium(375×800)で測ると、scrollWidth は 458px でした。本番の 465px とは数字が違いますが、節の幅や余白が違うためで、構造は同じです。

要素の走査は 0 件を返す

最初に誰もが書くのは、右端が画面外に出ている要素を探すループだと思います。

const vw = document.documentElement.clientWidth;
[...document.body.querySelectorAll('*')]
  .filter(el => el.getBoundingClientRect().right > vw + 0.5);
// → [](再現ページでも本番でも 0 件)

::after は DOM の要素ではないため、このループには一度も登場しません。「はみ出している要素はありません」という結果が返り、調べる側は原因が見つからないまま止まってしまいます。

私自身、ここが一番時間を食う場所でした。結果が空のとき、私は「測り方が悪い」と疑う前に、「そもそも走査の対象にいない何かがある」と疑う順番に変えました。

✦

ここまでお読みいただきありがとうございます。

この記事の続きを読む

この先には、実装コードやベンチマーク結果など、実務でお役に立てる内容をご用意しています。このサイトは広告を掲載しておらず、サーバーや開発にかかる費用はメンバーの皆様のご支援で成り立っています。もしお役に立てていましたら、ご支援いただけますと大変ありがたいです。

この記事で得られること
✦スマホ幅で横にはみ出したとき、疑似要素(::before / ::after)まで含めて犯人を一つに確定する観測スクリプトを、自分のページにそのまま使えるようになる
✦overflow-x の直し方を hidden・clip・html 指定のどれにするか、sticky を壊さずに判断できるようになる
✦Claude Code に「はみ出す」と伝える前に観測結果を渡し、推測の修正が何往復も続く時間を省けるようになる
Stripe による安全な決済 · いつでもキャンセル可能
✦

この記事を購入する

この先の内容をすべてお読みいただけます。一度のご購入で、いつでも何度でもアクセスできます。このサイトは広告を掲載しておらず、皆さまのご支援がサーバー費用などの運営を支えています。

または
メンバーシップなら全記事が読み放題 →
シェア

お読みいただきありがとうございます

Claude Lab は広告なしで運営しており、サーバー費用などの運営コストはメンバーシップのご支援で賄っています。実装コード・ベンチマーク・本番設計パターンなど、実務でお役立ていただける記事を毎日更新しています。もし読んでよかったと感じていただけましたら、ぜひご覧ください。

  • ✦コピー&ペーストで使える実装コード付き
  • ✦毎日新しい上級ガイドを追加
  • ✦¥580/月 または ¥1,480 の永久アクセス
メンバーシップを見る →

関連記事

⟐ Claude Code2026-10-19
MCP の allow を `mcp__サーバー名` だけで書いていた人へ — v2.1.299 の変更後に見直す三つの行
Claude Code v2.1.299 で MCP の allow ルールが「名指ししたサーバーだけ」に一致する形へ変わりました。settings.json の古い書き方を点検する手順と、動く Python の点検スクリプトを載せています。
⟐ Claude Code2026-10-18
allow を足したのに承認画面が消えない — /permissions で「どの層が決めたか」を6段で読む
settings に allow を書いたのに、同じ承認画面が出続けるときの切り分けです。ask・deny の先勝ち、settings.local.json の置き場所、Cowork の Bash など、公式の権限ドキュメントで確認できる6つの層を、/permissions の表示から順に読みます。
⟐ Claude Code2026-10-15
日本語フォルダ名を守るはずのフックが、一度も止めてくれませんでした — Python の stdin が cp932 で読んでいた話
「経理」「議事録」などの日本語フォルダを守る PreToolUse フックが、Python の stdin 既定が cp932 の環境では素通りします。再現の手順と 3 行の直し方、確認用の 1 コマンドを書き残します。