メディアクエリの「aspect-ratio」を使う機会に遭遇しました。
動画をスクロールなしの1画面に収めたい場面です。
そこではメディアクエリで aspect-ratio が使われていました。
使い方はなんとなく意味は分かりそうですがなんとなくでしか分からない。
そもそもの「メディアクエリ」という言葉から「aspect ratio」という意味、書き方まで調べてまとめてみました。
☆CSSプロパティの aspect-ratio については（その2）にまとめました。
aspect ratioとは
日本語だと「縦横比（アスペクト比）」です。
アスペクト比は、矩形における長辺と短辺の比率。
とありました。
このアスペクト比、長辺：短辺で書かれるのであれば、
縦x横のサイズが横長の400x300pxでも、縦長の300x400pxの場合、アスペクト比は4:3となります。
縦長にしてよく使うスマホ画面のアスペクト比の表記が気になっていましたが、調べてみると「16:9」だったり「9:16」だったり記事によってバラバラでした。
また、アスペクト比の中で小数がでてきたりします（黄金比1: 1.618…など）。
「6:5」は5で割って「1.2:1」と小さくしたほうがいいのか？さらには小数が先に来るのは分かりにくいから「1:1.2」？
もしかしたら中学校で習ったのかもしれないですね。
...気になりましたがいきなり脱線です。大事なのはcssでのアスペクト比なのでここまでにします。
メディアクエリの「aspect-ratio」
まずはメディアクエリについてです。
メディアクエリとは
こちらが一番確かな情報だと思います（2022年3月現在）。
※日本語訳ページは非公式だそうです。
Media Queries。直訳すると「媒体の問いかけ」です。
メディアクエリー - CSS: カスケーディングスタイルシート | MDN
メディアクエリーによって、サイトやアプリを様々な引数や端末の特性に基づいて合わせることができます。
CSS では、 @media アットルールを使用して、メディアクエリーの結果に基づいて条件付きでスタイルの一部を適用することができます。 @import を使用すると、条件付きでスタイルシート全体を適用することもできます。
この端末が「メディア」、引数や特性が「クエリ」を指しているように見えました。
また、アットルールというのは他にも @import、@charset などいろいろあります。
cssのもろもろの設定・指定・定義に使われます。
＊＊＊
メディアクエリについて、詳しく書かれている記事がありました。
メディアクエリについて記述方法などまとめ - キーワードファインダー
こちらと「Media Queries Level 5」の日本語訳ページをもとに、覚えておきたい部分をまとめます。
メディアクエリの書き方
方法は2つです。
- htmlファイルの中でlink要素のmedia属性値として書く
- cssファイルの中で
@mediaの後ろに書く
スマホ / PCで読み込むcssファイルを分ける場合は前者を使ったりします。
次にcssファイルの中に書く方法のメディアクエリを見てみます。
メディアタイプ
メディア（媒体、端末）の種類です。
- all：全てのメディア
- print：プリンター、印刷プレビューのWebブラウザ
- screen：モニター、ディスプレイ（print以外のメディア）
Media Queries Level 5ではこの3つ以外は非推奨でした。次第にこのメディアタイプはなくなる流れのようです。
また、メディアタイプが省略されている場合は all が使われているようです。
Note: 多くの場合、 all メディア種別が他のタイプが指定されない場合に既定で使用されます。
※後述する not only 理論演算子を使う場合は、メディアタイプの省略ができません。
論理演算子
複数の条件をつなげたメディアクエリを作るときに使います。
- and：「かつ」
- or：「または」
- not：「以外」。メディアクエリ全体のみを反転
- only：「古いブラウザで適用しない」→「古くないブラウザで適用する」
また、カンマ区切り「,」のメディアクエリのリストにすると、「または」という意味になります。
例えば、以下のルールはユーザーの端末の高さが 680px 以上または画面が縦長モードであるときにスタイルが適用されます。
@media (min-height: 680px), screen and (orientation: portrait) { ... }
☆スタイルをディスプレイ画面に限定する場合は screen and と付けます。よく使われる書き方っぽいです。
日本語でメディアクエリを考える
書き方の例を見て分かるような分からないような感じになりましたが、日本語にするとしっくりきました。
and や or などの理論演算子をつなげてできるのは1つのメディアクエリです。
「@media (min-width: 30em) and (orientation: landscape)」は、
「@media メディアクエリ」と考えられます。
とすると、
メディアクエリのリストは「@media メディアクエリ1, メディアクエリ2...」と書けます。
意味は「メディアクエリ1またはメディアクエリ2」です。
not
そこで notについて考えてみます。
まずは , でつながれたリストと not の関係です。
「@media not メディアクエリ1, メディアクエリ2」とあれば、
意味は「メディアクエリ1以外、またはメディアクエリ2」となります。
メディアクエリ1の中で not が使われていたら、メディアクエリ1内のそれぞれの条件を反転します。
なるほどと思っていたら単純な作りではないようです。
次はand と not を両方使う場合の解釈をみてみます。
CSSのメディアクエリを使ってレスポンシブに対応させる書き方｜たかもそ／Web Creator.｜note
実はメディア特性がある場合、not 演算子はメディア特性の方を否定し、メディアタイプは無視します。
@media not screen and (prefers-color-scheme: dark) { ... }
これは「デバイスがダークモードでない」となります。
「メディアタイプがスクリーン以外で、かつ...」とはならないそうです。
下記のように書き換える事ができるそうです。
@media screen and (not (prefers-color-scheme: dark)) { ... }
not は「メディアクエリ内のそれぞれの条件を反転します」が、
メディアタイプ screen の否定は無視されます。
ややこしい...。
only
only についても調べました。
CSSでメディアクエリ(Media Queries)の基本的な書き方、記述の意味を理解し、「何となく使う」を卒業する。 | WEMO
「only screen and (max-width: 600px)」は旧来のUAでは「only」の部分しか読み込まれません。 つまり、「メディアタイプが only のデバイス」として解釈します。 しかし、「only」に該当するメディアタイプは存在しないので、旧来のUAにおいては全てのデバイスでそのメディアクエリが無視される...というわけです。 ただ、onlyキーワードが必要になることはほぼ無いでしょう。
古いブラウザ（ユーザーエージェント）は、頭の only を読み込んで適切なクエリではないと判断して、only以下を無視していたのですね。
only は気にしなくてよさそうです。
メディア特性
メディア特性は () で囲って使います。
メディア特性の値は : の後ろに書きます。
調べると結構な数でした。
先ほどのnotの部分の引用記事からまとめました。
17あって心が折れたので一部抜粋です。
| メディア特性 | 値 |
|---|---|
| [min-/max-]width | ビューポート（画面）の横幅 |
| [min-/max-]height | ビューポートの高さ |
| orientation | デバイスの向き。portrait （縦長）/ landscape（横長） |
| [min-/max-]resolution | デバイスのピクセルの解像度。単位は dpi, dpcm, dppx, x |
| -webkit-[min-/max-]device-pixel-ratio | Safari、iOS Safari の、デバイスのピクセル解像度。単位はdppx（省略して書く） |
| prefers-color-scheme | light（ライトモード）/ dark（ダークモード） |
| prefers-reduced-motion | アニメーションの動き。no-preference（設定無し）/ reduce（最小限にする） |
| hover | ホバー機能が使えるデバイスかどうか。hover（つかえる）/ none（使えない） |
| [min-/max-]aspect-ratio | ビューポートの幅と高さのアスペクト比。 <幅>/<高さ> のように指定する |
| [min-/max-]color | 色成分のビット数。値なしはデバイスが白黒でないとき |
aspect-ratio も出てきました。
アスペクト比「16:9」の、aspect-ratio の書き方
画面が横長、縦長の「16:9」があります。
メディアクエリでメディア特性を指定するとき、大抵が max- か min- を付けて書くことになると思いますが、どちらを書けばいいのか混乱しました。
それぞれのときの「さらに横長」「さらに縦長」を考えればわかりやすいのではないかと思いました。
aspect-ratio: 幅 / 高さ という書き方であることを覚えます。
メディアクエリの「aspect-ratio」は落ち着いて考えれば大丈夫そうです。
さいごに
1画面の表示は難しいです。
縦長・横長、各デバイスのディスプレイの大きさ全てに対応できるようにするには、
しっかり知識を持つことが前提になると思いました。
あとずっと「aspect-raito」だと思っていました。 直接入力したおかげで気付けました。
「rate（レート、率）」と混同しました。
英語難しい。
おしまい。
