---
title: "印刷すると崩れる・はみ出すときの対処"
description: "画面では整っているのに印刷すると文字が切れたり右端がはみ出したりする悩みを持つ人向けに、印刷用CSSとページ設定で崩れを防ぐ具体的な手順を説明します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/print-layout-broken"
markdown: "https://giga-site.com/articles/print-layout-broken/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# 印刷すると崩れる・はみ出すときの対処

画面表示はきれいなのに、印刷プレビューにすると文字が切れる、右端がはみ出す、不要な要素まで紙に出る——そんな悩みは印刷向けの指定が抜けていることが原因のことが多いです。この記事では、印刷時に崩れる理由と、印刷用CSSやページ設定で整える具体的な手順を解説します。

> Source HTML: https://giga-site.com/articles/print-layout-broken
> Article index: https://giga-site.com/articles/index.md

## 印刷で崩れる理由

画面と紙はそもそも前提が違います。画面は幅に合わせて伸縮し、スクロールできますが、紙は決まったサイズで区切られ、横にはみ出したぶんは切れてしまいます。画面向けに最適化したレイアウトをそのまま印刷すると、この違いが崩れとして表れます。

また、固定配置の要素や背景色、横並びのレイアウトは印刷で扱いが難しく、意図しない位置に出たり、背景が印刷されなかったりします。印刷を想定するなら、印刷時専用の指定を用意するのが基本です。

## 崩れの典型パターン

印刷で起きる崩れにはよくある型があります。プレビューを見て、どれに当たるかを確認しましょう。

- コンテンツ幅が紙幅を超えて右側が切れる・はみ出す
- ヘッダーやナビ、ボタンなど画面専用の要素が紙に出てしまう
- 背景色や背景画像が印刷されず、白地で文字が読みにくい
- 表や画像がページの切れ目で分断される
- 固定配置の要素が各ページに重なって出る

## 症状別チェック表

印刷すると崩れる・はみ出すは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

## 印刷向けに整える手順

印刷の崩れは、印刷時だけ適用される指定を足すことで多くが解決します。次の順に進めてください。

1. ブラウザの印刷プレビューを開き、どこがはみ出す・切れるかを具体的に確認する
2. 印刷時専用のスタイル（printメディア向けの指定）を用意し、画面用と分ける
3. ナビやボタンなど不要な要素を印刷時に非表示にする
4. 幅を紙に収まるよう調整し、横スクロール前提の固定幅を見直す
5. 表や見出しがページ境界で割れないよう、改ページの扱いを指定する
6. 用紙サイズと余白をページ設定で整え、再度プレビューで確認する

## ページ設定と背景の扱い

用紙サイズや余白は、印刷向けのページ設定で指定できます。A4などの想定サイズに合わせて余白を確保すると、端の切れを防げます。背景色や背景画像を紙にも出したい場合は、ブラウザの印刷ダイアログで「背景のグラフィック」を有効にする必要があるため、利用者への案内も検討します。

改ページは、表の行や見出しがページの切れ目で分断されないように扱いを指定すると読みやすくなります。画像が大きすぎてはみ出す場合は、印刷時に幅を紙に収まるよう調整しておくと安定します。

## 印刷確認を関係者と共有する

印刷結果はプリンタやブラウザ、OSによって差が出ることがあり、自分の環境だけでは判断しきれません。実際に印刷やPDF化して確かめてほしい相手に、ページをすぐ渡せると確認がスムーズです。

ギガサイト便なら、印刷向けに調整したHTMLやZIPをドロップして共有URLを発行し、相手はそのURLを開いて自分の環境で印刷プレビューやPDF出力を試せます。同じURLのまま差し替えられるので、印刷指定を直すたびにリンクを送り直さず再確認を頼めます。社外と共有する確認URLには認証と公開期限を設定しておくと安心です。

## よくある質問

### 画面では崩れないのに印刷だけ崩れるのはなぜですか。

画面は幅に合わせて伸縮しスクロールできますが、紙は固定サイズで、はみ出したぶんは切れます。画面向けのレイアウトをそのまま印刷するとこの差が崩れになるため、印刷時専用の指定を用意するのが基本です。

### ボタンやナビを印刷したくありません。どうしますか。

印刷時だけ適用されるスタイルで、これらの要素を非表示に指定してください。printメディア向けの指定で画面用と分けておくと、画面表示には影響を与えずに印刷物から不要な要素を消せます。

### 背景色が印刷されません。

多くのブラウザは既定で背景を印刷しません。印刷ダイアログで「背景のグラフィック」を有効にすると出力されます。確実に背景を出したい場合は、利用者にこの設定を案内する運用も検討してください。

### 表がページの途中で切れてしまいます。

改ページの扱いを指定して、行や見出しがページ境界で分断されないようにできます。大きな表は適切な位置で改ページされるよう調整すると、印刷物が読みやすくなります。

### 原因が分からないときはどこから確認すべきですか？

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

## 関連記事

- [CSS Gridのレイアウトが崩れる・列が揃わないときの原因と対処](https://giga-site.com/articles/grid-layout-collapses/index.md)
- [読み込み中にレイアウトがガクッとずれるときの原因と対処](https://giga-site.com/articles/layout-shift-loading-jump/index.md)
- [スマホを横向きにすると崩れるときの原因と対処](https://giga-site.com/articles/landscape-mode-layout-break/index.md)
- [ブラウザのズーム（拡大表示）でレイアウトが崩れるときの対処](https://giga-site.com/articles/browser-zoom-layout-break/index.md)
- [スマホだけ表示が崩れるときの原因と直し方](https://giga-site.com/articles/broken-only-on-mobile/index.md)
- [position:fixedの要素がずれるときの対処](https://giga-site.com/articles/position-fixed-broken/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "印刷すると崩れる・はみ出すときの対処",
  "description": "画面では整っているのに印刷すると文字が切れたり右端がはみ出したりする悩みを持つ人向けに、印刷用CSSとページ設定で崩れを防ぐ具体的な手順を説明します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/print-layout-broken",
  "url": "https://giga-site.com/articles/print-layout-broken",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "画面では崩れないのに印刷だけ崩れるのはなぜですか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "画面は幅に合わせて伸縮しスクロールできますが、紙は固定サイズで、はみ出したぶんは切れます。画面向けのレイアウトをそのまま印刷するとこの差が崩れになるため、印刷時専用の指定を用意するのが基本です。"
      }
    },
    {
      "@type": "Question",
      "name": "ボタンやナビを印刷したくありません。どうしますか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "印刷時だけ適用されるスタイルで、これらの要素を非表示に指定してください。printメディア向けの指定で画面用と分けておくと、画面表示には影響を与えずに印刷物から不要な要素を消せます。"
      }
    },
    {
      "@type": "Question",
      "name": "背景色が印刷されません。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "多くのブラウザは既定で背景を印刷しません。印刷ダイアログで「背景のグラフィック」を有効にすると出力されます。確実に背景を出したい場合は、利用者にこの設定を案内する運用も検討してください。"
      }
    },
    {
      "@type": "Question",
      "name": "表がページの途中で切れてしまいます。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "改ページの扱いを指定して、行や見出しがページ境界で分断されないようにできます。大きな表は適切な位置で改ページされるよう調整すると、印刷物が読みやすくなります。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```