1. HOME
  2. メディア
  3. Web制作
  4. メディアクエリの書き方|5分でわかる!
Web制作 2022.9.5

メディアクエリの書き方|5分でわかる!

  • 基礎知識
  • webサイト
  • web制作
  • 知識
  • ヒント

メディアクエリの書き方のイメージ図
この記事で解決できる悩み

①メディアクエリって何?
②レスポンシブ対応したいけどコードが分からない!
③メディアクエリが効かない

このようなお悩みを解決できる記事をご用意いたしました。

この記事を読めば、コーディング初心者でもメディアクエリの書き方が分かるようになります!

レスポンシブデザインには欠かせないメディアクエリについて一緒に勉強していきましょう。

メディアクエリとは?

メディアクエリとは「CSSを適応させる画面設定を表すコード」のことを指します。レスポンシブデザインをコーディングするとき、画面幅に合わせたCSSを適応させたいですよね?そんなとき、このメディアクエリは活躍してくれる必須のコードなのです!

関連記事

CSSとは? – HTMLとセットで覚えよう!-
https://www.cyber-bridge.jp/cbmedia/webdesign/css/

関連記事

【CSS】プロパティ&値の読み方と用途 – ABC順
https://www.cyber-bridge.jp/cbmedia/webdesign/css-property/

メディアクエリの書き方

メディアクエリの記述式

まず、メディアクエリはCSSに記述するコードです。基本式は以下のようになっています。

基本式

@media メディアタイプ and (画面幅を指定するCSS: 画面サイズpx){適応させたいCSS}

また、HTML側にも<head>内に「viewport」という表示領域を指定するmeta要素が必要です!忘れずに記述しましょう。

viewport記述例

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

上記の記述例は、meta要素で「viewport(表示領域)」を指定し、contentで「画面幅をデバイスのサイズ、初期表示時の倍率は1倍」ということを指定しています。もしも、ユーザーに拡大・縮小などをして欲しくない場合はこの記述式内に追記することもあります。

関連記事

【HTML】要素&属性の読み方と用途 – ABC順
https://www.cyber-bridge.jp/cbmedia/webdesign/html-dictionary/

メディアタイプとは

メディアタイプとは、出来上がったWebサイトを出力するデバイスのこと。さまざまな指定が出来ますが、今回は主要な3つをご紹介します。是非この3つは覚えておいてください!

ディスプレイ

@media screen and (){}

プリンター

@media print and (){}

全て

@media all and (){}

画面幅を指定するCSS

次に、{}のCSSを適応させる画面幅を指定するCSSの書き方です。こちらも、主に使用する2つに絞って解説いたします。また、ここでの記述式のデバイスはディスプレイ(screen)とします。

最大幅

@media screen and (max-width: ●●px){}

上記のように、「max-width」を指定すると画面の最大幅を指定出来ます。例えば、

@media screen and (max-width: 600px){}だと、「600px以下の場合、{}内のCSSを適応する」というコードとなります。

最小幅

@media screen and (min-width: ●●px){}

また、上記のように、「min-width」を指定すると画面の最小幅を指定出来ます。例えば、

@media screen and (max-width: 600px){}だと、「600px以上の場合、{}内のCSSを適応する」というコードとなります。

メディアクエリが効かないとき

メディアクエリを記述しているのに、画面幅が変わったときにレスポンシブデザインにならない!

そんな時は、以下のことをチェックしてみてください。

  • HTMLの<head>タグ内に<meta name=”viewport” …>の記述がない
  • @media screen andの後に半角スペースがない
  • メディアクエリの記述式後に別の記述式で画面幅が指定されている

上記の場合、正しくメディアクエリが働きません。特にCSSは上から順にコードが処理されていくので、後述のコードに上書きされてしまうこともあります。よく起こりうるミスなので注意しましょう!

まとめ

ここまで読んだ皆様は、きっとメディアクエリの書き方がマスターできたはずです!

レスポンシブデザインでは画面幅が変わるので、このメディアクエリは必須のコードです。

このようにコードの意味や仕組みを理解して、美しいレスポンシブサイトを作りましょう。

さらに詳しいメディアクエリとレスポンシブに関する解説は、こちらのサイトが分かりやすいです。


この記事を書いた人

小川恵実
小川恵実

2022年8月に中途入社。IT未経験からの入社なので毎日勉強中です。

この人が書いた記事をもっと読む