CSS解説 メディアクエリ
PC用にホームページを作っていると、スマホで見た時に、文字が小さく、画面も広すぎるため、見にくいサイトになっていまします。
PCで見た時はPC用のCSSレイアウト、スマホで見た時にはスマホ用のCSSレイアウトを使用するのに役に立つのが、メディアクエリです。
見る人の画面サイズやブラウザによって適した表示を行う「レスポンシブウェブデザイン」に使用される方法の一つですね。
はい。例えば、画面の解像度によって、使用するCSSを変える場合は、以下のように書きます。 通常は<head>～</head>内に書きます。
<head> <link rel="stylesheet" href="../css/mobile_style.css" type="text/css"
media="screen and (max-width: 1199px)">
<link rel="stylesheet" href="../css/pc_style.css" type="text/css"
media="screen and (min-width: 1200px)"> </head>
このコードは、解像度が1199px以下であったならば、「mobile_style.css」を参照し、1200px以上であったならば、「pc_style.cs」を参照するようにしています。
スマホの画面サイズって、どれくらい？
例えばi-phone13だと「2,532 x 1,170」、Galaxy A22だと「1,560×720」、arrows We F-51Bだと「1,520×720」みたい。
いちじくのPCは～ 「1920×1080」！！
そうなの。
・・・うん。 あれ？メディアクエリに指定した1199pxとか1200pxとかって、縦と横のどちらの数値？
「width」と書いているから横の解像度だね。 なので、1200pxの指定だと、最近のほとんどのスマホは横向きでサイトを表示すると、PCのサイトが表示されるね。
インターネットを見る時、スマホは縦向きで見ることが多いから、縦向きで見た時にスマホ用の表示がされればいいかな。
最適な解像度の値を考えるのも、結構難しいね。
ねー
今まで説明したのが、外部参照するCSSファイルそのものを解像度によって変える方法ですが、直接CSSにどの解像度の時は、どのスタイルを適用するかを指定することもできます。
下のコードは、CSS内に直接記載して、「500px」以下、「500px～1199px」の間、その他の解像度で、適用するレイアウトを変えるようにしています。
p {
font-size: medium;
}
@media screen and (min-width:500px) {
p {
font-size: large;
}
@media screen and (min-width:500px) and ( max-width:1199px) {
p {
font-size: small;
}
@media以外のところは普通に読み込まれます。また、CSSは下に書いたものが優先されるので、@mediaに該当する場合だけ、別のスタイルにして、それ以外は通常のCSSにするという使い方ができますね。
今回のメディアクエリの説明は以上です。うまく考えて、有効的に使っていきたいですね。
お名前
