メディアクエリ(@media) - HTML
レスポンシブデザインをするために必須のもの
ブラウザの画面サイズに対応して、CSSのスタイルを変更したいときに使う
書き方
@media(条件) { /* 条件がTrue時に適用させるスタイル */ }
CSSで@media
というキーワードを使う。指定した条件がTrue時に適用させるスタイルを記述する
端末のブラウザ画面サイズ目安
スマホ、タブレット、パソコンのブラウザ画面サイズの目安は以下の通り
名称 | 画面サイズ |
---|---|
スマホ | 〜670px |
タブレット | 671〜1000px |
パソコン | 1001px〜 |
メディアクエリを書くときには次のように書く
/* パソコン画面で適用するスタイル(通常通りに書く) */ @media(max-width: 670px) { /* スマホ画面で適用するスタイル */ } @media(max-width: 1000px) { /* タブレット画面で適用するスタイル */ }
レスポンシブデザインを適用するために必要なmetaタグ
viewport
というのが必要になるため、head
タグ内に記述する
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- viewportとは表示領域のこと
width="device-width"
はページ幅をデバイスの画面の横幅に指定initial-scale=1.0
はページの初期表示の倍率を1に指定
メディアクエリを別ファイルに記述
メディアクエリは通常時のCSSとは別ファイルで作成すると管理がしやすくなる!!
インポートするときには必ずviewportの記述よりも下に記述すること
例)メディアクエリ用のCSSがresponsive.css
の場合
<head> ... <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="responsive.css"> ... </head>