テキスト関連 HTML 要素一覧

ブロック系

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

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

実用サンプル

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

略語 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" 属性を に付けることで、フォント選定や読み上げ言語が正しくなる