メディアクエリという機能を使うと、劇的に作業の幅が広がり、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と書きます。
それでは、参考になれば幸いです。