CSS プロパティ page-break-inside

CSS page-break-inside プロパティ：要素内での改ページ動作を制御する

CSS page-break-inside プロパティ：要素内での改ページ動作を制御する

この記事では、CSS の `page-break-inside` プロパティについて詳しく解説します。構文、値、ブラウザの互換性などの情報に加えて、ウェブページの印刷時またはページ分割表示時に、要素内で改ページが発生するかどうかを制御する方法を、コード例を交えて説明します。

目次

  1. page-break-inside プロパティの概要
  2. 構文と値
  3. ブラウザの互換性
  4. 使用シーンと注意点
  5. まとめ
  6. よくある質問

1. page-break-inside プロパティの概要

  • **定義:** `page-break-inside` プロパティは、要素の内容が改ページ時にどのように分割されるかを指定します。ウェブページを印刷したり、ページ分割して表示したりする場合に、要素内で改ページを行うかどうかを制御するために使用します。
  • **適用対象:** すべてのブロックレベル要素
  • **継承:** しない

2. 構文と値

  • **構文:** 
    
page-break-inside: auto | avoid;
  • **値:**
    • `auto`: デフォルト値。要素内で改ページが発生する可能性があります。
    • `avoid`: 要素内での改ページを可能な限り避けます。ただし、これはあくまでも「推奨」であり、ブラウザは実際の状況に応じてこの設定を無視する可能性があります。

コード例：


<!DOCTYPE html>
<html>
<head>
  <style>
    .avoid-break {
      page-break-inside: avoid;
    }
  </style>
</head>
<body>
  <div class="avoid-break">
    <!-- この要素内のコンテンツは、可能な限り改ページされないようにします -->
  </div>
</body>
</html>

3. ブラウザの互換性

`page-break-inside` プロパティのブラウザのサポート状況については、以下の表を参照してください。

ブラウザ バージョン サポート状況
Chrome 1.0+ ✅
Firefox 1.5+ ✅
Safari 3.1+ ✅
Edge 12+ ✅
Internet Explorer 8+ ✅

* ✅: サポートされている
* ⚠️: 部分的にサポートされている
* ❌: サポートされていない

最新の情報については、Can I use...? を参照してください。

4. 使用シーンと注意点

  • 長い記事やレポートなど、ウェブページのコンテンツを印刷したり、PDF にエクスポートしたりする場合に役立ちます。
  • `page-break-inside: avoid` はあくまでも「推奨」であり、ブラウザは常に要素内での改ページを完全に回避できるとは限りません。
  • よりきめ細かい改ページ制御を行うには、`page-break-before` や `page-break-after` などの他の改ページ制御プロパティと組み合わせて使用することをお勧めします。

5. まとめ

`page-break-inside` プロパティは、ウェブページの改ページ表示を制御するための重要なプロパティです。このプロパティを適切に使用することで、印刷時または PDF エクスポート時のユーザーエクスペリエンスを効果的に向上させることができます。

よくある質問

  1. **Q: `page-break-inside: avoid` を指定しても、要素内で改ページが発生することがあります。なぜですか？**
    **A:** `avoid` はあくまでも「推奨」であり、ブラウザは実際の状況に応じてこの設定を無視する可能性があります。たとえば、要素の高さがページの残りの高さを超える場合、ブラウザは要素内で改ページを行うことがあります。
  2. **Q: `page-break-inside` プロパティは、すべてのブラウザでサポートされていますか？**
    **A:** いいえ、すべてのブラウザでサポートされているわけではありません。古いバージョンのブラウザでは、このプロパティがサポートされていない場合があります。
  3. **Q: `page-break-inside` プロパティと `page-break-before` プロパティ、`page-break-after` プロパティの違いは何ですか？**
    **A:** `page-break-inside` プロパティは要素内での改ページを制御し、`page-break-before` プロパティと `page-break-after` プロパティは要素の前または後に改ページを挿入するかどうかを制御します。