boostrapの印刷表示をリセットする

WEB制作
boostrapの印刷表示をリセットする

boostrapは、デザインをあまりしたくないときに活躍してくれますが… 使用して、何気に引っかかる罠があります。 それは、印刷時に独自のスタイルを当ててくることです。

印刷画面をいい感じに表示してくれるのであれば、全然問題ないのですが、 リンク先のURLを表示してきたり、背景をすべて白くしてきたりします。

背景の色は、まだ、見やすくやるときもあるので、許せる範囲ですが、 リンク先のURLをずらーと表示させられても、正直ウザいだけです。

WEBページを印刷する機会は、少ないので、この仕様を忘れがちになってしまいます。

今回は、この印刷時のスタイルを修正する方法を紹介します。

目次

1. 印刷時のスタイルが設定されていboostrapを使用する

boostrapは、公式サイトから、必要な部分だけをDLすることができます。

Customize and downloadにアクセスし、Less filesにある「Print media styles」のチェックを外した後、一番下にあるDLボタンから、印刷時のスタイルが設定されていないboostrapをDLすることができます。

2. CDNを利用していて、リンク先の表示だけを消したい場合

CDNを利用しているときや印刷時の表示でリンク先の表示だけ修正したいときは、以下のcssで上書き修正することができます。

@media print {
  a[href]:after {
    content: "" !important;
  }

  abbr[title]:after {
    content: "" !important;
  }
}

また、印刷時の他の箇所も@media print { }で変更することが可能です。