⑤【レスポンシブ編】スマホで見ても綺麗なサイトを作ろう！

今の時代、Webサイトを見る人の多くはスマートフォンを使っています。 パソコンで作ったサイトをそのままスマホで見ると、文字が小さすぎたり、横にはみ出したりして読みづらいことがあります。

そこで必要なのが、画面サイズに合わせてデザインが自動で変わる「レスポンシブ対応」です。

1. レスポンス対応に必須の「一行」

スマホ対応をさせるために、HTMLのheadタグの中に必ず入れなければならない「魔法の呪文」があります。

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

これを書くことで、ブラウザに対して「表示する画面の幅に合わせて、表示倍率を調整してね」と伝えることができます。これがないと、どんなにCSSを頑張ってもスマホで綺麗に表示されません。

2. メディアクエリを使ってみよう

CSSには、「画面の横幅が〇〇px以下のときは、このデザインを適用する」という便利な書き方があります。これを「メディアクエリ」と呼びます。

例えば、「普段は文字が黒だけど、スマホ（幅600px以下）の時だけ赤くする」という指示はこう書きます。

CSS

/* パソコン用の設定 */
p {
  color: black;
}

/* 画面幅が600px以下のときだけ適用される設定 */
@media (max-width: 600px) {
  p {
    color: red;
  }
}

3. 実践！スマホで見たときだけレイアウトを変える

以下のコードを index.html に貼り付けて、ブラウザの横幅をマウスでぐーっと狭めてみてください。途中で色やレイアウトが変わるはずです。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      body {
        font-family: sans-serif;
        padding: 20px;
      }
      .container {
        background-color: lightgray;
        padding: 20px;
        text-align: center;
      }

      /* スマホ用の設定（幅600px以下） */
      @media (max-width: 600px) {
        .container {
          background-color: peachpuff; /* 背景色を変える */
        }
        h1 {
          font-size: 18px; /* 文字を少し小さくする */
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>画面の幅を変えてみてね！</h1>
      <p>パソコンで見るとグレー、スマホで見ると薄いオレンジ色になります。</p>
    </div>
  </body>
</html>

4. レスポンス対応のコツ

・横幅を「300px」と固定せず、「100%」や「auto」といった柔軟な単位を使う。
・スマホではボタンを大きくして、指で押しやすくする。
・複雑な横並びのレイアウトは、スマホでは縦に並べる。

まとめ

・「viewport（ビューポート）」の設定を忘れずに入れる。
・「@media」を使って、画面サイズごとのCSSを書く。
・まずは「スマホで見たときに崩れていないか」を確認する癖をつけよう！

コメント

PAGE TOP