レスポンシブデザインとは

レスポンシブデザインは、閲覧者の画面サイズまたはウェブブラウザに応じたウェブページが閲覧できることを目指したウェブデザイン。

簡単に言うと見る人の画面サイズ(横幅)に応じて、見やすくデザインする。ということになると思います。

レスポンシブ対応を行う際の重要な設定が３つあります。

viewport
メディアクエリ
ブレークポイント

最初は、書き方を覚えてください。
深掘りすると色々な情報がありますが、特に1.2.はまず書き方を覚えてください。

サンプルを見てみよう

Chromeデベロッパツールを開いて横幅を変化させてみてください。

768, 1024あたりでタイトルと背景色が変わるのが分かると思います。
また、600あたりで画像が消えます。

Viewport

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

これです。。。。
色々解説している記事もありますが、
一旦これを覚えます。（というかviewportなどでググればすぐ出てきます。）

html内のheadタグ内に書きます。

VSCodeで!打ち込んで、tabキーを押すと勝手に記述されますね。

ブレイクポイント

CSSでよく出てくる設定を紹介します。

min-width: 9px　→　9px以上に効かせるCSSを書きます。
max-width: 8px　→　8px以下に効かせるCSSを書きます。

2021.11月時点でググった結果によると

スマートフォン：設定なし（実質599px以下）
タブレット：600px [min-width : 600px]
PC：1,025px [min-width : 1025px]

が多いみたいですね。

メディアクエリ(mediaquery)

CSSに書きます。

    <style>
      /* 通常効くCSS */
      div {
        background-color: chartreuse;
      }
      /* 480px以下に効くCSS */
      @media screen and (max-width: 480px) {
        div {
          background-color: blueviolet;
        }
      }
      /* 800pxに効くCSS */
      @media screen and (min-width: 800px) {
        div {
          background-color: darksalmon;
        }
      }
    </style>

サンプル

下記を動かしてみてください。
先に見たサンプルのように背景色が横幅によって変化することが分かると思います。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        background-color: chartreuse;
      }
      @media screen and (max-width: 480px) {
        div {
          background-color: blueviolet;
        }
      }
      @media screen and (min-width: 800px) {
        div {
          background-color: darksalmon;
        }
      }
    </style>
  </head>
  <body>
    <div>あいうえお</div>
  </body>
</html>

演習

実装してみてください。

サンプルソースは後ほど公開します。

ヒント
visibilityを使用しようとしましたが、見えないだけで、空白ができてしまったので、
display: noneとdisplay: inline-tableを使用してみました。

5-1 レスポンシブ基本