CSS - 画像関連 - media メディアクエリ
- 1. 概要
- 2. メディアタイプ
- 3. 主な特性
- 4. 画像サイズを調整する例
- 5. 印刷設定の例
1. 概要
すでにあちこちに書き散らしてしまっていますが、改めて。
いくつかの構文があるようですが、わたしが多用している構文は、下記のようになります。
@media メディアタイプ and (特性: 値)
{
スタイル
}
2. メディアタイプ
| メディアタイプ | 意味 |
|---|
| all | すべでのデバイス |
| print | 印刷、印刷ドキュメント |
| screen | コンピュータ、スマートフォン、タブレット等 |
| speech | スピーチシンセサイザ（なんだそれ？） |
3. 主な特性
| 特性 | 意味 | 単位・表現 |
|---|
| width | 幅 | em, px, % |
| height | 高さ | em, px, % |
| aspect-ratio | アスペクト比 | 水平方向/垂直方向（数値で記述） |
| orientation | 向き | landscape（横向き）、portrait（縦向き） |
width、height、aspect-ratio は、接頭辞に min-、max- をつけて最大・最小を表現することができます。
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; ← みたいなことができればありがたいのですが・・・
}
}
5. 印刷設定の例
例えば、本サイトは資本主義に負けて、広告がばんばん入っていますが・・・。
ページを印刷する際に広告は印刷したくないのです。
こういう場合、それらに適切な id や class をつけて
@media print
{
・・・ ← // # が id . が class
{
display: none;
}
}
てな書き方をしておけば、印刷する際にはそれらは印刷対象となりません。
あるいは、シンタックスハイライトさせているものをモノクロ印刷するときに薄い色が見にくい場合・・・
. ← トークンの定義
{
color: yellow;
@media print and (monochrome)
{
color: black;
}
}
てな書き方をしておけば、モノクロのプリンタに出力するときは黒で印刷されます。
|
|
