CSS）印刷時に特定のクラスの背景色を適用しないようにする。HTMLカレンダーの当日色を消す。

備忘録として。

印刷時に特定のクラスの背景色を適用しないようにする方法。

≪ うまくいかない方法 ≫

※ この方法では、元の要素に別の色が定義されていても、透明になってしまう。例えば、カレンダーの土日の背景で色指定をしていて、当日には別の色を指定している場合、この方法では、印刷で土日の背景が透明になってしまう。

/* 画面表示用スタイル */
.some-class {
	background-color: #ffcb93;
}

/* 印刷用スタイル */
@media print {
	.some-class {
		background-color: transparent !important; /* 背景を透明に */
	}
}

≪ 正解の方法 ≫

※ 要素の背景色を「@media screen」で、定義する。これなら、印刷時には適用されない。

/* 画面表示用スタイル */
@media screen {
	.some-class {
		background-color: #ffcb93;
	}
}

≪ 利用例 ≫

以下のカレンダーで、当日を背景オレンジ色にしているが、印刷では通常の白色で表示する。

https://ok2nd.sakura.ne.jp/index/sch/calendar/

td.sunday {
	background: #fff0f0;
	color: #f00;
}
td.weekday {
	background: #fff;
}
td.saturday {
	background: #edf3ff;
	color: #045acc;
}
td.holiday {
	background: #ffc4c4;
	color: #f00;
}
@media screen {
	td.today {
		background: #ffcb93;
	}
}