タイトル: テキスト・フォント
SEOタイトル: HTML テキスト・フォント要素完全ガイド（p / span / strong / time / kbd / code / Web フォント）
| この記事の要点 |
|
テキスト関連 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 で優先読込。