【プログラミング初心者でもわかる】メディアクエリとは【プログラミング】

メディアクエリという機能を使うと、劇的に作業の幅が広がり、web制作がもっと面白くなるので是非使ってみましょう。

本記事のもくじ

  • メディアクエリとは
  • メディアクエリの書き方
  • レスポンシブ対応のコツ

スポンサーリンク

メディアクエリとは

そもそもメディアクエリとは何なのかを、簡単に説明すると、

画面サイズによって、cssスタイルが変わる設定です。

たとえば、僕のブログではスマホ時のサイズと、パソコン時のサイズでcssのスタイルが変わります。
※主に文字サイズや、画像サイズや、レイアウトなどです。

また、ウィキペディアではこう説明されています。

メディアクエリは画面の解像度 といった条件に対応してコンテンツの描画が行えるようにするCSS3のモジュールである。2012年6月にはW3C勧告になり、レスポンシブウェブデザインの基礎になっている

つまり、スマホやタブレット、パソコンに応じて表示を変えるということです。

スポンサーリンク

メデイアクエリの書き方

メディアクエリはstyle.cssで反映させます。書き方は下記です。

@media (min-width:768px) {
.class {
padding:2em;
}
}

これだけなので、結構簡単です。

この場合、画面幅が768px以上の時、padding;2em;が適用されるということになります。

スポンサーリンク

レスポンシブ対応のコツ

レスポンシブ対応では、スマホ優先で書くことをおすすめします。
なぜなら、スマホ優先で書くと、パソコン表示時のcssを書く量が減るからです。

たとえば、「スマホは画面が小さいから、折りたたみのリストを作ろう」と思ったときに、パソコン優先で書いてしまうと、

「小さいと表示崩れするから、ここを修正しなきゃ」となり、無駄に書く量が増えてしまいます。

なので、スマホ優先で書こうということです。
これをモバイルファーストと言ったりします。

スマホ優先の場合のメデイアクエリの書き方

スマホ優先の場合、「pxが100px以上になったら表示を変える」となるので、min-widthと書きましょう。

逆にpc優先の場合は、max-widthと書きます。

それでは、参考になれば幸いです。