CSS講座 / レスポンシブCSSの点検：画面幅・拡大・キーボード
レスポンシブCSSは、複数の画面幅だけでなく、拡大や入力方法が変わっても内容と操作を保てるかを確認します。切れた文章、ページ全体の横スクロール、見えないフォーカスを、条件を分けて調べます。
点検用のページと復元用コピーを用意する
次をresponsive-check.htmlとしてUTF-8で保存します。メニュー、カード、画像、長い文字列、入力欄を一緒に確認でき、外部ライブラリーやサーバーは不要です。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>responsive-check.html</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 1rem/1.6 sans-serif; color: #243447; }
h1, h2, p { margin-top: 0; } a { color: #145f8f; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #ac4100; outline-offset: 3px; }
.page { width: min(100%, 64rem); margin-inline: auto; padding: 1rem; }
.menu { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.menu a { display: block; padding: .65rem 1rem; background: #e8f3fa; }
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.card { min-width: 0; padding: 1rem; border: 1px solid #789; overflow-wrap: anywhere; }
.card h2 { font-size: 1.25rem; } .card img { display: block; max-width: 100%; height: auto; margin-bottom: 1rem; }
.form { width: min(100%, 28rem); margin-top: 2rem; }
label { display: block; font-weight: bold; }
input { width: 100%; min-width: 0; padding: .65rem; font: inherit; }
button { max-width: 100%; padding: .65rem 1rem; font: inherit; white-space: normal; overflow-wrap: anywhere; }
@media (min-width: 42rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
</style>
</head>
<body>
<main class="page">
<h1>Check the same page under different conditions</h1>
<nav class="menu" aria-label="Lab Menu"><a href="#cards">Card description</a><a href="#request">Enter your question</a><a href="#result">Record check results</a></nav>
<section id="cards" class="cards">
<article class="card"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22300%22%20viewBox%3D%220%200%20400%20300%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%23287699%22%2F%3E%3Crect%20width%3D%22400%22%20height%3D%2235%22%20fill%3D%22%23205c32%22%2F%3E%3Crect%20y%3D%22265%22%20width%3D%22400%22%20height%3D%2235%22%20fill%3D%22%239e3131%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23f6ae4c%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%22120%22%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3Crect%20x%3D%22358%22%20y%3D%22120%22%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E" width="400" height="300" alt="Practice illustration showing both the upper and lower bands and the center circle"><h2>Long descriptions can be read to the end if there is no fixed height.</h2><p>Zooming may reduce how much text fits on each line. The description and link below the image must stay visible even when the same content occupies more lines.</p><a href="#result">First card notes</a></article>
<article class="card"><h2>Card with a long identifier</h2><p class="token">REFERENCE_ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p><p>Long strings are wrapped without deleting the content itself.</p><a href="#result">Second card notes</a></article>
</section>
<form id="request" class="form" action="#request" method="get"><h2>Enter your question</h2><label for="email">Email</label><p id="help">Use test@example.com instead of a real address to try the input styling. This example has no server that stores information.</p><input id="email" name="email" type="email" aria-describedby="help" required><p><button type="submit">Check input format</button></p></form>
<section id="result"><h2>Check results</h2><p>Record the viewport width, zoom level, changed rules, and results in a separate note.</p></section>
</main>
</body>
</html>
最初は横にはみ出さない構成です。responsive-check-original.htmlとしてコピーを残し、後から問題を起こす指定を一つずつ追加・削除します。フォームは保存サーバーへ送信する実装ではありません。実在の個人情報を使わず、例示のテスト用アドレスで操作します。
幅を連続して変え、境界を調べる
Edgeでは開発者ツールのデバイスエミュレーションを有効にし、Responsiveの幅を入力して比較できます。Windowsの既定操作はF12またはCtrl+Shift+I、デバイス表示はCtrl+Shift+Mです。UIは版によって変わるため、Microsoft Edgeのエミュレーションガイドを参照してください。
320pxと390pxでメニューの折り返し、画像、入力欄、最下部までの文章を確認します。数個の端末名を選ぶだけで終えず、幅を徐々に増やしてカードが狭い領域も探します。この例は42remで切り替わるため、初期フォント16pxなら671・672・673pxを比べ、671pxは一列、672pxから二列になるかを見ます。
1365pxや1920pxでは本文の上限と行の長さを確認します。エミュレーションは実機のフォント、タッチ、仮想キーボードなどを完全再現しません。対象の実機でも回転と入力中の表示を確認します。境界の考え方はメディアクエリーを参照してください。
ページ拡大と文字設定を別に試す
ブラウザー拡大では全体が大きくなり、CSSで使えるビューポート幅も変わる場合があります。WindowsならCtrlと＋で拡大し、Ctrl+0で戻します。CSSのhtmlのfont-size変更を「ブラウザー拡大」と記録しないでください。
実際の窓で基準の幅を記録し、200%でメニュー、説明、ラベル、入力欄、ボタンに切れや重なりがないかを見ます。1280 CSS pxを基準に400%なら約320 CSS px相当ですが、UIやスクロールバーなどで実際の幅は異なり得ます。既定フォントの変更も、倍率を戻して別条件で試します。
アクセシビリティでは200%の文字拡大で内容と機能を保つこと、通常の縦スクロール内容を320 CSS px相当で二方向スクロールなしに再配置することなどが求められます。表や地図の二次元的内容には例外がありますが、ページ全体の例外にはなりません。W3Cの文字サイズ変更の解説、リフローの解説で条件を確認します。
横にはみ出す原因を一つずつ再現する
元のCSS末尾へ次だけを追加し、390pxで開きます。最初のカードが最低40remを要求するため、列を狭くしても収まりません。開発者ツールでwidthとmin-widthを確認します。
.card:first-child { min-width: 40rem; }
追加を削除してmin-width: 0へ戻し、同じ390pxで再確認します。次に以下だけを追加し、長い識別子のはみ出しを確認して削除します。二つの不具合を同時に加えると、どの変更が効いたか分かりにくくなります。
.card { overflow-wrap: normal; }
コンソールでは次で文書の幅を比較できます。右のscrollWidthが大きければ、原因を調べる手がかりになります。これだけで要素を特定できるわけではなく、意図したスクロール領域とは別に判断します。
({ viewport: window.innerWidth, document: document.documentElement.scrollWidth })
固定幅ならwidth・min-width・左右margin、画像なら寸法と親の整列、文字列ならwhite-spaceとoverflow-wrap、Grid・Flexなら親とアイテムの両方のサイズ規則を見ます。はみ出しと改行も参照してください。
固定高さで切れる内容を確認する
幅の問題を戻してから、次だけを末尾へ追加します。最初のカードの説明やリンクが切れるかを確認します。
.card:first-child { height: 10rem; overflow: hidden; }
固定高さとhiddenの組み合わせは、長文や文字拡大で必要な高さが増えると問題になります。追加を削除して内容に応じる高さへ戻し、同じ条件で再点検します。高さをそろえたいなら最小高さや配置の調整を検討し、情報を切らないようにします。横スクロールを隠すことや、文字を小さくし続けることを最初の解決策にしないでください。
キーボード操作と結果を記録する
新しく開いたページでTabを使い、メニュー、カードリンク、メール欄、ボタンへ進みます。Shift+Tabで戻り、フォーカスの枠が見えるか確認します。画面外へ移動したときに適切にスクロールし、固定メニューなどに完全に隠れないかも見ます。CSSで見た目の順番を変えた場合は文書順との整合も確認します。
記録にはブラウザー名と版、幅、倍率、再現操作、期待と実際、原因と修正、同じ条件での再確認を残します。例えば「390px・100%、最小幅40remを追加、横にはみ出したので追加を削除し再確認」という形です。これは記録方法の例であり、各環境の結果は実際に確認して記入します。
問題がなかった場合にも実施条件を残せば、後の変更と比較できます。幅、拡大、内容、操作を分けて試し、修正後には元の失敗条件へ戻って確認します。
