印刷用CSSの設定方法

[ ID : 947 ]
印刷用CSSの設定方法

概要

Webページの印刷時に個別のスタイルを指定する方法とその確認方法を紹介。

デベロッパーツール(Google Chrome)での検証方法

  1. デベロッパーツールを開く(⌥ ⌘ I)。
  2. JavaScript コンソールを表示する(esc)。
  3. Renderingのタブを選択(選択肢にない場合は左端のメニューから追加する)。
  4. 下部の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 */
}

この記事をシェアする

全ての記事を見る

KONOCODEのメリット 無料会員登録