◀ 3.

HTMLのテキスト・フォント要素｜p・span・strong・code・Webフォント

▶
編集
この記事の要点
  • 段落 <p> / インライン <span> が二大基本
  • 意味のある強調: <strong> (重要)、<em> (強勢) — SEO/読み上げで意味が伝わる
  • 見た目だけの <b> <i> <u> は意味なし — CSS で代替推奨
  • セマンティック: <time> 日時、<abbr> 略語、<code> コード、<kbd> キー入力、<mark> ハイライト
  • CSS で font-family / font-size / font-weight / line-height を整える
  • Web フォント: Google Fonts / Adobe Fonts / self-host で日本語フォント (Noto Sans JP 等) を簡単に

テキスト関連 HTML 要素一覧

ブロック系

要素意味備考
<p>段落 (paragraph)本文の基本ブロック
<h1>〜<h6>見出しSEO/アクセシビリティの背骨
<blockquote>長い引用cite 属性で出典
<pre>整形済テキスト空白・改行をそのまま保持、等幅
<hr>水平線、話題の区切りセマンティックな分割
<address>連絡先article / body の作者情報

インライン系: 意味あり (Semantic)

要素意味典型用途
<strong>重要注意事項、要点強調
<em>強勢 (語気)抑揚を付けたい単語
<mark>関連性のあるハイライト検索結果のマッチ箇所
<del>削除済テキスト変更履歴、価格訂正
<ins>挿入済テキスト変更履歴
<sub> / <sup>下付き / 上付き化学式 H2O / 注釈1
<abbr title="..">略語HTML, CSS 等の説明
<dfn>定義語用語の初出
<cite>作品名書籍・映画・論文タイトル
<q>短い引用自動的に引用符が付く
<time datetime="..">日時機械可読な日時
<code>コード片等幅で表示される
<kbd>キーボード入力Ctrl+C
<samp>サンプル出力プログラムの出力例
<var>変数数式や擬似コード
<small>細目・免責事項コピーライト等

インライン系: 意味なし (Presentational)

要素意味代替
<b>太字 (意味なし)意味があるなら <strong>
<i>斜体 (意味なし)意味があるなら <em> / <cite>
<u>下線 (意味なし)リンクと混同するので避ける
<span>意味なし (CSS のフック)クラス/属性で意味を補う
<br>強制改行段落分けなら <p> を使う

実用サンプル

<p>2026 年 <time datetime="2026-06-10">6 月 10 日</time>、
<strong>新サービス</strong>がリリースされました。</p>

<p>略語 <abbr title="HyperText Markup Language">HTML</abbr> は、
ハイパーテキスト・マークアップ言語のことです。</p>

<p>コピーは <kbd>Ctrl</kbd>+<kbd>C</kbd>、貼り付けは
<kbd>Ctrl</kbd>+<kbd>V</kbd> で実行できます。</p>

<p>ファイルを開くには <code>open file.txt</code> と入力。
画面に <samp>OK</samp> と表示されれば成功です。</p>

<p>方程式: <var>E</var> = <var>m</var><var>c</var><sup>2</sup></p>

<p>水分子は H<sub>2</sub>O です。</p>

<blockquote cite="https://example.com/article">
  <p>引用された長い文章…</p>
</blockquote>

<p>価格: <del>5,000 円</del> <ins>4,200 円</ins></p>

<p><mark>キーワード</mark>がマッチしました。</p>

CSS でフォントを整える

body {
  /* 日本語含む安全なフォントスタック */
  font-family:
    -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3", "Noto Sans JP",
    Meiryo, sans-serif;
  font-size: 16px;            /* 1rem = 16px が基準 */
  line-height: 1.7;            /* 日本語は 1.6〜1.8 が読みやすい */
  letter-spacing: 0.02em;
  color: #222;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: clamp(1.5rem, 5vw, 2.5rem); font-weight: 700; }
h2 { font-size: 1.5rem; font-weight: 700; margin-block: 1.5em 0.5em; }
p  { margin-block: 1em; }

/* 等幅 (コード表示) */
code, kbd, samp, pre {
  font-family: "Source Code Pro", "Consolas", "Menlo", monospace;
}

code {
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

kbd {
  border: 1px solid #ccc;
  border-bottom-width: 2px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #f9f9f9;
}

/* 行末の禁則 */
.no-break { word-break: keep-all; overflow-wrap: anywhere; }

Web フォント

Google Fonts

<!-- HTML -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
  href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap"
  rel="stylesheet">

<!-- CSS -->
<style>
body { font-family: "Noto Sans JP", sans-serif; }
</style>

セルフホスト (パフォーマンス重視)

@font-face {
  font-family: "MyFont";
  font-style: normal;
  font-weight: 400;
  font-display: swap;          /* 表示遅延回避 */
  src: url("/fonts/MyFont.woff2") format("woff2"),
       url("/fonts/MyFont.woff") format("woff");
  /* 日本語の場合 unicode-range で必要部分だけ読み込む */
  unicode-range: U+3000-9FFF, U+FF00-FFEF;
}

body { font-family: "MyFont", sans-serif; }

line-height と組版

日本語サイトは英語サイトより少し広めの line-height が読みやすく、本文 16px なら 1.7 前後が定番。見出しは 1.3 前後で詰めます。

:root {
  --leading-tight: 1.25;
  --leading-base: 1.7;
  --leading-loose: 2;
}
h1, h2, h3 { line-height: var(--leading-tight); }
p, li { line-height: var(--leading-base); }
.poem { line-height: var(--leading-loose); }

セマンティクスとアクセシビリティ

  • <strong> はスクリーンリーダーが強調読みする。<b> は読みが変わらない
  • <abbr title=".."> はマウスホバーで展開、読み上げも展開される
  • <time datetime="2026-06-10"> はGoogle が日付として認識し、Rich Results にも使われる
  • lang="ja" 属性を <html> に付けることで、フォント選定や読み上げ言語が正しくなる

FAQ

Q: <b> と <strong> はどう違う？
A: 見た目は同じ太字でも、<strong> は「重要」という意味を持ち、スクリーンリーダーは強調読みします。装飾だけなら <b> or CSS。

Q: 改行に <br> を多用してよい？
A: 段落分けには <p> を使い、<br> は住所や詩のような視覚的に意味のある改行に限定。

Q: 日本語 Web フォントが重い
A: unicode-range でサブセット化、font-display: swap でフォールバック先行、preload で優先読込。

編集
Post Share
子ページ
  1. h1～h6要素
  2. p要素
  3. blockquote要素
  4. q要素
  5. cite要素
  6. ins要素
  7. del要素
  8. HTML em 要素（強調）の使い方と strong との違い
  9. br要素
  10. abbr要素
  11. dfn要素
  12. pre要素で整形済みテキストを表示する
  13. code要素
  14. samp要素
  15. kbd要素
  16. var要素
  17. bdo要素
  18. sup要素で上付き文字を表示する
  19. sub要素
  20. mark要素
  21. data要素
  22. time要素
  23. wbr要素
  24. bdi要素
同階層のページ
  1. 構造
  2. セクション
  3. テキスト・フォント
  4. リスト
  5. リンク・ボタン
  6. ルビ
  7. 画像
  8. オブジェクト
  9. 動画・音声
  10. フォーム要素
  11. その他の要素
2026-06-11 07:12:00 guest 287

人気ページ

最近更新/作成されたページ