2016年2月1日シェアする:いつでも、どこでもネットにアクセスできる昨今、ウェブページを印刷する機会は減っているかもしれません。いざ印刷したらレイアウトやスタイルが崩れていて使えないものになっていたらユーザに申し訳ないですよね。紙の無駄使いになってエコじゃないですし。いうことで、今回は自分メモ的にプリントCSSの確認ツールのご紹介です。48では方法が違っているのでこちらをご覧ください。以前は印刷プレビューで印刷用CSSを確認していましたが、なにせ効率が悪いので他の方法を探してみました。DevToolsにエミュレータ機能がついてたんですね。以下の手順で、そのエミュレーション機能にアクセスできます。mediaにチェックを入れて、ドロップダウンから「print」を選択これで、インスペクタで要素を選んで、印刷用に適用されているスタイルを確認しながらレイアウトやスタイルの調整が可能になります。CSSは、いま最悪の状態でした。自分のサイトもチェックしたらすんごい事になっていた、なんてことがないように、チェックしておいたほうが良さそうですね。(64-bit)でした。10.10.3で動かしてます。print」というコマンドを入れてenterこれで、印刷用CSSのスタイルで描画されたページが表示されます。reset」と入力してenterを押せばOKです。Firefoxのバージョンは33.0でした。見えないところにもこだわる「粋」なはからいたとえば、イベント会場やお店のアクセス情報や地図を掲載しているページは、印刷して持って行くユーザも少なからずいると思います。いったページだけでも、A4で1枚に収まるレイアウトになるように工夫するなど、ちょっとした心遣いができると、日本的な「おもてなし」になるのではないでしょうか?見えないところにもこだわる「粋」なはからい。author「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。ウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。使ったときに戸惑ったことのまとめレスポンシブなデザインにするなら知っておきたい。コメントをキャンセルメールアドレスが公開されることはありません。