ＰＣからスマホまで対応するレスポンシブなサイトの制作をする際、色々な方法があります。
大きく分けて
全て自前で書いていくケース
WordpressなどのＣＭＳを導入し、デザインをテーマによって規定するケース
がありますが、その中間的な方法があります。
デザインを色々規定している「フレームワーク」というものを利用するケースです。
そのフレームワークの一つに「Bootstrap」というものがあります。
今回はそのBootstrapを利用した時のお話です。
クライアント様から依頼されたサイト制作が最終段階に入って色々チェックをする事になりました。
そこでクライアント様は各ページを印刷して、赤入れをしようとされたのです。
ところが、ブラウザで表示されているサイトを印刷しようと印刷プレビューを出してみると…
通常表示されているものとえらく違ったものがプレビューに出てきました。
「これでは修正指示が出せない」
という事で、印刷プレビューを修正する事になりました。
この印刷プレビュー、画面と印刷の解像度の解釈が異なるためか、広い領域があるのにスマホ用メニューが出ていたりします。
それだけならまぁ「困った表示だな」で済むのですが、どうも挙動がおかしい。
リンクの横にurlが書いてあってメニュー表示のレイアウトが崩れたり、背景を印刷する設定になっているにもかかわらず、背景が真っ白。
もちろん、ブラウザが動作不良を起こしているのではありません。
（↑はあるサイトで印刷プレビューを出した例です）
実はBootstrapの仕業。
印刷時のスタイルが指定してあり、その中で背景を「!important」を付けて透明に置き換えているのです。
スタイルシートは後から書かれたものが有効になりますが、さすがに「消されたもの」を復活せることはできません。
かといって背景指定に全て「!important」を付けてBootstrapのスタイルに「勝つ」ようにするのはあまり現実的ではありません。
そのため、Bootstrapのスタイルシートの中にある「@media print」の部分を全てカットして対応しました。
ちなみにリンクの横にurlが出ているのも同じくBootstrapが追加していたのが原因なので、こちらもそれで解消です。
なお、リンクの横のurだけでしたら
@media print {
a[href]::after {
display:none;
}
}
とBootstrapのスタイルシートより後に読み込む自前のcssに入れておけば消せます。
（a[href]::after を印刷時に別の目的で使っていると、そっちまで巻き添えになるのでご注意）
世の中便利な物は色々ありますが、思わぬ副作用があるケースもあるというお話でした。
