最近は、WEB制作を行うときに、レスポンシブを対応しない事がすっかりなくなりましたね。
レスポンシブに対応するのもテキパキとスピーディーにこなせるのですが、しかし私は本当に覚えがわるいため、メディアクエリの書き方を覚える事ができません。 毎回、Google先生で確認してコピペで使っています。
みなさんも同じようなお悩みではありませんか？
どこかに保存しておけという話なんですが、これが癖になってしまっております。
ということで、覚えることを諦めた私はすぐにコピペで使えるようにこちらにメディアクエリの書き方をまとめたいと思います。
この時期では、HTML側に記載する方法と、CSS側に記載する方法の2通りをわかりやすくまとめました。 同じお悩みを持つ方がいらっしゃれば参考になれば幸いです。
いつでもコピペして利用してくださいませ。
スマホのメディアクエリの書き方
スマホの横幅は480pxと想定いたします。
HTMLに記述
HTMLの<head>に記載して、外部CSSを切り分ける方法です。
480px以下になると、phone.css に切り替わります。
<link rel="stylesheet" href="phone.css" type="text/css" media="screen and (max-width: 480px">
CSSに直接記入する
CSSファイルの中で切り分ける方法です。
480px以下になると、こちらの中に記述したCSSに切り替わります。
@media screen and (max-width:480px) {
// この中に記述します。
}
タブレットのメディアクエリの書き方
ここではタブレットの幅は 480px以上から800pxまでとします。
HTMLに記述
HTMLの<head>に記載して、外部CSSを切り分ける方法です。
800px以下になると、tab.css に切り替わります。
<link rel="stylesheet" href="tab.css" type="text/css" media="screen and (max-width: 800px">
ここで注意するのは、phone.css も記入する場合には、style.css → tab.css → phone.css の順で記述してください。 （HTMLは上から読まれますので、順番が逆になると変な動作を起こしてしまいます。）
phone.cssがない場合は、 800px以下は全てtab.css が反応することになります。
記述例
<!-- tab.css から記述する --> <link rel="stylesheet" href="tab.css" type="text/css" media="screen and (max-width: 800px"> <!-- phone.css は tab.cssの下に書く --> <link rel="stylesheet" href="phone.css" type="text/css" media="screen and (max-width: 480px">
CSSに直接記入する
CSSファイルの中で切り分ける方法です。
480px〜800px の場合にこちらの中に記述したCSSが反応します。
@media screen and (min-width:480px) and ( max-width:800px) {
// この中に記述します。
}
横幅が1280px以上の場合に適用する方法
最近のPC画面は27インチ以上のものも増えてきています。
横幅が広すぎる場合に切り替えたい時に記述したりします。
HTMLに記述
HTMLの<head>に記載して、外部CSSを切り分ける方法です。
1280px以上になると、over-width.css に切り替わります。
<link rel="stylesheet" href="over-width.css" type="text/css" media="screen and (min-width: 1280px">
CSSに直接記入する
@media screen and (min-width:1280px) {
// この中に記述します。
}
まとめ
これでもう毎回メディアクエリの書き方を探す必要がなくなりました。
私は、PC、タブレット、SPの３つのブレークポイントで作ることが多いのですが、過去に10以上のブレークポイントがあるサイトを見つけたときはびっくりしました。
それではまた。
コメント