ジャズボーカル 松田オリビア圭子

ジャズボーカル 松田オリビア圭子のブログです。主にスケジュールのご案内を掲載します。

Webアプリのページ印刷レイアウトにもCSSを対応させるの巻

じつは先日までは、ブラウザで、api-match.comのメイン画面を印刷(および印刷プレビュー)すると、かなり激しめにレイアウトが崩れてました。これまでは画面の印刷はいつも、Alt+PrintScreenで画面キャプチャして、画像として扱ってきて事なきを得ていたのですが。

今回のリリースにあたり、この件も早急になんとかできるか?ということで、ざざっと調べて実験して対処した方法は、こんなでした。

  • これまでの状況:CSSファイルへのリンクを特に記述していなかった(Railsの規定フォルダに置くことで自動的に読み込まれていた)
  • 修正した状況:CSSファイルへのリンクを、共通rhtmlヘッダファイルに追記した。

追記したのはこんな行です。

media="all"がミソです。これがないとスクリーン表示時にだけ反映され、印刷時には無視されるため。
わりと初心者向け情報かとも思うのですが役立った情報なので、日記にメモしておきます。