結論: viewport の1行と、width より max-width

POINTスマホは何も言われないと「パソコン用の広い画面」として描いてから縮小するので、文字が小さくなる。head に meta viewport の1行を入れて実寸で描かせる。幅を px で決め打ちした箱は狭い画面からはみ出すので、width を max-width に変える。画像には max-width: 100% の保険を付ける。

動画で見た「直す前」と「直した後」のイメージです。

直す前（width: 400px）

白い箱が画面より広く、右が切れる

直した後（max-width: 400px）

画面の幅に合わせて箱が縮む

今日のコード（3ファイル。コピーして使えます）

動画の最後にできあがった3つのファイルです。それぞれ右上の「コードをコピー」ボタンで全文が入ります。前回からの変更は、HTML 2ファイルの head に入れた <meta name="viewport" ...> と、style.css の max-width: 400px;（元は width）、最後の img のルールです。猫の画像は第2回の記事からダウンロードできます。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width">
  <title>はじめてのページ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav>
    <a href="index.html">自己紹介</a>
    <a href="contact.html">お問い合わせ</a>
  </nav>
  <div class="box">
  <h1>はじめてのページ</h1>
  <h2>自己紹介</h2>
  <table>
    <tr>
      <th>好きなもの</th>
      <th>理由</th>
    </tr>
    <tr>
      <td>猫</td>
      <td>かわいいから</td>
    </tr>
    <tr>
      <td>カレー</td>
      <td>おいしいから</td>
    </tr>
  </table>
  <p>IT業界をやさしく案内します。</p>
  <p>これは1行目。<br>
  これは2行目。</p>
  <ol>
    <li>開発の流れ</li>
    <li>職種図鑑</li>
    <li>用語集</li>
    <li>学び方</li>
  </ol>
  <a href="https://it-nyumon.com/">サイトへ</a>
  <a href="https://it-nyumon.com/">
    <img src="neko.png" alt="ねこ" width="200">
  </a>
  </div>
</body>
</html>
contact.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width">
  <title>お問い合わせ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav>
    <a href="index.html">自己紹介</a>
    <a href="contact.html">お問い合わせ</a>
  </nav>
  <div class="box">
  <h1>お問い合わせ</h1>
  <form>
    <p>
      名前
      <input type="text" placeholder="太郎">
    </p>
    <p>
      年齢
      <input type="number">
    </p>
    <p>
      誕生日
      <input type="date">
    </p>
    <p>
      <label>
        <input type="checkbox">
        お知らせを受け取る
      </label>
    </p>
    <p>
      <button>送信</button>
    </p>
  </form>
  </div>
</body>
</html>
style.css
h1 { color: tomato; }
p { font-size: 20px; }
body { background: lightcyan; }
h1 { text-align: center; }
th, td { border: 1px solid gray; }
table { border-collapse: collapse; }
th, td { padding: 8px; }

.box {
  background: white;
  padding: 24px;
  max-width: 400px;
  margin: 0 auto;
  border-radius: 12px;
}

nav a {
  margin-right: 16px;
}

img {
  max-width: 100%;
}

スマホで文字が小さくなる理由と viewport

POINTスマホのブラウザは、何も言われないと「パソコン用の広い画面（980px くらい）」だと思ってページを描き、それを画面に収まるよう縮小する。だから文字が小さい。head に meta viewport を入れると、端末の幅で描いてくれる。

これは昔からの決まりで、スマホ対応していない古いページでも一応全体が見えるようにするための仕組みです。自分のページを実寸で描いてほしいときは、head の中にこの1行を入れます。

  • <meta name="viewport" content="width=device-width">: 「描く幅（viewport）は端末（device）の幅にして」という指示です。動画ではエディタの幅の都合で2行に分けて打っていますが、1行で書いてもかまいません。
  • この1行は、第6回の link タグと同じく、全ページの head に入れます。contact.html にも同じ行を貼りました。

幅の指定は max-width で

POINTwidth: 400px は「必ず 400px」。スマホの画面（390px くらい）より広いのではみ出す。max-width: 400px は「最大 400px、狭ければ画面に合わせる」なので、パソコンでは今まで通り、スマホでは画面いっぱいになる。

viewport を直すと文字は読める大きさになりますが、今度は第7回で作った白い箱の右側が切れます。width: 400px と決め打ちしたからです。1か所を max-width: 400px に変えるだけで、箱は画面の幅に合わせて縮み、パソコンで見たときは 400px のまま真ん中に置かれます。

画像も同じ考え方です。img { max-width: 100%; } を入れておくと、大きな画像を置いても画面の幅までに縮みます。今回の猫は 200px なので見た目は変わりませんが、あとで大きい画像を置いたときの保険になります。

px の決め打ちは「はみ出す」と覚えておきましょう。幅を指定するときは、width より max-width。画像には max-width: 100%。この2つを癖にしておくと、スマホで崩れるページはほとんど作らなくなります。

よくある質問

initial-scale=1 は書かなくていいのですか？

よく見る書き方は content="width=device-width, initial-scale=1" です。動画では短く width=device-width だけにしましたが、initial-scale=1（最初の拡大率を等倍にする）を足しても問題ありません。どちらでもスマホで実寸で描かれます。

自分のパソコンでスマホの見え方を確認するには？

Chrome でページを開き、F12（検証）を押してから、左上の端末アイコン（デバイスツールバー）を押すと、スマホの幅で表示を確認できます。実機で見るには、次回（第9回）のようにネットに公開してから、スマホでそのアドレスを開きます。

width と max-width は何が違いますか？

width は「この幅に固定」、max-width は「最大でこの幅まで。狭い画面なら画面に合わせて縮む」という上限の指定です。画面幅が変わるスマホでは、max-width のほうが安全です。

画像が画面からはみ出します。

CSS に img { max-width: 100%; height: auto; } を入れます。HTML の width 属性で大きい値を入れていても、CSS の max-width が優先して画面の幅までに縮みます。height: auto を足すと縦横の比率が崩れません。