Chrome 48で印刷用CSSのスタイルを確認する方法

Advertisement

以前書いた記事でChrome DevToolsでの印刷用CSSのスタイルの確認方法を紹介したのですが、Chrome 48で方法がだいぶ違っていたのでアップデート版を掲載しておきます。

Chrome 48

以前の記事の時はChrome 43でOSはYosemiteでした。今回は、Chrome 48でEl Capitanになります。

chrome-devtools-rendering-settings
  1. Chrome DevToolsを開く(⌘ + ⌥ + I)
  2. DevToolsの右側のメニューをクリックします
  3. 「More tools」から「Rendering settings」を選択します
  4. 「Emulate print media」にチェックを入れます

DevToolsを開いたらescキーでConsoleを開いて、左端のメニューから「Rendering settings」を選ぶという方法もあります。

Firefox 43

当時のバージョンは33でしたが、43になった今でもやり方は変わりません。以前の記事をご参照ください。

以上です!

About the author

Rriverの竜(りょう)です。「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、東海岸のボストン近郊でウェブ制作を開始。帰国後、東京のウェブ制作会社に勤務。現在は組織のウェブ担当者として日英バイリンガルウェブサイトの運営に携わっています。より詳しくはこちら

記事へのコメントはもちろん、執筆・翻訳、レスポンシブなウェブサイト制作、コラボのご相談などもTwitter @rriver またはFacebook でお気軽にご連絡ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です