概要
Webページの印刷時に個別のスタイルを指定する方法とその確認方法を紹介。デベロッパーツール(Google Chrome)での検証方法
- デベロッパーツールを開く(⌥ ⌘ I)。
- JavaScript コンソールを表示する(esc)。
- Renderingのタブを選択(選択肢にない場合は左端のメニューから追加する)。
- 下部のEmulate CSS media type から print を選択する。
検証ブラウザ
- Google Chrome(最新)
- Safari(最新)
- Firefox(最新)
- Microsoft Edge(最新)
- IE11
- IE10
実装方法
別ファイルで読み込む場合
<link rel="stylesheet" type="text/css" href="print.css" media="print">
cssファイル内 で出し分けする場合
@media print {
/* 印刷用のCSS */
}
ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）
