【kintone】印刷時の改ページをCSSでコントロールする方法

kintoneの印刷画面でCSSを使って改ページを制御するイメージ図 kintone のレコードを印刷するとき、フィールドの途中に改ページが入ったり、項目名と値が別ページになったりするため、印刷レイアウトを調整したくなる時があります。

kintoneの基本機能では印刷レイアウトを細かく固定できませんが、スタンダードコースで利用できる「CSSカスタマイズ」を活用することで、印刷時の改ページ位置を制御できます。本記事では、1ファイルアップロードするだけで改ページ崩れを抑止するCSSの事例を紹介します。

内容：

なぜ改ページがズレるのか
CSS カスタマイズの仕組み
1フィールドをページ分割せずに印刷制御する CSS
まとめ

動作確認は、2026年4月時点の kintone（スタンダードコース）で行いました。確認したブラウザは Microsoft Edge バージョン 148.0.3967.54 です。

なぜ改ページがズレるのか

kintone の印刷は、ブラウザの「印刷」機能をそのまま使います。ブラウザは画面の見た目をそのまま用紙に収めようとするため、フィールドの高さと用紙サイズが合わないと途中でページが切れます。

このような場合は、CSSの印刷制御プロパティである break-inside を使うと、フィールドの途中で改ページを禁止するといったことが可能です。

CSS カスタマイズの仕組み

kintone では「アプリ設定 → JavaScript / CSS でカスタマイズ」画面から CSS ファイルをアップロードできます。 @media print の中に書いたスタイルは印刷時にだけ適用されるため、通常の画面表示には影響しません。

1フィールドをページ分割せずに印刷制御する CSS

@media print {
  /* 項目と内容を印刷時に分割しない */
  .row-gaia {
    break-inside: avoid !important;
    page-break-inside: avoid !important; /* 古いブラウザ向けに併記 */
  }
}

導入前の注意点

本CSSで使用している .row-gaia といったクラス名は、kintoneの標準システムが内部的に生成している部品名です。これらはkintoneのアップデートに伴い、将来的にクラス名が変更・廃止される可能性があります。クラス名が変更された場合、CSSが適用されなくなり改ページ制御が失われる可能性があります。
要素の途中でのページ分割を禁止するため、行数の多いサブテーブルや、大量のテキストが入力されたリッチエディターが含まれている場合、その要素全体を次ページに押し込もうとする挙動が働き、手前に不自然に広大な余白（空白領域）が発生することがあります。