スマホでWebサイトの文章が切れるときの確認手順｜親幅・折り返し・隠れた文字を調べる
スマートフォンでページを開くと、紹介文の右端が途中で切れる。ところが、ページ自体は横にスクロールしない。この場合、ページ全体の幅を測るだけでは、文章を最後まで読めるか判断できません。
この記事は、HTMLやCSSを少し編集できる個人サイト運営者向けの点検手順です。天翔公式サイトのトップバナー制作記録と実際のCSS変更を例に、文字が欠けたときに何から確認するかを整理します。AIが提案したCSSを採用するときにも使えます。
このサイトで見つかったことと、この記事の範囲
2026年10月の制作では、390pxの画像を人が見直した際、ヒーロー紹介文とアクセス解析同意案内の右端に文字切れの指摘がありました。変更履歴には、画面幅から計算していた本文幅を親要素に合わせる指定へ変え、同意案内の文章側にも幅と折り返しの指定を加えた記録があります。
ここで扱うのは、その履歴から組み立てた調査手順です。当時のスクリーンショットを本記事の作成時に再判定した結果でも、このCSSを貼ればすべてのサイトで解消するという検証でもありません。複数の指定を同時に変えた履歴だけから、原因が一つだったと断定することも避けます。
確認の役割分担を振り返ったAIと人間で「確認」を分担するようになった理由は制作体験、この記事は実際に点検するときの順番を扱います。
1．先に「どの文章の、どこが欠けたか」を残す
CSSを変える前に、次の4点を一緒に残します。
- ページのURLと確認した画面幅
- 元の文章と、画面で読める最後の語句
- 欠けている場所が分かる画像
- 同意案内などの表示状態と、読み込んでいる版
例えば、紹介文が「制作しています。」まで続くはずなのに「制作して」で止まるなら、その差を記録します。これは説明用の架空例です。文章の末尾が分かれば、修正後にも同じ箇所を比較できます。
ローカル版と本番版を取り違えないよう、URL、更新した文言、読み込まれたCSSも確認します。画像のファイル名が「final」であることだけでは、最新のコードから作られた証拠になりません。
2．文字から外側へ、親要素をたどる
Chromeなどの開発者ツールで欠けた段落を選び、段落、その親、さらに外側のカードや固定案内を順番に見ます。開発者ツールでは、CSSの指定値だけでなく、実際に適用された値とボックスの大きさを確認します。
| 点検する指定 | 見ること | 次に調べる場所 |
|---|---|---|
| width / max-width | 段落が親より広いか | 画面幅基準の指定、固定px、左右の余白 |
| min-width | flexやgrid内で文章側が縮めるか | 文章を包む子要素。段落だけに指定しても足りない場合がある |
| box-sizing / padding | 指定幅の外側へ余白や枠が増えていないか | 段落と親の両方のボックス |
| white-space | 折り返しが禁止されていないか | 継承されたnowrap、画面幅ごとの上書き |
| overflow / 高さ制限 | 外へ出た文字や下の行が隠れていないか | 祖先のhidden・clip、固定height、行数制限 |
overflow: hiddenを一時的に外すと隠れていた文章が見える場合は、はみ出しの場所を調べる手掛かりになります。画像の装飾を切り抜くために必要な指定もあるので、サイト全体から削除する修正にはしません。
3．画面幅と親の中の幅を混同しない
このサイトの変更履歴では、スマートフォン用本文にあったwidth: calc(100vw - 2.5rem)を、width: 100%へ変更しています。vwは画面のビューポートを基準とするため、入れ子になった親の余白や幅制限と同じ条件とは限りません。
次は現行CSSの考え方を抜き出した例です。クラス名は説明用に簡略化しています。既存サイトにそのまま追加する前に、実際の親要素と適用範囲を確認してください。
/* 文章を置く領域に限定する */
.intro-copy {
box-sizing: border-box;
width: 100%;
min-width: 0;
max-width: min(36rem, 100%);
}
.intro-copy p {
box-sizing: border-box;
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
}border-boxは幅にpaddingとborderを含めますが、marginまでは含みません。親の幅そのものが誤っていれば、この指定だけでは直りません。意味はMDNのbox-sizing解説で確認できます。
4．折り返しと「縮められる幅」を別々に確認する
横並びの文章とボタンでは、文章側が内容に応じた最小幅を保ち、思ったほど縮まない場合があります。min-width: 0は、その最小幅の制約を見直す候補です。ただし、固定幅やnowrapなど別の制約が残っていれば、これだけでは解消しません。MDNのmin-width解説も参照してください。
このサイトの同意案内では、文章を包む要素にw-full min-w-0、段落にもw-full min-w-0と折り返し指定が追加されています。段落の文字だけを見るのではなく、その段落が入ったflexの子要素も確認した点が参考になります。
長いURLなど、通常の区切りがない文字列にはoverflow-wrap: anywhereが候補になります。これは必要なときに文字列の途中で折り返す指定です。すべての文章やタイトルへ一律に適用する前に、意図しない改行がないか見ます。MDNのoverflow-wrap解説で動作の違いを確認できます。
5．横スクロールの検査に「文章の確認」を足す
ページのscrollWidthとclientWidthが同じでも、途中のコンテナで文字が隠されていれば全文表示の証拠にはなりません。次を別々に確認します。
- ページ全体が横へはみ出していないか。
- 段落が親の表示領域に収まっているか。
- 原文の最初から最後まで読めるか。下の行も欠けていないか。
ブラウザーテストを作れる場合は、Range.getClientRects()でテキスト範囲の矩形を取得し、クリップする祖先の表示領域と比較する方法もあります。返される矩形は、必ずしも「1行につき1個」ではありません。リンクなどの入れ子や複数の断片を含みうるため、矩形の数を行数と決めつけないようにします。仕様上の用途はMDNのRange.getClientRects()解説を参照してください。
矩形が範囲内でも、別の固定要素に覆われたり、文字と背景の色が近かったりすれば読めません。機械的な幅の比較に加え、画像を開いて原文の末尾と照合します。
開発者ツールでクリップ候補を探す（2026年10月29日追記）
Chromeの開発者ツールでElementsから対象の段落を選び、Consoleで次を実行すると、選択要素 $0 内の文字範囲と、overflow: hidden / clip / auto / scroll を持つ祖先の境界を比べられます。ページ全体のスクロール幅だけでは見つからない「親の中で隠れる」候補を探す補助です。
(() => {
const target = $0;
if (!(target instanceof Element)) throw new Error('Elementsで対象要素を選んでください');
const walker = document.createTreeWalker(target, NodeFilter.SHOW_TEXT);
const outside = [];
let node;
while ((node = walker.nextNode())) {
if (!node.textContent.trim()) continue;
const range = document.createRange();
range.selectNodeContents(node);
for (const rect of range.getClientRects()) {
let parent = node.parentElement;
while (parent) {
const style = getComputedStyle(parent);
const box = parent.getBoundingClientRect();
const clipsX = /^(hidden|clip|auto|scroll)$/.test(style.overflowX);
const clipsY = /^(hidden|clip|auto|scroll)$/.test(style.overflowY);
const left = box.left + parent.clientLeft;
const top = box.top + parent.clientTop;
const right = left + parent.clientWidth;
const bottom = top + parent.clientHeight;
const outsideX = clipsX && (rect.left < left - 1 || rect.right > right + 1);
const outsideY = clipsY && (rect.top < top - 1 || rect.bottom > bottom + 1);
if (outsideX || outsideY) {
outside.push({
textNodeTag: node.parentElement?.tagName,
ancestor: `${parent.tagName}${parent.id ? `#${parent.id}` : ''}`,
overflowX: style.overflowX,
overflowY: style.overflowY,
outsideX,
outsideY,
});
}
parent = parent.parentElement;
}
}
}
return {
viewport: { width: document.documentElement.clientWidth, scrollWidth: document.documentElement.scrollWidth },
selectedElement: `${target.tagName}${target.id ? `#${target.id}` : ''}`,
clippingCandidates: outside,
};
})()候補が出ても、それだけで原因が確定したとは限りません。line-clamp、高さ制限、別要素による重なりは別に確認し、原文の末尾が画面で読めるかを最後に照合してください。候補が空でも、文字色や画像との重なりまでは証明しません。この例はDOMを読むだけで、ページを書き換えたり通信したりしません。
6．固定の同意案内は、本文と分けて試す
画面下の案内は通常の本文とは配置条件が違います。文章が折り返しても、案内全体が高くなって画面を覆う、ボタンが画面外へ出る、といった問題が残る場合があります。
| 状態 | 表示の確認 | 操作後の確認 |
|---|---|---|
| 未選択 | 説明の末尾、プライバシーリンク、両方の選択ボタンが読める | 選択できるか |
| 拒否後 | 案内が意図どおり閉じるか | 再読み込み後の拒否状態、設定を開き直せるか |
| 設定を開き直す | 現在の選択と全文が読めるか | 選択変更の動作を保っているか |
表示修正のために解析タグを同意前から読み込む、保存済みの選択を同意へ書き換える、といった変更は必要ありません。CSSの表示確認と、同意処理の機能確認を両方残します。利用者のブラウザーで一括してサイトデータを消すのではなく、検証用の環境で状態を分けて確認します。
修正後に残すチェック表
このサイトで使った375／390／430／768／1280／1440pxは確認条件の例です。どんな端末でも正常という保証にはならず、実機や拡大表示も必要に応じて追加します。
- 問題のあった幅で、紹介文と同意説明の末尾まで読んだ
- 左右だけでなく、最下行の欠け・文字の重なりも確認した
- 横スクロールがなく、PC側の構図も維持した
- 同意案内の初期状態・拒否後・設定再表示を分けて試した
- 最終コードから作ったページのURL・版・画面幅を記録した
- 画像を保存した場合は、そのファイルを開いて右端まで確認した
- 未確認の端末や状態を「確認済み」に含めていない
最初の一歩は、切れた文章の原文と末尾を残し、その段落から親要素へたどることです。幅の測定、全文の読み取り、ボタンの動作を別の確認欄にすると、「横はみ出しなし」だけで終わる見落としを減らす手掛かりになります。
作業を再開しやすい形で残す方法は、AIとの制作手順を仕組みに残す理由にもまとめています。
資料と制作方法
2026年10月28日に、天翔サイトのCSS・同意案内コンポーネントと2026年10月22日の変更履歴、上記MDN資料を照合しました。AIで構成・原稿整理を補助し、記述をソースと資料へ対応付けています。この記事の執筆を、新しい実機スマートフォン試験や文字切れの再現試験として扱っていません。