Skip to content

3. meta charset / meta viewport（文字化け・スマホ対応）

`meta charset`で文字化けを防ぎ、`meta viewport`でスマホでも読みやすい表示倍率にできます。

•beginnermetacharsetviewportresponsivemobile
目次
まず結論
最小の書き方（コピペで動く最小コード）
重要ポイント（初心者が詰まる所だけ）
例で理解（よく使うパターン 4つ）
1) 基本（ほぼこれでOK）2) ページ説明も入れる（SEOの入口）3) 文字コードを明示（日本語ページの基本）4) ローカル確認用：タイトルを変える（タブ名で判別）
使い分け（似てるけど違う）
実務のコツ（SEO・安全・アクセシビリティ）
NG・禁止例（なぜダメ？どう直す？）
つまずき回避（確認ポイント）
見た目を整える（HTML+CSSセット：3例）
例1：スマホでも読みやすい本文幅（viewportと相性◎）例2：画像のはみ出し防止（viewportだけでは直らない代表）例3：見出しと本文の余白を整える（スマホで詰まりにくい）
理解チェック（3問・答え付き）
ミニ演習（すぐ試せる小課題）

まず結論

meta charsetで文字化けを防ぎ、meta viewportでスマホでも読みやすい表示倍率にできます。

最小の書き方（コピペで動く最小コード）

HTMLCode
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>metaの基本</title>
  </head>
  <body>
    <h1>文字化けしない＆スマホ対応</h1>
    <p>「こんにちは」など日本語が正しく表示されます。</p>
  </body>
</html>
Preview を表示

重要ポイント（初心者が詰まる所だけ）

  • <meta charset="utf-8">
    • 文字コードを UTF-8 に固定 → 日本語の文字化けを防ぐ
    • できるだけ headの早い位置（先頭付近）に置くのが安全
  • <meta name="viewport" ...>
    • スマホの表示幅を 端末幅に合わせる（width=device-width）
    • 初期倍率を 1 にする（initial-scale=1）
  • HTMLだけで“見た目がレスポンシブになる”わけではない
    • viewportは「倍率/幅の前提」を整えるもの
    • 実際のレイアウト調整はCSS（max-widthなど）

例で理解（よく使うパターン 4つ）

1) 基本（ほぼこれでOK）

HTMLCode
<meta name="viewport" content="width=device-width, initial-scale=1" />

※ このHTML断片は meta / title など表示要素がないため、プレビューは省略しました。

2) ページ説明も入れる（SEOの入口）

HTMLCode
<meta name="description" content="HTMLのmeta設定を学ぶページです。" />

※ このHTML断片は meta / title など表示要素がないため、プレビューは省略しました。

※テーマ外だけど、headに置く代表例として覚えておくと便利

3) 文字コードを明示（日本語ページの基本）

HTMLCode
<meta charset="utf-8" />

※ このHTML断片は meta / title など表示要素がないため、プレビューは省略しました。

4) ローカル確認用：タイトルを変える（タブ名で判別）

HTMLCode
<title>3.meta練習ページ</title>

※ このHTML断片は meta / title など表示要素がないため、プレビューは省略しました。

使い分け（似てるけど違う）

  • meta charset：文字の解釈ルール（日本語が壊れない）
  • meta viewport：画面幅と倍率のルール（スマホで拡大縮小が変になるのを防ぐ）

実務のコツ（SEO・安全・アクセシビリティ）

  • lang + charset + viewportは“3点セット”で入れると事故が減る
  • スマホで文字が小さすぎるときは、まずviewportが入っているか確認
  • 画像やレイアウトがはみ出すときは CSSでmax-width: 100% などを足す（viewportだけでは直らない）

NG・禁止例（なぜダメ？どう直す？）

  1. charsetがない → 文字化けの原因
HTMLCode
<head>
  <title>テスト</title>
</head>

※ このHTML断片は meta / title など表示要素がないため、プレビューは省略しました。

→ ✅

HTMLCode
<meta charset="utf-8" />

※ このHTML断片は meta / title など表示要素がないため、プレビューは省略しました。

  1. viewportがない → スマホで縮小表示になりがち
HTMLCode
<head>
  <meta charset="utf-8" />
</head>

※ このHTML断片は meta / title など表示要素がないため、プレビューは省略しました。

→ ✅

HTMLCode
<meta name="viewport" content="width=device-width, initial-scale=1" />

※ このHTML断片は meta / title など表示要素がないため、プレビューは省略しました。

  1. viewportのwidthが固定値 → 端末によって崩れる
HTMLCode
<meta name="viewport" content="width=980" />

※ このHTML断片は meta / title など表示要素がないため、プレビューは省略しました。

→ ✅ width=device-width にする

  1. viewportをbodyに書く → 効きにくい/意図が崩れる
HTMLCode
<body>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
</body>
Preview を表示

→ ✅ headへ移動

つまずき回避（確認ポイント）

  • 文字化け：ファイル保存がUTF-8になっているか（エディタ設定）＋ meta charset があるか
  • スマホ表示が変：meta viewport があるか → 端末の“PC表示”モードを解除して再確認
  • DevTools（開発者ツール）でスマホ表示にして、倍率や幅の挙動をチェックすると早い

見た目を整える（HTML+CSSセット：3例）

例1：スマホでも読みやすい本文幅（viewportと相性◎）

例1：スマホでも読みやすい本文幅（viewportと相性◎）

HTMLCode
<main class="page">
<h1>読みやすいページ</h1>
<p>スマホでも横に伸びすぎないようにします。</p>
</main>
CSSCode
.page {
max-width: 720px;
margin: 0 auto;
padding: 20px;
line-height: 1.8;
}
Preview を表示

例2：画像のはみ出し防止（viewportだけでは直らない代表）

例2：画像のはみ出し防止（viewportだけでは直らない代表）

HTMLCode
<figure class="media">
<img class="media__img" src="photo.jpg" alt="サンプル画像" />
<figcaption class="media__cap">画像が横にはみ出さない</figcaption>
</figure>
CSSCode
.media {
margin: 0;
}

.media__img {
max-width: 100%;
height: auto;
display: block;
}

.media__cap {
opacity: 0.8;
font-size: 0.95rem;
}
Preview を表示

例3：見出しと本文の余白を整える（スマホで詰まりにくい）

例3：見出しと本文の余白を整える（スマホで詰まりにくい）

HTMLCode
<section class="block">
<h2 class="block__title">セクション</h2>
<p>余白があると読みやすい。</p>
</section>
CSSCode
.block {
border: 1px solid currentColor;
border-radius: 16px;
padding: 16px;
}

.block__title {
margin: 0 0 10px;
letter-spacing: 0.02em;
}
Preview を表示

理解チェック（3問・答え付き）

Q. `meta charset`の目的は？

A. 文字コードを指定して文字化けを防ぐ。

Q. `meta viewport`の基本形でよく使うのは？

A. width=device-width, initial-scale=1。

Q. viewportを入れたら自動でレイアウトが崩れなくなる？

A. ならない（viewportは前提、崩れ対策はCSSも必要）。

ミニ演習（すぐ試せる小課題）

  1. 2/30の基本構造に、meta charsetとmeta viewportを追加して「日本語」と「スマホ表示」を確認してみよう。
  2. 例2のCSS（max-width:100%）を入れて、画像がはみ出さないことをDevToolsのスマホ表示で確かめよう。