paranitips

Never stop learning! がモットーのゆるふわエンジニアブログ

印刷するときだけ要素を非表示にする

印刷ページを別途用意するのもいいけど、ちょっとそれはめんどくさい。。

ってときに、css3のメディアクエリを使うと便利でした。

@media print{
    .no_print{
        display: none;
    }
}
<p>このパラグラフは印刷時には表示されるよ</p>
<p class="no_print">このパラグラフは印刷時には表示されないよ</p>

ちなみに、メディアクエリに使えるタイプはprintscreenで、max-widthとかいろいろ使ってレスポンシブにできるようです〜。なるほどなるほど。

@media screen and (min-width: 600px) and (max-width: 900px) {
    .hoge {
        background: #9CF;
    }
}

参考