メディアクエリ

Web

メディアクエリについて、知らなかった。あるきっかけで、調べて見たのでその忘備録的に書いてみる。

メディアクエリ

メディアクエリとは、おなじみWikipediaによると、

メディアクエリは画面の解像度 (例えばスマートフォンの画面とコンピュータの画面) といった条件に対応してコンテンツの描画が行えるようにするCSS3のモジュールである。2012年6月にはW3C勧告になり、[レスポンシブウェブデザイン (RWD) の基礎になっている。

メディアタイプと1つ以上の式でメディアクエリは構成され、真または偽に決定されるメディア特性に関係を持つ。メディアクエリで定められたメディアタイプと文書が表示されているデバイスの種類が合い、メディアクエリの式がすべて真であればクエリの結果は真になる。メディアクエリが真なら対応するスタイルシートやスタイルルールが通常のカスケードルールにあわせて適用される。

https://ja.wikipedia.org/wiki/%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2%E3%82%AF%E3%82%A8%E3%83%AA

CSS3で導入された、レスポンシブWebサイト用の仕組みです。

デバイスの種類 (プリンタと画面など)や特定の特性 (画面の解像度、ブラウザーのviewportの幅など) に応じてサイトやアプリを変更したいときに利用するものです。

メディアクエリの使い方3つ

メディアクエリを利用するには、もちろん.cssファイルに記述するのですが、3種類の記法があります。

HTMLにおいてCSSファイルを読み込むlinkタグにmedia属性を記述

例えば以下の1行。メディアクエリの部分は、media=”screen and (max-width:300px)” の部分です。
media属性で、「screen」はメディアタイプで、画面を示しています。
「max-width:300px」はメディア特性で、特定のユーザーエージェントやデバイスや環境などの特性を記述します。ビューポートの幅が最大で300pxという意味です。

<link rel="stylesheet" href="test.css" type="text/css" media="screen and (max-width:300px)">

CSSの中で、@import する際に記述

指定するデバイスによって、インポートするファイルを分けることができます。

@import url;

@import url list-of-media-queries;

url
インポートするリソースの位置を表す <string> 又は <url> です。 URL は絶対パス相対パスでも構いません。なお、 Mozilla パッケージでは URL はファイルを指定する必要はありません。パッケージ名やその一部で指定すると、自動的に適切なファイルが選択されます (例 chrome://communicator/skin/)。詳しくはこちらをご覧ください
list-of-media-queries
リンクした URL で定義された CSS 規則の適用の条件を示す、メディアクエリのコンマ区切りのリストです。ブラウザーがメディアクエリに対応していない場合、リンクされたリソースは読み込まれません。

https://developer.mozilla.org/ja/docs/Web/CSS/@import

例を見ます。

@import url('smartph.css') screen and (max-width: 650px);

@inport url(‘smartph.cssというファイルを読み込む’) screenというメディアタイプの指定 and (max-widthが650pxというメディア特性の指定);

こんな感じで@imprt を利用する方法がパターン2。

CSSの中で、@media を記述

パターン3は、@media を使うパターンです。
@impor との違いは、インポートする(読み込む)ファイルは同じですが、デバイスごとに使用するスタイルを分けることができるようです。

例を見ます。

div{ width: 1060px; }
@media screen and (max-width: 620px) {
  div{ width: 100%; }
}

横幅(max-width)1060px以下の場合のみ、divのwidthである1060pxを適用する(上書きする)。
@media screenというメディアタイプの指定 and (max-widthというメディア特性の指定) {620pxという /指定するスタイルの記述/ }

シンプルなやつも1つ例としてあげておきます。

@media screen and (min-width:0px){
  /*0px以上で適用する内容*/

メディアタイプは主要4つ

メディアタイプ意味
allすべての機器に一致
printページ付きの素材や、印刷プレビューモードで画面に表示された文書のためのもの
screen主に画面のためのもの
speech主に音声合成のためのもの

メディアタイプについては、4つなので比較的覚えやすいです。

メディア特性はいっぱいある

メディア特性は、特定のユーザーエージェント(UA)や、出力機器、環境などの特性を記述します。メディア特性式は、完全に任意です。それぞれのメディア特性式は、括弧で囲む必要があります。

例をいくつかあげると、

  • width ・・・ 横幅
  • height ・・・ 縦幅
  • aspect-ratio・・・ ビューポートの幅対高さのアスペクト比
  • overflow-inline・・・ ビューポートをインライン軸方向にあふれたコンテンツがスクロールできるか

参考(他のメディア特性についてはここ):https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries

その他

しっかりとメディアクエリを利用しているサイトでは、論理演算式やメディア特性の組み合わせで詳細に条件を指定して利用しているようです。
ともすると複雑になってしまいますが、今後のレスポンシブサイト全盛の時代にはこのメディアクエリの知識は必要であると思います。

参考サイト
https://wemo.tech/839

コメント

タイトルとURLをコピーしました