HTML/CSS_lll レスポンシブデザイン
Media Queries(メディアクエリ)
ブラウザの画面サイズに応じてCSSのスタイルを設定できるMedia Queries(メディアクエリ)という手法を用いて、様々なデバイスや画面サイズに合わせてコンテンツのレイアウトを調整する。
書き方
@media (条件) { .... }
:指定された条件が当てはまるときにのみ{ }内のCSSが適用されるhead
タグ内にviewport
を設定する
条件
- max-width:○○px:○○pxまで
- min-width:●●px :●●pxから
ブレイクポイント
デザインが切り替わる画面幅のポイントをブレイクポイントと呼ぶ。
max-width: ◯◯px
(またはmin-width: ◯◯px
)のようにメディアクエリの条件を指定するとき、「◯◯px」の部分。
<端末別画面サイズ>
<一般的なブレイクポイント>
<head> <meta name=”viewport” content=”width=device-width,initial-scale=1.0″> </head>
/* 480px以下の場合h1はgreenになる */ @media (max-width:480px) { h1{ color:green; } }