Bootstrap4で印刷時の表示(CSSの@media print)を調整してカラム分割を維持する

ウエブルのますこです。
Bootstrapをつかってウェブサイトを作ると、
印刷時の表示が縦になが~~~くなって、紙が無駄になりますよね。

Bootstrap3では、すぐコピペできるような対策用のCSSを公開している人がいたのだけど
Bootstrap4では見つけられず、やむを得ず自分でゴリゴリ対応することにしました。

Bootstrapを使ったサイトの印刷表示では、
カラム分割が解除されてぜんぶ1カラムになることが問題です。
そこで、@media printのなかに、グリッドシステムのカラム分割するための表記を
bootstrap-grid.cssからコピって突っ込んでやれば、応急処置ができるのじゃないか!
と思って試してみたら、思いのほか上手くいき、印刷時の表示がPC表示に近い状態で美し~くなりました。

まあCSSの記述がちょっと長くなって読み込むコードは増えるけど・・・1000行くらいだし。
(他に良い方法があるかもしれないのだけど思いつかず、ひとまずこれでいいことにする!)
これで紙の無駄とはおさらば!!エコロジー!

↓やり方は簡単!スタイルシートに下記を追記してあげるだけです。
 print.cssとか、別ファイルにしても良いかも。

 

あとは、個別に調整が必要な所を、@media print{ }内に書き加えてあげます。
たとえば、印刷の時は要らないと思われる「パンくず」、「フッターのサイトマップ」などを非表示にする場合は下記のような感じ。

他に、背景画像の上に、白い文字を乗せていると言った要素の場合は、
背景画像を非表示にして、文字色を黒くしてあげるとかすれば、
インクも節約できてハッピーです。

よしなに調整してあげましょう!

最近の記事

  1. 2017.12.1

    理想的な会議
PAGE TOP