Bootstrapで作成したホームページに印刷用CSSを設定する方法

Bootstrapで制作したホームページに印刷用CSSを設定する必要に迫られましたので、備忘録として書き記しておきたいと思います。

また、参考にさせていただいたリンク先も記載させていただきます。

ありがとうございました！

Bootstrapで制作したホームページを印刷しようとするとあら不思議。
リンク先のURLが表示されるではありませんか。

ちょっとうっとおしいので非表示にしたいと思います。

その方法は下記のサイトが詳しいです。

【Bootstrap】印刷時に表示されるURLを消す方法
http://taneakashi.ad-mk.com/bootstrap-print-url-erase.html

Bootstrapで作ったサイトを見たまま印刷できるCSSファイルを作成してくれている方がいらっしゃいます。感謝です<(_ _)>

Bootstrapで作られたWEBサイトを見たまま印刷(プリントアウト)する方法
http://onocom.net/blog/bootstrap-print/

上記（２）のリンク先にも記載されているのですが、ずべてのサイトがそのまま印刷プレビューでうまい具合に見れるわけではなく、各自で修正を行う必要があります。

その際に、必ず知っておきたいのはGoogle Chromeの開発ツールで印刷用CSSを確認・デバッグする方法です。

この方法は、開発ツール内にある「Rendering」＞「Emulate CSS media」で「print」を選択すればいいのですが、Chromeのバージョンアップにより設定する場所が移動してしまいます。

平成30年5月30日現在、Google Chromeのバージョンは「66」ですが、古いバージョンでは設定箇所が変わりますのでその点をご注意ください。

【図解10秒】Google Chrome（グーグルクローム） ver.66で印刷用CSSを確認・デバッグする方法
https://casualweb.info/blog/2018/05/30/how-to-check-debug-print-css-in-google-chrome/