AIエージェント活用事例
Views —

AIエージェント活用事例

今日の新着

44すべて 189件

全189件中 1〜20件

開発・コーディング実装例

長いタイトルでモバイル画面が横スクロールになる不具合の修正

Markdownツールの長い識別子タイトルが横スクロールを発生させたため、著者はClaude Codeを使ってタイトルの折り返し処理を修正したと報告しています。

Claude Code

使い方

  1. Simon WillisonのMarkdown SVGツールでは、スペースのない長い文字列がタイトルに入ることがあると著者は述べています。
  2. 公開されたコミットでは、そのようなタイトルがモバイルで横スクロールを発生させないように折り返し処理が変更されたと著者は説明しています。Claude Codeセッションのリンクも残されています。

結果

モバイルでタイトルがはみ出す問題を修正したコード変更が10月18日のコミットに記録されていると著者は述べています。

補足

コミットの問題説明と変更内容を根拠にまとめています。サイト全体のモバイルレイアウトが検証されたという意味ではありません。

出典

GitHub 原文 ↗

プロンプト例 · Claude Code

目標：長いタイトルでモバイル画面が横スクロールになる不具合を修正してください。

入力・環境：[問題のあるページ]、[長いタイトル再現用文字列]、[モバイル画面幅]、[既存のスタイルファイル]。

参考原文：https://github.com/simonw/tools/commit/9a09bb60bb712fcd849af497d4dfc5ff62de9268

タイトルに長い識別子が入るとページが横にずれる問題を再現し、修正してください。まず実際にオーバーフローが発生している要素と適用されているCSSを確認します。タイトルは可読性を保ったまま折り返し、コードブロックや表の既存の横スクロール動作は区別して維持してください。変更は小さなパッチとして作成し、修正前後の画面と確認した幅を記録します。

原文にないアカウント連携方法や成果は推測せず、必要な設定や実行手順を先に案内してください。既存データを保護する作業用コピーから始め、アクセスできない項目は確認が必要と明記してください。

検証：スペースのない長い文字列、通常の文章、日本語タイトルを狭い画面とデスクトップで確認します。ドキュメント全体の横オーバーフローが解消されたか測定し、他の要素が切れたり文字が重なっていないかも確認してください。

成果物とともに使用した入力、実行記録、確認した結果をまとめてください。失敗した部分や未実行の部分は、完了した作業と区別して記載してください。