ホームページ(ウェブサイト)の制作において、画面上の見た目を整えるだけでなく、紙に印刷した際のレイアウトを適切に制御することも、事業の運用上求められる重要な施策です。見積書や請求書、製品マニュアルなど、ユーザーがブラウザの機能を使って紙に出力する際、画面のレイアウトがそのまま印刷されてしまうと、写真の途中でページが真っ二つに分断されたり、見出しだけがページの最下部に残ってしまったりと、非常に読みにくい状態になることがよくあります。
このような見栄えの悪さは、紙の資料を手にしたユーザーにストレスを与え、企業のブランドイメージを損なう原因になります。そこで、印刷時のレイアウトを美しく保つために活用されてきたのが、CSSの印刷用ページ制御プロパティです。
本記事では、印刷時の特定レイアウト(ページボックス)を適用する「page」、印刷時の改ページ位置を制御する「page-break-after」および「page-break-before」、要素内での不自然な改ページを避ける「page-break-inside」、そしてトンボ(裁ち落とし)印刷に関する指定を行う「marks」について、それぞれの機能や「auto」「always」「avoid」といった値の使い方を解説します。
ただし、あらかじめ明確にしておくべき重要な点があります。これらの中で「page-break-after」「page-break-before」「page-break-inside」といったプロパティは、現在では古い仕様として扱われています。現代のCSSでは、これらは「break-after」などの新しいプロパティに移行しています。また、「marks」プロパティに関しても、一般的なブラウザではサポートが打ち切られており、現代のWeb標準においては実質的に廃止されている指定です。
過去の仕様や既存のシステムで使われているコードの意図を正確に読み解くための基礎知識としてこれらのプロパティを紹介しつつ、現代のホームページ制作で推奨される最新の手法についても合わせて解説していきます。
page
page: ;
ホームページ制作(ウェブサイト制作)の際に使用するCSSプロパティ「page」についてのご説明です。
ホームページ制作・作成において、page(ページ)は、適用ページボックス名を指定します。
page 適用ページボックス名を指定

pageは、@pageで定義されたページボックス名を指定し、要素にページボックスを適用します。ページ。
auto
出力先に応じて自動設定(初期値)
ページボックス名
指定した名前のページボックスを適用
CSS2.1で削除。
印刷時の特定レイアウト(ページボックス)を適用する
CSSの「page」プロパティは、画面上のデザイン(ディスプレイ表示)ではなく、ホームページ(ウェブサイト)を「紙に印刷(またはPDF化)する際」のレイアウトを制御するためのプロパティです。
具体的には、あらかじめ「@page」ルールを使って名前付きの印刷設定(ページボックス)を作っておき、特定のHTML要素に対してその印刷設定を適用するために使用します。
例えば、事業用のホームページに非常に横に長い「料金表(table要素)」があるとします。通常の縦向き印刷では右端が見切れてしまうため、あらかじめ横向きの印刷設定(@page landscape_rule { size: landscape; })を定義しておき、表に対して「page: landscape_rule;」と指定します。これにより、ユーザーが印刷ボタンを押した際、その表のページだけが自動的に横向きで印刷されるようになります。
仕様の変遷と、現代のビジネスにおける印刷対応
より専門的な視点から補足すると、参照元のページで「CSS2.1で削除された」と記載されている通り、このプロパティは一度標準仕様から外された歴史があります。しかし、ウェブ上のドキュメントをきれいに印刷したいという需要は無くならず、現在では「CSS Paged Media Module Level 3」という新しい仕様の中で復活し、Chromeなどの主要なモダンブラウザで再びサポートされています。
現代のWebマーケティングにおいて、スマートフォンなどでの画面表示(レスポンシブデザイン)が最優先であることは間違いありません。しかし、BtoB向けの「見積書」や「製品カタログ」、店舗向けの「アクセスマップ」や「クーポン」など、紙に印刷されることを前提としたコンテンツは依然として存在します。
ユーザーがいざ印刷しようとした時に、文字が切れていたりレイアウトが崩れたりしていると、企業に対する信頼感(ブランドイメージ)の低下を招きかねません。pageプロパティなどを活用し、オンライン(画面)からオフライン(紙)へシームレスに美しい情報を提供することは、最終的な顧客満足度を高める上で非常に有効な配慮となります。
page: ;
ホームページ制作・Webデザインの1ポイント

ホームページで使用するCSSもHTMLと同様に、pageなど英単語のままのものがたくさんあります。ただ、まれに少し意味合いの違ったものもありますので注意が必要です。
page-break-after
page-break-after: ;
ホームページ制作(ウェブサイト制作)の際に使用するCSSプロパティ「page-break-after」についてのご説明です。
ホームページ制作・作成において、page-break-after(ページブレイクアフター)は、ページ印刷時の改ページ位置を指定します。
page-break-after 印刷時の改ページ位置指定

page-break-afterは、印刷時の改ページ位置を指定。ページブレイクアフター。
auto
改ページについて特に指定しない(初期値)
always
指定位置で強制的に改ページさせる
avoid
指定位置での改ページを避ける
left
指定位置で強制的に改ページさせ、指定要素を左側ページに印刷
right
指定位置で強制的に改ページさせ、指定要素を右側ページに印刷
印刷時のレイアウトを最適化する改ページ指定
「page-break-after」は、ホームページ(ウェブサイト)のページを紙に印刷したり、PDFとして保存したりする際に、特定の要素の直後で強制的に改ページを行うためのプロパティです。現在の仕様では「break-after」という新しい名称への統合が進められていますが、古い閲覧環境との互換性を保つために、両方の記述を併用して実装していく手法が一般的です。
情報の区切りを明確にする緻密な設計
企業間取引向けのサービス資料や長文のレポート、複数の製品データを連続して掲載するページなどで、このプロパティが大きな役割を果たします。ひとつの章や項目の終わりに改ページを指定しておくことで、次のトピックがページの途中で中途半端に始まるのを防ぐことができます。
ディスプレイ上での見栄えに留まらず、専用のパンフレットのような整ったレイアウトを紙面上でも再現することで、情報を読みやすく整理し、企業に対する信頼感を高めていきます。
オフラインでの体験向上と事業の拡大
集客施策や売上の向上を設計していく上で、オンライン上の利便性だけでなく、ユーザーがディスプレイから離れたあとの利用シーンまで配慮することは非常に重要です。出力された資料がそのまま顧客への提案書として使われたり、社内会議で配布されたりする場面を想定すると、紙面での美しさはブランドイメージを大きく左右します。
検索エンジン最適化(SEO)の評価に直接影響するわけではありませんが、あらゆる状況で閲覧者にストレスを感じさせない環境を提供し続けることが、最終的な問い合わせの獲得や事業の成長といった確かな成果へしっかりと結びついていきます。
page-break-after: ;
ホームページ制作・Webデザインの1ポイント

ホームページは印刷することが可能ですが、一般的なWordファイルなどドキュメントファイルと異なり、印刷用のレイアウトではないため、page-break-afterなどこうした設定項目がありました。今ではブラウザで改ページの設定等ができるものがあります。
page-break-before
page-break-before: ;
ホームページ制作(ウェブサイト制作)の際に使用するCSSプロパティ「page-break-before」についてのご説明です。
ホームページ制作・作成において、page-break-before(ページブレイクビフォー)は、ページ印刷時の改ページ位置指定します。
page-break-before 印刷時の改ページ位置指定

page-break-beforeは、印刷時の改ページ位置を指定します。ページブレイクビフォー。
auto
無指定(初期値)
always
指定位置で強制的に改ページ
avoid
指定位置での改ページを避ける
left
その位置で強制的に改ページさせ、指定要素を左側ページに印刷
right
その位置で強制的に改ページさせ、指定要素を右側ページに印刷
印刷向けレイアウトの制御と最新仕様への対応
「page-break-before」は、ホームページ(ウェブサイト)のページを紙に印刷したり、PDFとして保存したりする際に、特定の要素の直前で強制的に改ページを行うためのプロパティです。現在の仕様では「break-before」という新しい名称への統合が進められていますが、古い閲覧環境との互換性を保つために、両方の記述を併用して実装していく手法が一般的です。
紙面での読みやすさを担保する緻密な設計
企業間取引向けのサービス資料や詳細な製品スペック、あるいは長文の解説コラムなど、ユーザーが印刷して手元でじっくり読みたいと考えるコンテンツにおいて、このプロパティは大きな役割を果たします。たとえば、新しい章が始まる大見出しの直前で確実に改ページが行われるように指定しておけば、情報の区切りが明確になります。
専用のパンフレットやカタログのような整ったレイアウトを保つことができ、画面上だけでなく、印刷された後の見栄えまで丁寧に作り込むことで、企業に対する信頼感を高めていくことができます。
画面外のユーザー体験と事業の成長
集客施策や売上の最大化を設計していく上で、ユーザーがディスプレイから離れたあとの体験まで想像することは非常に重要です。印刷されたページが社内の会議資料として共有されたり、決裁者の目にとまったりする場面を想定すると、紙面での情報の読みやすさは、そのまま企業が提供する間接的なプレゼンテーションの質に直結します。
検索エンジン最適化(SEO)の順位評価に直接影響するわけではありませんが、あらゆる利用シーンで閲覧者にストレスを感じさせない環境を提供し続けることは、サービス全体の満足度を大きく底上げします。こうした細かな配慮の積み重ねが、結果として問い合わせの獲得や事業の拡大といった確かな成果へしっかりと結びついていきます。
page-break-before: ;
ホームページ制作・Webデザインの1ポイント

ホームページは印刷することが可能ですが、一般的なWordファイルなどドキュメントファイルと異なり、印刷用のレイアウトではないため、page-break-beforeなどこうした印刷に関する設定項目がありました。
page-break-inside
page-break-inside: ;
ホームページ制作(ウェブサイト制作)の際に使用するCSSプロパティ「page-break-inside」についてのご説明です。
ホームページ制作・作成において、page-break-inside(ページブレイクインサイド)は、印刷時の要素内での改ページを避ける指定をするプロパティです。
page-break-inside 印刷時の要素内での改ページを避ける

page-break-insideは、印刷時の要素内での改ページを避ける指定をします。ページブレイクインサイド。
auto
無指定(初期値)
avoid
要素内での改ページを避ける
印刷時のレイアウト最適化と最新の仕様
「page-break-inside」は、ホームページ(ウェブサイト)を紙に印刷する際やPDFとして保存する時に、表や段落などの要素の途中で不自然にページが分割されるのを防ぐためのプロパティです。現在ではCSS仕様のアップデートに伴い、「break-inside」という新しい名称へと統合が進められていますが、古いブラウザ環境との互換性を保つために両方を併記して実装していく手法が一般的です。
オフラインでのユーザー体験を支える設計
企業間取引を行う事業における製品仕様書や専門的な解説記事、あるいは実店舗へのアクセスマップなど、ユーザーが印刷して手元に残す可能性が高いコンテンツにおいてこのプロパティが活躍します。重要な図表やテキストのまとまりがページをまたいで分断されてしまうと、内容が読み取りづらくなり、企業に対する信頼感を損ねてしまうかもしれません。要素のまとまりごとに改ページを避ける指定(avoid)を行うことで、情報を美しく保ったまま閲覧者の手元に届けることができます。
間接的な集客効果と細部への配慮
事業の成果を最大化するためには、ディスプレイ上での見栄えだけでなく、印刷時というオフラインの環境まで想定した設計を行うことが非常に重要です。印刷された資料のレイアウトがきれいに整っていることは、ユーザーの満足度を向上させるだけでなく、その資料が社内会議などで共有されることによる間接的な認知拡大やブランディング効果も期待できます。
直接的な検索エンジン最適化(SEO)のランキング評価に影響するわけではありませんが、あらゆる利用シーンで快適な情報取得体験を提供し続けることが、最終的な問い合わせの獲得や売上の増加といった目に見える成果へしっかりと結びついていきます。
page-break-inside: ;
ホームページ制作・Webデザインの1ポイント

ホームページは印刷することが可能ですが、一般的なWordファイルなどドキュメントファイルと異なり、印刷用のレイアウトではないため、こうしたpage-break-insideなどの設定項目がありました。
marks
marks: ;
ホームページ制作(ウェブサイト制作)の際に使用するCSSプロパティ「marks」についてのご説明です。
ホームページ制作・作成における、marks(マークス)は、トンボ印刷に関する指定するプロパティです。通常のホームページの描画に関する指定ではなくページの印刷を行うときの指定です。
marks トンボ印刷に関する指定

marksは、ホームページのページ印刷時にトンボを印刷するかを指定します。通常のホームページ表示に影響を与えるプロパティではなく、ホームページをプリンタで印刷する時の取扱を指定するCSSです。
CSS2.1で削除。
none
トンボを印刷しない(初期値)
crop
コーナーのトンボを印刷
cross
センターのトンボを印刷
印刷用レイアウト設計とDTP連携におけるmarksの活用
ホームページ(ウェブサイト)に掲載されたコンテンツをパンフレットや資料として印刷したり、PDFとして書き出して配布したりする際、通常の画面表示用スタイルとは異なる、印刷に特化した制御が必要になります。より専門的には、CSSの @page 規則と「marks」プロパティを組み合わせることで、商業印刷やDTP(卓上出版)の現場でも通用する高度な印刷用レイアウトを設計できます。
トンボ(クロップマーク)の自動生成と裁断制御
marksプロパティは、印刷物を制作する際にページの余白部分に表示する「トンボ(印刷マーク)」を指定するためのものです。ホームページ上の文書をそのまま紙に印刷して綺麗に切り出したい場合、手動で枠線を描くのではなく、CSS側でトンボを自動描画させることができます。
例えば、marks: crop; を指定すると、ページの四隅に仕上がりサイズを示す「クロップマーク(裁断用のトンボ)」が表示されます。これにより、印刷後に紙をカットする位置が明確になり、ズレのない正確な仕上げが可能になります。また、marks: cross; を指定すれば、ページの各辺の中央に配置される「レジストレーションマーク(見当合わせ用の十字マーク)」を描画でき、複数色のインクを重ねる際のズレを防ぐ目安として機能します。
事業用資料やオウンドメディアのPDF展開
近年では、ホームページ(ウェブサイト)内のオウンドメディア記事やホワイトペーパー(事業用資料)をユーザーが手軽に印刷、あるいはPDFとしてダウンロードできる環境を整えるケースが増えています。
印刷用スタイルシートの中で以下のように記述することで、ブラウザが印刷データを生成する際に自動的にトンボを配置してくれます。
@page {
marks: crop cross;
}
このようにcropとcrossを半角スペースで区切って一括指定すれば、裁断線と見当合わせマークの両方を同時に出力できます。画面上での美しさだけでなく、紙媒体やPDFとして手元に残るデータにまで高いクオリティと配慮を施すことは、事業の専門性と信頼性を訪問者に伝える強力なアプローチになります。
marks: ;
ホームページ制作・Webデザインの1ポイント

marksなど、ホームページのページ印刷に関するCSSのプロパティもたくさんありますが、そのほとんどは、CSS2.1で削除されました。ホームページは元々Web上の文書扱いであり、印刷されることも多いと想定されていた頃のCSSであると考えることができます。現在であれば、ホームページ制作時に、印刷されるようなページは別途PDFで作成され、ページからリンクを張られて設置されることがほとんどです。
印刷レイアウトの現代的な制御手法と代替プロパティ
ここまで、従来のホームページ(ウェブサイト)制作で用いられてきた「page-break」関連のプロパティや「marks」について解説しました。過去に構築されたシステムの保守を行ったり、古い文献を参照したりする場合には、これらの知識が役立ちます。しかし、これから新しく事業用のホームページを構築したり、最新のWebアプリケーションを開発したりする際には、最新のWeb標準に準拠した手法を採用することが重要です。ここでは、現代のCSSにおける印刷レイアウトの制御手法について、代替となるプロパティや具体的な実装アプローチを詳しく解説します。
page-break系からbreak系プロパティへの進化
かつて印刷時の改ページ制御として利用されていた「page-break-after」「page-break-before」「page-break-inside」は、現在のCSS仕様において、それぞれ「break-after」「break-before」「break-inside」という新しいプロパティに統合されました。
この変更には大きな理由があります。従来の「page-break」は印刷時などの「ページ」に対してのみ適用されるものでしたが、新しい「break」プロパティは、画面上の段組レイアウト(マルチカラム)や、Flexbox、CSS Gridといった現代的なレイアウト手法における「段(カラム)」や「領域」の区切りにも対応できるようになったからです。ページという概念を超えて、より広範なレイアウトの分断を制御できるように進化しています。
例えば、長い表や画像が途中で不自然に分断されるのを防ぎたい場合は「break-inside: avoid;」と記述します。これにより、印刷時にページをまたいでしまうのを防ぐだけでなく、画面上で段組み表示している際にも、要素が途中で途切れるのを防ぐことができます。現代のブラウザはこれらの新しいプロパティをサポートしているため、基本的には「break-」から始まるプロパティを使用していくことが推奨されます。
@pageルールを用いた高度なページ制御
特定のページレイアウトを適用する「page」プロパティの概念は、現在では「@page」ルールとしてさらに強力に進化しています。現代のホームページ(ウェブサイト)制作において、印刷時の用紙サイズや余白を指定する場合は、この@pageルールを利用するのが一般的です。
例えば、印刷専用のメディアクエリの中で、@pageルールを用いて「size: A4 portrait;(A4サイズの縦向き)」や「size: landscape;(横向き)」と指定すれば、ユーザーが印刷ダイアログを開いた際に、適切な用紙設定が自動的に適用されるようブラウザに指示を出すことができます。
また、見開き印刷を想定して、左ページと右ページで異なる余白を設定したり、最初のページだけヘッダーの余白を大きく取るなど、別のレイアウトを適用したりすることも可能です。事業の資料やマニュアルをWeb上で提供し、ユーザーにそのまま印刷してもらうようなサービスでは、この@pageルールの適切な設定がユーザー体験の向上に直結します。
廃止されたmarksプロパティと現代のDTP・PDF連携
印刷用のトンボ(裁ち落とし)を指定する「marks」プロパティについては、現在一般的なWebブラウザではほとんどサポートされていません。ブラウザの印刷機能はあくまで「ユーザーが手元の家庭用・オフィス用プリンターで出力する」ことを前提として最適化が進んでおり、商業印刷で求められるようなトンボ出力や、厳密なカラーマネジメント(CMYK対応など)を行う役割からは離れていきました。
もし現代の事業において、Webシステムから商業印刷に耐えうるデータを生成する必要がある場合は、CSSだけで無理に解決しようとするべきではありません。より専門的には、バックエンド側のプログラムでPDFを動的に生成するライブラリを活用するか、HTMLとCSSから高品質な組版用PDFを出力するための専用ソフトウェアを利用する手法が主流となっています。これにより、marksプロパティが意図していた高度なDTP要件を安全かつ確実に満たすことができます。
印刷最適化がもたらす事業上の価値
スマートフォンでの閲覧が主流となり、デジタル化が進む現代において、印刷用のCSS指定は軽視されがちです。しかし、BtoBの事業向けサービスや、公共機関のホームページ(ウェブサイト)、あるいはECサイトの領収書発行画面など、紙に出力されることが前提となるページは依然として多く存在します。
画面上の見栄えだけでなく、印刷ボタンを押した先の紙面レイアウトまで美しく設計されているホームページは、ユーザーに対して高い信頼感を与え、カスタマーサポートへの問い合わせを減らす効果も期待できます。古い仕様と新しい仕様の違いを正確に理解し、最新のCSSを用いて印刷環境まで最適化することは、細部まで配慮の行き届いた質の高いWeb制作を行うための確かな基盤となります。
ホームページ(ウェブサイト)制作・作成に役立つCSS3のプロパティ一覧は
⇒css3 property reference index ホームページ制作の装飾プロパティ
ホームページのCSS・スタイルシート編集方法
ホームページ制作やホームページ修正を行う際のCSS・スタイルシート編集方法について。ホームページは基本的にHTMLで構成されています。一方、その外観・デザインを設定するのはCSS(Cascading Style Sheets)・スタイルシートです。ページの基本構成はHTMLで、レイアウトやカラーの設定といった外観面はCSSで設定されています。
ホームページ制作(ウェブサイト制作)なら
Web制作会社ファンフェアファンファーレへ
「Web集客できるホームページ制作・作成(ウェブサイト制作)
『お客さまのお客さま目線』でのWeb制作、Webマーケティング」
ホームページ制作 京都のWeb制作会社(ホームページ制作会社)ファンフェアファンファーレは、Webマーケティングツールとして、Webマーケティング・SEMを意識したWeb集客・プロモーション力のあるSEO特性・ウェブPR力の高いSEO対策付きのホームページ制作(ウェブサイト制作)・作成、WordPress(ワードプレス)などのCMS導入やカスタマイズ、高速表示化、レスポンシブデザイン、モバイルフレンドリーを得意としています。
ホームページ制作サービスにあたり、WordPress(ワードプレス)を利用したホームページ制作(ウェブサイト制作)をはじめ、HTML5,CSS3,jQueryによるホームページ制作を行っております。Web集客のためのWebマーケティング効果の高いホームページ制作をはじめ、ホームページのリニューアル・更新・修正・管理、ホームページのSEO(SEO対策)、ホームページ運営やWebマーケティングにかかるWebコンサルティングなど、様々なサービスを提供しています。
Web集客・Webマーケティングに効果的なコンテンツマーケティング・コンテンツSEO・ウェブPRを加速させるWordPressなどCMSを活用したオウンドメディア構築、既にお持ちのホームページ(ウェブサイト)のWordPress化やWordPressのカスタマイズもお任せください!
ホームページ制作価格表(Web制作サービス)
WordPressホームページ制作(ウェブサイト制作)
WordPressをベースとしたホームページ制作やWordPressサイトのカスタマイズもおまかせください!既存ホームページを更新・編集可能なWordPressサイトへと変更する「WordPress化」のカスタマイズやコンテンツマーケティングを加速させるオウンドメディア構築も可能です!
WordPressテーマのCSSの編集によるレイアウト調整やWebデザインの修正をはじめ、メディアクエリの利用によるモバイルフレンドリー化(スマホ対応)にも対応しています。WordPressでのホームページ制作(WordPressサイト制作)はもちろん、WordPressテーマのCSS調整、プラグインの設置・設定、WordPressのエラー修正・復旧や設定変更、WordPressサイトのSEOなどWordPressに関する各種ご依頼に対応しています。
- WordPress(ワードプレス)を利用したホームページ制作(ウェブサイト制作)
- WordPress(ワードプレス)のカスタマイズ
- ホームページ(ウェブサイト)のWordPress化
- WordPressなどCMSを活用したオウンドメディア構築
HTML5+CSS3でのホームページ制作(ウェブサイト制作)
HTML5+CSS3での静的HTMLホームページ制作(ウェブサイト制作)やHTML5+CSS3でのWordPress(ワードプレス)テーマの制作なら、京都のWeb制作会社(ホームページ制作会社)ファンフェアファンファーレにお任せください! HTML5+CSS3で作成する企業ホームページ制作や店舗ホームページ制作をはじめ、既に運営されているホームページのCSS修正や編集・調整、メディアクエリの利用によるホームページカスタマイズ・ホームページのモバイルフレンドリー化にも対応しております。レイアウト調整やカラーの調整など、各種ホームページのWebデザインの調整もお任せください!CSSの利用による既存ホームページのスマホ対応、モバイルフレンドリー、スマートフォン用メニュー作成に対応しています。
ホームページ制作実績
新規ホームページ制作・カスタマイズ実績のある業種・エリアや、ホームページ制作事例・サイトカスタマイズ事例などホームページ制作実績のご紹介。企業の公式ホームページをはじめ、各種ホームページ制作(ホームページ作成)に対応しています。
ホームページ制作実績
ホームページの更新・修正
ホームページのページ更新やページ追加、ホームページ内部の様々な修正など、各種ホームページの更新・ホームページの修正の代行に対応しております。エラー修正やページ内容の変更など、ホームページの更新や修正にかかる単発のご依頼で対応させていただいておりますので、CSSの調整をはじめ、軽微な修正でもお気軽にご相談ください。
ホームページの更新・修正料金 価格表
ホームページ制作 京都
京都はもちろん、ホームページ制作、ホームページのリニューアルやカスタマイズ・SEO・WebマーケティングにかかるWebコンサルティングなどのWeb制作サービスにつき全国対応しております。HTML5+CSS3でのホームページ制作やWordPressサイト制作はもちろん、CSS調整やコンテンツ修正をはじめとしたホームページの修正や更新作業にも対応可能です。







