ここは常に表示されます。
ここは印刷時に非表示になります。
``` クラス `.no-print` はメディアクエリ `print` の中で指定されています。このスタイルはプリント時のみに適用されます。赤文字で表示されている箇所にはクラス `.no-print` を指定しているので印刷のプレビュー時だけこの文字は表示されなくなります。 実際に表示を確認してみましょう。Google Chrome において印刷プレビューを表示するには［ファイル］>[印刷]をクリックするか、次のキーボード ショートカットを使用します。 - Windows と Linux の場合： `Ctrl+P` - Mac の場合： `⌘+P` [Chrome から印刷する](https://support.google.com/chrome/answer/1069693?hl=ja&co=GENIE.Platform%3DDesktop)  確かに、印刷プレビュー画面では赤文字は表示されていません。 ### その他の指定方法 大抵の場合には `@mdia print` で指定するのでこと足りると思いますがその他の指定方法でも印刷時にのみに適応するスタイルを指定できます。 #### link/style media="print" `` で CSS ファイルを読み込みときや ` ``` #### @import print `@import` を使用して CSS ファイルを読み込む際に `print` を付与すると読み込んだ CSS ファイルは印刷時にのみ適用するようになります。 - `index.html` ```htmlここに本文が入ります。
ここに本文が入ります。
ここに本文が入ります。
ここに本文が入ります。
``` 通常の表示時には見た目に変化はありません。  印刷プレビューで表示すると改ページされていることがわかります。   ## JavaScript から印刷プレビューを呼びだす ブラウザの既定の方法から印刷をするのは慣れていない人にとっては少々分かりにくい操作です。「このページを印刷する」といったボタンを設置してボタンをクリックしたときに印刷ができるようにしたいところです。 そのような場合には [window.print()](https://developer.mozilla.org/ja/docs/Web/API/Window/print) メソッドを使用します。このメソッドを呼び出すと印刷ダイアログを表示します。 ```htmlここは常に表示されます。
``` ## プリント画面のデバッグ 開発時に印刷ダイアログを毎回開いて表示を確認するのは非常に面倒です。ブラウザの開発者ツールを使用すれば印刷画面をエミュレートして表示できます。 まずは開発者ツールを開いて「⋮」>「More tools」>「Rendering」を選択します。  「Emulate CSS media type」を探して「print」を選択します。  すると印刷プレビューで表示したときと同じく `.no-print` クラスを付与した要素が 非表示となります。 