CSSTweetWebサイトを制作する上で印刷された時の見栄えを考慮しなければならないことがたまにあります。考慮しないでコーディングをしてしまうと印刷時にコンテンツが複数ページにわたってしまい変なところで別ページに分割されることがあります。それをこんな感じに綺麗に改ページを行うためのHTMLの構成とCSSの組み方を考えてみます。※Chromeを使って確認したコードなのでChromeで確認して下さい。HTML構成まず、HTMLの構成から考えてみます。1つのページは<section>タグを使用します。複数のページを<article>タグでまとめます。HTMLとしては下記のような構成になります。</section></article>改ページここにCSSを当てていき印刷すると綺麗にページが分かれるように組んでいきます。<section>タグに.print_page、<article>タグに.print_pagesというクラスを付けていきます。ついでにprint.cssというスタイルシートを読み込みます。</section></article>print.cssに.print_pageクラスの中身を定義していきます。今回はA4縦でピッタリ印刷できるよう組んでいきます。*/}この状態で印刷プレビューを行うと<section>内の文字列がページごとに分かれるようになっているはずです。改ページ修正このままでは空白の4ページ目ができてしまいますので最後のページは改ページさせないようにします。*/}最後の<section>タグにpage-break-afterをautoにすることで最後のページの改行を防ぐことができます。逆にpage-break-beforeを使って、最初の<section>タグにpage-break-afterをautoとしても同じことができます。簡単に出来てしまいましたがこのままではつまらないので固定ヘッダーを入れてみます。relative;を入れた後にbefore擬似要素でヘッダーを入れます。relative;を入れないと1ページ目の右上にヘッダーが集まってしまうので気をつけてください。Demoという文字が表示されます。最後に各ページのフッターにCSSだけを使ってページ番号を入れてみたいと思います。*/}使用するCSSプロパティはcounter-incrementとcounterです。このプロパティを使用するとCSS内でカウント用の変数を扱うことができ擬似要素内で表示させることができます。変数名は何でもいいのですが分かりやすい名前としてprint_page_countという変数名にしました。この状態で印刷プレビューをすると3ページに分かれ、なおかつ固定のヘッダーとフッターが各ページに表示されるはずです。用途がないノウハウではありますがいざとなった時のために覚えておいて損は無いと思います。byスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。