2017年6月7日 Bootstrap

Bootstrapを印刷に最適化する方法

Bootstrapを使ったサイトで「コンテンツ部分のみ印刷したい」という要望があったので、調整方法をまとめました。

1.Bootstrapの印刷用スタイルを無効にする

Bootstrapには、あらかじめ印刷用のスタイルが設定されていて、それが影響して意図しない印刷結果になってしまいます…。 なので、bootstrap.css内に@media print {}で設定されている印刷用のスタイルをコメントアウトします。

2.独自の印刷用スタイルを適用する

印刷用スタイルを表示させる

印刷用スタイルは通常の画面には表示されません。
Chrome Developer Toolsを使って印刷用スタイルを画面に表示して調整を行います。

  • ページを右クリックして[要素を検証](または[F12]キー)で、Developer Toolsを表示する(左上のモバイル表示アイコンをオフにしておくこと)。
  • 画面下のタブの左にある[⋮]をクリックして[Rendering]を選び、Renderingタブを表示する。
  • [Rendering]タブに切り替え、下のほうにある[Emulate media]にチェックを入れ、ドロップダウンリストで「print」を選ぶ。

不要な装飾・パーツを非表示にする

「コンテンツ部分のみ印刷したい」という要望があったので、ヘッダー、フッター、サイドカラムを非表示。
また、ベースに背景が設定してある場合は、印刷時にインクをたくさん消費してしまうので背景も非表示。

レイアウトの調整

サイドカラムを非表示にした事によってサイドが空いてしまうので、メインカラムの幅が100%になるよう調整。

以上の作業で、意図した印刷ができるようになりました。

Pocket

052-533-6950

お電話からのお問い合わせ

CONTACT

メールフォームからのお問い合わせ