13. HTML - CSS - @media メディアクエリ

 
13.1 メディアクエリ
13.2 メディアタイプ
13.3 主な特性
13.4 画像サイズを調整する例
13.5 印刷設定の例

13.1 メディアクエリ

 すでにあちこちに書き散らしてしまっていますが、改めて。  いくつかの構文があるようですが、わたしが多用している構文は、下記のようになります。

@media メディアタイプ and (特性: 値)
{
	スタイル
}

13.2 メディアタイプ

メディアタイプ 意味
all すべでのデバイス
print 印刷、印刷ドキュメント
screen コンピュータ、スマートフォン、タブレット等
speech スピーチシンセサイザ(なんだそれ?)

13.3 主な特性

特性 意味 単位・表現
width em, px, %
height 高さ em, px, %
aspect-ratio アスペクト比 水平方向/垂直方向(数値で記述)
orientation 向き landscape(横向き)、portrait(縦向き)

 width、height、aspect-ratio は、接頭辞に min-、max- をつけて最大・最小を表現することができます。

13.4 画像サイズを調整する例

 わたしが使っているのは、例えばスマートフォンで横幅が 375px だったりするので

img
{
	max-width: 802px;
	max-height: auto;

	@media all and (max-device-width: 375px)
	{
		max-width: 375px;
	}
}
 てな感じで、画像がはみ出たり、画像に合わせて全体が縮小されるのを防いでいます。  css だと難しいんでしょうが、この max-device-width というのを変数に入れて

img
{
	max-width: 802px;
	max-height: auto;

	@media all and (max-device-width: 802px)	←	この 'max-device-width' を変数化して
	{
		max-width: 変数-1;	←	みたいなことができればありがたいのですが・・・
	}
}

13.5 印刷設定の例

 例えば、本サイトは資本主義に負けて、広告がばんばん入っていますが・・・。  ページを印刷する際に広告は印刷したくないのです。  こういう場合、それらに適切な id や class をつけて

@media print
{
	・・・					←	//	# が id	. が class
	{
		display: none;
	}
}
 てな書き方をしておけば、印刷する際にはそれらは印刷対象となりません。  あるいは、シンタックスハイライトさせているものをモノクロ印刷するときに薄い色が見にくい場合・・・

.	←	トークンの定義
{
	color: yellow;

	@media print and (monochrome)
	{
		color: black;
	}
}
 てな書き方をしておけば、モノクロのプリンタに出力するときは黒で印刷されます。