レスポンシブの入り口

導入

スマホと PC では画面幅が大きく違います。幅に応じて見た目を変える仕組みが メディアクエリ です。これで「狭いときだけ字を大きく」のような調整ができます。

説明

@media (max-width: 幅) の中に書いた CSS は、画面がその幅以下のときだけ効きます。

<p class="msg">画面幅で色が変わります</p>

<style>
  .msg { color: blue; }

  @media (max-width: 600px) {
    .msg { color: red; }
  }
</style>

ふだんは青、画面が 600px 以下になると赤に変わります。プレビュー枠の幅を狭めると切り替わりを確認できます。

やってみよう

上の例を打ち込み、プレビュー領域を広げたり狭めたりして、色が青と赤で切り替わることを確かめましょう（切り替わる幅はプレビューの表示幅に依存します）。

演習

画面幅 500px 以下のときに効くメディアクエリの1行目 @media (max-width: 500px) { を書いてください。

これで HTML/CSS コースは修了です。骨組み（HTML）と装飾（CSS）、配置（レイアウト）まで一通り触れました。あとは作りたいページを決めて、手を動かしながら少しずつ引き出しを増やしていきましょう。