プリントアウトでもう悩まない!Bootstrapの印刷で困ったときの対処法

ウェブ制作技術

こんにちは、樋口です。
新潟は秋の足音が近づいてきています。焼き芋と秋刀魚の季節ですね。
あと私のアレルゲンで言えば、ブタクサとイネの季節です。充分に気をつけたいものです。

今日は、Web制作のTipsをお届けします。
最近、Bootstrapをベースにサイト制作することが多いのですが、ページを印刷した時に崩れます。
大きく要因は2つあるので、対処法を紹介します。

Bootstrapのページを印刷すると、リンクURLが表示される

デフォルトの状態でBootstrapのページを印刷すると、見出しの通りの現象が起きます。
Bootstrapのcssが悪さをしていました。
下記の箇所です。

上書きやコメントアウトすることで、リンク先URLが表示されなくなります。

スマートフォン用のレイアウト表示になる

なかなか対応が難しいのがこちら。
印刷するとスマートフォンレイアウトに3カラムレイアウトが1カラムになったりするので、怪訝に思うお客様もいます。

解決コードが記載されているページがありました。
https://gist.github.com/donnierayjones/6fd9802d992b2d8d6cfd
(ありがとうございます)

@media printであらためて細かく調整してやる必要があるようです。

以上、Bootstrapでの印刷対応について紹介しました。
印刷対応が必須の案件に関しては、Bootstrapを使わない、という選択肢も視野に入れてみるのもいいかもしれません。

それではまた!

あなたのビジネスのWeb戦略を、ぜひキタックにおまかせください。

効果を出すためのサイト運営、集客できるウェブ広告

ブログの更新情報をお知らせしています。