TIL

Today I Learned. 知ったこと、学んだことを書いていく

メディアクエリ(@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の記述よりも下に記述すること

例)メディアクエリ用のCSSresponsive.cssの場合

<head>
  ...
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="responsive.css">
  ...
</head>

参考文献