この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:6
ページ更新者:guest
更新日時:2026-06-11 07:07:02

タイトル: テキスト・フォント
SEOタイトル: HTML テキスト・フォント要素完全ガイド（p / span / strong / time / kbd / code / Web フォント）

この記事の要点
  • 段落

    / インライン が二大基本

  • 意味のある強調: (重要)、 (強勢) — SEO/読み上げで意味が伝わる
  • 見た目だけの は意味なし — CSS で代替推奨
  • セマンティック: 日時、 略語、 コード、 キー入力、 ハイライト
  • CSS で font-family / font-size / font-weight / line-height を整える
  • Web フォント: Google Fonts / Adobe Fonts / self-host で日本語フォント (Noto Sans JP 等) を簡単に

テキスト関連 HTML 要素一覧

ブロック系

要素意味備考

段落 (paragraph)本文の基本ブロック

〜

見出しSEO/アクセシビリティの背骨
長い引用cite 属性で出典
整形済テキスト空白・改行をそのまま保持、等幅
水平線、話題の区切りセマンティックな分割
連絡先article / body の作者情報

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

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

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

要素意味代替
太字 (意味なし)意味があるなら
斜体 (意味なし)意味があるなら /
下線 (意味なし)リンクと混同するので避ける
意味なし (CSS のフック)クラス/属性で意味を補う

強制改行段落分けなら

を使う

実用サンプル

2026 年 、
新サービスがリリースされました。



略語 HTML は、
ハイパーテキスト・マークアップ言語のことです。



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



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



方程式: E = mc2



水分子は H2O です。




  
引用された長い文章…





価格: 5,000 円 4,200 円



キーワードがマッチしました。

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

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

@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); }

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

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

FAQ

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

Q: 改行に
を多用してよい？
A: 段落分けには

を使い、
 は住所や詩のような視覚的に意味のある改行に限定。

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