要素を非表示化するスタイル

HTML にはスクリプトが有効である場合は表示されない noscript 要素というのがあるけど、同様に「スタイルシートが有効の場合」や「印刷した場合」など、状況に応じて要素を非表示化するスタイルを書いてモジュール化しておくと便利。

/* スタイルシートが有効の場合は非表示 */
.nostyle { display: none; }

/* スクリーンメディアでは非表示 */
@media screen {
.noscreen { diaply: none; }
}

/* 印刷では非表示 */
@media print {
.noprint { diaply: none; }
}

<p class="nostyle">このパラグラフはスタイルシートが有効である場合には表示されません。</p>
<p class="noscreen">このパラグラフはスクリーンメディアでは表示されません。</p>
<p class="noprint">このパラグラフは印刷時には表示されません。</p>