WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

ボタンを押したらプリントアウト/プリントアウトする時のCSSを変更

f:id:mmmmofu:20160831220031j:plain

ボタンを押したらプリントアウトの画面が立ち上がる。

その際に余計なものを消し、プリントアウトしたいものだけ表示させる。

デモはこちら

http://efu.sakura.ne.jp/web/print/

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>print</title>
  <link rel="stylesheet" href="css/style.css">
  <style>
    @media print{
      header, footer, .print_btn, .sidebar {
        display: none !important;
      }
    }
  </style>
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
  <div class="wrapper">
    <header>header</header>
    <article class="container">
      <section class="content">
        <div class="image">プリントしたい</div>
        <p class="print_btn">プリントする</p>
      </section>
      <section class="sidebar">sidebar</section>
    </article>
    <footer>footer</footer>
  </div>
  <script>
    $('.print_btn').on('click',function(){
      window.print();
    });
  </script>
</body>
</html>
@charset "utf-8";

/* reset */
html, body, header, footer, article, section, div, p {
  -webkit-print-color-adjust: exact;
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino kaku Gothic ProN",
    Meiryo,
    sans-serif;
}

.wrapper {
  width: 980px;
  margin: 0 auto;
}
.wrapper header {
  width: 980px;
  height: 100px;
  background: #000;
  margin-bottom: 50px;
  color: #FFF;
}
.wrapper .container {
  overflow: hidden;
  margin-bottom: 50px;
}
.wrapper .container .content {
  width: 750px;
  height: 400px;
  float: left;
}
.wrapper .container .content .image {
  width: 600px;
  height: 200px;
  background: #b4f4f6 !important;
  margin: 0 auto 50px;
  text-align: center;
  line-height: 200px;
}
.wrapper .container .content .print_btn {
  width: 200px;
  height: 50px;
  margin: 0 auto;
  cursor: pointer;
  background: #e02828;
  color: #FFF;
  font-weight: bold;
  text-align: center;
  line-height: 50px;
  -webkit-transition: opacity .3s linear;
  -o-transition: opacity .3s linear;
  transition: opacity .3s linear;
  border-radius: 15px;
}
.wrapper .container .content .print_btn:hover {
  opacity: 0.6;
}
.wrapper .container .sidebar {
  width: 200px;
  height: 400px;
  float: right;
  background: #CCC;
}
.wrapper footer {
  width: 980px;
  height: 50px;
  background: #000;
  color: #FFF;
}

ブラウザの印刷ダイアログを呼び出すメソッド

window.print();

印刷時のみ適用されるスタイル

@media print{
~
}


Chromeで印刷しようとしたところbackground-colorが表示されなかった。

-webkit-print-color-adjust: exact;

を入れると表示することができた。

念のためプリントしたい背景色に!importantをつける