小学生必見！CSSのレスポンシブ対応のやり方について

CSSのレスポンシブ対応たいおうとは？

今いまはスマートフォンやタブレット、パソコンといろんなデバイスが使つかわれていますよね？

モニターの幅はばがばらばらなので、どの幅はばでもなるべくきれいに見みえるように、WEBサイトの見みた目めを整ととのえてあげる必要ひつようがあります。

そこで、CSSでモニターの幅はばをチェックし、「この幅はばならこのCSS、こちらの幅はばだったらこのCSS」といったぐあいに、モニターの幅はばに合あわせてCSSが変かわるように書かくことができます。

これがレスポンシブ対応たいおうです。

レスポンシブ対応たいおうの書かき方かた

まずはHTMLファイルのheadタグ内ないに下したのコードを書かきます。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

ここの「viewportビューポート」とは、ブラウザでWEBサイトが表示ひょうじされている画面がめんのことを言いいます。

「widthウィズ=deviceデバイス–widthウィズ」は、幅はばはデバイスの幅はばに合あわせてね、という意味いみです。

「initialイニシャル–scaleスケール=1.0」は、特とくに何なにもしないなら1倍ばいの大おおきさで表示ひょうじしてね、という意味いみです。

この1行は変かわらず入いれるものなので、コピペしてOKです。

つぎに「メディアクエリ」を書かいていきます。

メディアクエリの書かき方かた

メディアクエリは下したのように書かきます。

@media screen and (max-width: 768px) {
  /* この中にCSSを書きます。*/
}

「@mediaメディア」は、これからメディアクエリを書かきますよ、という意味いみですね。

「screenスクリーン」は、PCやスマホの画面がめんについて、という意味いみです。

「maxマックス–widthウィズ: 768pxピクセル」は、画面がめんの幅はばが最大さいだいで768px、という意味いみです。

つまり、画面幅がめんはばが768px以内いないのときは、この中なかに書かかれたCSSを使つかうよ、ということになります。

たとえば、

@media screen and (max-width: 768px) {
  body {
    background-color: #ff0000;
  }
}

と書かいてみましょう。

下したの動画どうがみたいにブラウザがタブレットくらいのサイズになると、背景はいけいの色いろが赤あかになります。

もうひとつ、別の書き方があります。

@media screen and (min-width: 600px) {
 /* この中にCSSを書きます。 */
}

さっきと違ちがうのは、「minミン–widthウィズ: 600pxピクセル」となっています。

これは、画面がめんの幅はばが最小さいしょうで600pxまでという意味いみです。

つまり、画面幅がめんはばが600px以上いじょうのときは、この中なかに書かかれたCSSを使つかうよ、ということになります。

たとえば

@media screen and (min-width: 600px) {
  p {
    font-size: 40px;
  }
}

と書かいてみましょう。

したの動画どうがのようにスマホサイズから画面幅がめんはばを広ひろげると、文字もじが大おおきくなることがわかります。

maxマックス–widthウィズとminミン–widthウィズをいつ、どうやって使つかえばいいの？

さて、ここでよく聞きかれる質問しつもんがあります。

「メディアクエリの書かき方かたはわかったけど、max-widthとmin-widthはいつ、どういうときに使つかうんですか？」

2つの書かき方かたがあるので、どっちを使つかえばいいか、迷まよいますよね。

答こたえは、

1. スマホからCSSを書かき始はじめたのなら、min-widthを使つかう
2. PCからCSSを書かき始はじめたのなら、max-widthを使つかう

メディアクエリを使う前にCSSを書くときに、スマホでの見え方を先に書いていった場合はmin-widthを使いましょう。

/* メディアクエリ使ってないここには、スマホ用のCSSが書いてある */

@media screen and (min-width: 600px) {
 /* ここにタブレット用のCSSを書く */
}

@media screen and (min-width: 900px) {
 /* ここにPC用のCSSを書く */
}

上うえのように最初さいしょにスマホ用ようのCSSを書かいたなら、次つぎのメディアクエリでは「min-width: 600px」として、タブレット用ようのCSSを書かきます。

その後あとで、「min-width: 900px」と、PC用ようのCSSを書かきます。

逆ぎゃくにPC用ようのCSSから書かき始はじめた場合ばあいは、max-widthを使つかいます。

/* メディアクエリを使ってないここには、PC用のCSSが書いてある */

@media screen and (max-width: 900px) {
  /* ここにはタブレット用のCSSを書く */
}

@media screen and (max-width: 600px) {
  /* ここにはスマホ用のCSSを書く */
}

このように最初さいしょにPC用ようのCSSを書かいた場合ばあいは、先さきに「max-width: 900px」でタブレット用ようを、

その後あとで「max-width: 600px」でスマホ用ようのCSSを書かきます。

まとめ

このように「@media screen and (〜〜〜){ }」を使えば画面がめんの幅はばによってCSSを変かえることができます。

これがレスポンシブ対応たいおうです。

次回じかいは、実際じっさいにコードを書かきながらレスポンシブ対応たいおうをみんなにもやってもらうので、がんばりましょうね！