★CSSのメディアクエリ(Media Queries)を使い表示を分岐する

  • このエントリーをはてなブックマークに追加

メディアのタイプ

媒体のタイプを指定します。基本的に指定せず、allということで、全ての媒体で同じようにCSSが適用されるようになっています。

スクリーンはよく触れますが、プリンタなどは印刷の指定まで考えていないとなかなか考えませんよね。印刷は簡素にし、印刷用紙にうまくはまるように指定するとより良いです。
テレビ画面は大きいですが、それに合わせた指定も可能です。

  • @media all
    • すべての媒体
  • @media screen
    • コンピュータ画面
  • @media print
    • 印刷物
  • @media tv
    • テレビ

メディアの幅指定

媒体の幅に合わせてCSSをそれぞれ指定。

pxをよく見かける。レスポンシブWebデザインにおいてはブレイクポイントとして指定する。

様々な単位に対応しているので、10emといった指定も可能ではある。


デバイス幅を基準にしたメディアクエリ

CSSのデバイス幅でCSSの切り替えを行う

メディアタイプなどがあるが、こちらは幅を基準としてCSSを適用する。
レスポンシブWebデザインという考え方、そのコーディング方法の一例

Erik LucateroによるPixabayからの画像