ブラウザを最小幅まで縮めても崩れない？ゆまラボのレスポンシブ耐久テスト

ゆまラボは、PCブラウザの横幅をかなり狭くしてもレイアウトが大きく乱れにくい。

トップページを見ながらブラウザの端をドラッグしていくと、ヒーローは1列になり、ヘッダーのリンクは次の行へ移る。それでも文字やボタンが画面外へ押し出される様子はなかった。

見た目の印象だけで「どこまで縮めても崩れない」とは書けない。トップが収まっていても、長い記事タイトル、パンくず、コードブロック、記事カード、ページナビのどこかが本文幅を押し広げることはある。

2026年9月13日時点の公開ページを使い、PCブラウザを手動で縮められる限界まで狭くする。その状態でトップ、連載一覧、記事本文、カテゴリ一覧を順番に開き、折り返しと要素の重なりを確認した。

ブラウザを手動で狭くして4種類のページを確認する#

今回の狭幅確認では、ブラウザウィンドウの右端をマウスでドラッグし、これ以上狭くできない位置まで縮めた。その状態を保ったまま、役割の異なるページを開いている。

種類	確認したページ	主に見る要素
トップ	ゆまラボ	ヘッダー、ヒーロー、ボタン、連載カード
記事本文	第27回 画像表示を見直す―Astroの画像最適化と遅延読み込みでページを軽くする	パンくず、長いタイトル、description、タグ、画像
連載一覧	Astro＋Cloudflareでサイトを作る	見出し、並び順、ページナビ、記事カード
カテゴリ一覧	カテゴリ	カテゴリカード、件数、サブカテゴリリンク

トップは上部と連載部分を分けて撮影したため、キャプチャは合計5枚になる。

キャプチャ	画像ファイルの横幅
トップ上部	555px
トップ・連載部分	549px
連載一覧	554px
記事本文	556px
カテゴリ一覧	545px

ここで記録しているのは、保存したキャプチャファイル自体のピクセル数。DevToolsのデバイスツールバーでCSS viewportを指定した結果ではない。OSの表示倍率や切り抜き方でも画像サイズは変わるため、viewportを545pxとしては扱わない。

今回確定できるのは、「使用したPCブラウザを手動で縮められる限界まで狭くした状態」の表示になる。

トップは1列へ切り替わり、ヘッダーも2段で収まる#

トップ上部では、ロゴとサイト内検索が1段目、その下に6個の内部リンクが並んでいる。

ロゴと検索ボタンは重ならない。HomeからAboutまでのリンクも途中で欠けず、1行のまま表示されている。

PC幅で左右に並んでいたヒーローの文章と画像は、狭幅では縦方向へ切り替わった。見出し、説明文、2個のボタン、画像の順に表示される。ボタンは横に並んだままだが、左右の余白を残して収まっている。

下へ移動すると、ヒーロー画像の続きと連載カードを確認できる。

3列表示の連載カードは1列になった。カード内ではアイコンと連載名を横に置き、その下へ説明、記事数、リンクを並べている。長い連載名は折り返すが、枠外へのはみ出しや要素の重なりは見つからない。

単に全体を小さくした表示ではなく、横に置いていた要素を縦へ変更している。狭幅でも読める理由が画面から分かる。

連載一覧では長い見出しの折り返しが先に気になる#

連載一覧には、長いページ見出し、並び順の選択欄、ページナビ、画像付きの記事カードがある。

並び順の選択欄は右側に残り、その下のページナビも1行に収まっている。最初、前へ、ページ番号、次へ、最後の各リンクは重ならない。

記事カードでは、サムネイルの右側に説明文を表示し、タグを下へ並べている。カード全体が画面外へ出る状態は見られない。

今回の手動確認では、ページ上部の見出しが最初に気になった。

Astro＋Cloudflareでサイトを作るの最後の「る」だけが2行目へ送られている。読めなくなる破綻ではないが、見出しとしての見た目は少し窮屈になる。ページ全体の横スクロールより先に、長い日本語タイトルの行末が実用上の境目として現れた。

記事タイトルとカテゴリカードも画面内に残る#

代表記事には、パンくず、長いH1、複数行のdescription、公開日と更新日、7個のタグ、アイキャッチがある。

パンくずの末尾にある記事タイトルは次の行へ折り返される。H1は3行、descriptionも複数行になるが、右端で文字が切れたり、検索ボタンと重なったりはしていない。

タグは1行へ無理に押し込まず、#パフォーマンスだけ次の行へ移っている。アイキャッチも本文の左右余白内に収まる。

カテゴリ一覧はカード単位で1列表示になる。

カテゴリ名、記事数、サブカテゴリへのリンクがカード内に残っている。WEB制作のサブカテゴリは2行に分かれるが、リンク同士の重なりはない。

トップ、連載一覧、記事本文、カテゴリ一覧を比べると、狭幅では同じ縮小方法を使っていない。ヒーローとカード一覧は列数を減らし、長い文章とタグは折り返し、画像は親要素の幅まで縮めている。

PC幅ではscrollWidthも数値で確認する#

手動の最小幅確認とは別に、Workの実ブラウザでは次の4値を取得した。

({
  innerWidth: window.innerWidth,
  clientWidth: document.documentElement.clientWidth,
  scrollWidth: document.documentElement.scrollWidth,
  bodyScrollWidth: document.body.scrollWidth,
})

この実ブラウザはviewportの数値変更に対応していなかったため、計測できたのはwindow.innerWidth = 1363px、縦スクロールバーを除いたclientWidth = 1348pxのPC表示になる。

ページ	innerWidth	clientWidth	document scrollWidth	body scrollWidth
トップ	1363px	1348px	1348px	1348px
記事本文	1363px	1348px	1348px	1348px
連載一覧	1363px	1348px	1348px	1348px

3ページとも、documentElement.scrollWidth <= clientWidthになった。PC幅ではページ全体の横スクロールは発生していない。

代表記事には39個のコードブロックがあり、そのうち3個で内部幅が本文幅を超えていた。

コードブロック	表示幅	内部幅	overflow-x
画像タグの例	720px	776px	auto
画像パスを検査する処理	720px	728px	auto
長いMarkdown画像パス	720px	1120px	auto

最も長いブロックは、720pxの枠内に1120px分のコードを持っていた。ただし、横スクロールはpre要素の中だけで完結する。ページ全体のscrollWidthは1348pxのまま変わらなかった。

画面上でもコードブロック下部に横スクロールバーが見える。本文、見出し、次の段落まで一緒に横へ動く状態ではない。

この処理は、過去の第14回 ゆまラボのヘッダー導線とサイト内検索を追加―横長の表とsitemap.xmlも修正で表に対して行った対応と同じ考え方になる。横長の内容を無理に細くせず、スクロール範囲をその要素の中へ限定する。

公開中のCSSから画面の変化を確認する#

手動キャプチャで見えた変化は、2026年9月13日に配信されていたCSSとも対応している。Astroが付けたスコープ属性は省略した。

ページの基本幅は固定値だけで決めず、viewportとの差を残す形になっている。

main {
  width: min(calc(100% - 40px), var(--site-width));
  margin: 0 auto;
}

@media (width <= 720px) {
  main {
    width: min(calc(100% - 32px), var(--site-width));
  }
}

画面が1120pxより狭くなると、mainは画面幅から左右の余白を引いた幅になる。記事本文も640px以下では左右16pxずつを残す指定へ切り替わる。

画像、コード、表には別の制御がある。

img,
video,
iframe {
  max-width: 100%;
}

pre {
  max-width: 100%;
  overflow-x: auto;
}

.table-scroll-region {
  max-width: 100%;
  overflow-x: auto;
}

.prose {
  min-width: 0;
  overflow-wrap: anywhere;
}

画像は親要素より大きくならない。コードと表は内容を内部スクロールへ逃がす。本文中の長いURLや英数字はoverflow-wrap: anywhereで折り返せる。

レイアウト自体も幅に応じて変わる。

@media (width <= 720px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .series-cards,
  .category-cards {
    grid-template-columns: 1fr;
  }
}

トップのヒーローとカードは720px以下で1列へ切り替わる。ヘッダーは520px以下でグリッドになり、内部リンクは2段目へ移る。360px以下には3列のリンク配置も定義されている。

狭い画面でナビゲーションが不自然に折り返す問題は、過去の第11回 ゆまラボのUIをさらに修正する―ロゴ、カテゴリ表示、スマホ表示、RSS導線を見直すで修正している。本文画像についても、第27回 画像表示を見直す―Astroの画像最適化と遅延読み込みでページを軽くするでsrcsetとsizesを追加している。

htmlにはoverflow-x: hiddenも設定されている。この指定はページ全体の横スクロールを抑える一方、はみ出した要素を画面外で切る可能性がある。狭幅では数値だけでなく、リンクや文字が欠けず操作できるかを画面でも確認する必要がある。

PCブラウザの最小幅とスマートフォン幅は別になる#

今回の手動確認では、使用したPCブラウザをウィンドウ操作で縮められる限界まで狭くした。キャプチャファイルの横幅は545～556pxになっている。

これは375pxや320pxのスマートフォン表示とは別の条件。画像の横幅をCSS viewportと同一視することもできないため、「320pxまで崩れない」「280pxまで使える」という評価は行わない。

確認方法	確定した内容
PCブラウザを手動で最小幅まで縮小	トップ、記事本文、連載一覧、カテゴリ一覧で大きな重なりや画面外への欠けは見られない
Work実ブラウザの数値計測	innerWidth 1363px、clientWidth 1348pxでページ全体の横オーバーフローなし
コードブロックの計測	最大1120pxの内部幅を720pxのブロック内スクロールで処理
375px / 320px / 280px	CSS viewportを指定した検証は未実施

手動キャプチャにはフッター、記事末尾の前後記事リンク、狭幅時のコードブロックは含まれていない。この範囲まで含めて「サイト全体が最小幅で崩れない」と断定することも避ける。

狭い画面幅で確認できた表示#

使用したPCブラウザを手動で最小幅まで縮めた範囲では、4種類のページに大きな表示崩れは見つからなかった。

崩れにくさは、単に横スクロールを隠しているだけではない。ヒーローとカードを1列へ変更し、ヘッダーを2段にし、文章とタグを折り返し、画像を親要素内へ縮めている。横長のコードや表は、その要素だけをスクロールさせる。

実用上いちばん早く現れた変化は、連載一覧の長い見出しで最後の1文字だけが次の行へ移ったこと。操作不能になる破綻ではないが、狭幅で余裕が少なくなったことは分かる。

少なくとも今回の手動確認範囲では、「狭くしても表示が残る」だけでなく、「読む順番を保ったまま配置が変わる」ところまで確認できた。PCブラウザの最小幅に対する耐久性は高い。ただし、スマートフォン幅や280px以下のストレステストは別の検証として残る。

参考#

• MDN：viewportメタ要素
• MDN：widthメディア特性
• MDN：overflow-x
• MDN：overflow-wrap
• MDN：max-width