smallタグ -フォントサイズを小さくする｜HTML辞典
<small>タグとは？
<small>タグは、HTML文書内で「フォントサイズを小さくする」ためのタグです。
主に補足情報や注意書きを示す際に使用され、デフォルトではフォントサイズが通常のテキストよりも小さくなります。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）、フレージングコンテンツ（Phrasing Content）
インライン要素として扱われ、主に補足的な情報を示すために使用されます。
閉じタグの有無
<small>は開始タグ（<small>）と閉じタグ（</small>）の両方が必要です。
基本的な記述方法
<small> を使用すると、テキストのフォントサイズが通常よりも小さくなります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>smallタグの例</title>
</head>
<body>
<p>これは通常のテキストです。</p>
<p><small>これは補足情報や免責事項を示すための小さなテキストです。</small></p>
</body>
</html>ポイント：
<small>は装飾目的ではなく、補足情報を示すために使用するのが適切。- 視覚的にはフォントサイズが小さくなるが、意味的にも「付加的な情報」として扱われる。
使用できる主な属性
<small>タグには特別な属性はありませんが、一般的なHTML要素の属性を使用できます。
| 属性名 | 説明 | 例 |
|---|---|---|
class | CSSのクラスを適用 | <small class="note">注意書き</small> |
id | 一意の識別子を設定 | <small id="fine-print">細則</small> |
style | インラインスタイルを適用 | <small style="color: gray;">グレーの小さな文字</small> |
CSSを使ったデザイン変更
デフォルトのフォントサイズを変更したい場合は、CSSを活用できます。
✅ カスタムスタイルの適用
.fine-print {
font-size: 12px;
color: gray;
}<p class="fine-print">これはカスタムスタイルで適用された補足情報です。</p><small> の適切な使用例
✅ 免責事項や法的注意書き
法律上の注意書きや著作権表示などに使用するのが適切です。
<p>© 2025 Web制作ガイド <small>All rights reserved.</small></p>✅ 補足情報の表示
本文の補足として、小さな文字で表示したい場合にも使用できます。
<p>価格には消費税が含まれています。<small>（送料は別途必要です）</small></p><small> の適切でない使用例（誤った使い方）
❌ デザイン目的で使うのはNG
見た目だけを小さくしたい場合は、CSSを使用する方が適切です。
<!-- NG：デザイン目的のみで <small> を使う -->
<h1><small>見出し</small></h1>✅ 正しい書き方（CSSを使用）
.small-title {
font-size: 14px;
color: gray;
}<h1 class="small-title">見出し</h1><small> と他のタグの違い
| タグ | 役割 | 視覚的な変化 | 意味の強調 |
|---|---|---|---|
<small> | 補足情報や免責事項を示す | 小さいフォントサイズ | あり（付加的な情報としての意味） |
<span> | 装飾やスタイル適用 | なし（デフォルト） | なし |
<sub> | 下付き文字（H₂Oなど） | 小さいフォントサイズ & 下付き | あり |
使用上の注意点
✅ 本当に補足情報にのみ使用する
<small>を多用すると、可読性が下がるため、本当に補足情報にのみ使用するのが推奨されます。
✅ 装飾目的なら CSS を使うのが推奨される
- HTMLの構造をシンプルにするため、見た目の変更は CSS で行うのが望ましい。
.small-text {
font-size: 12px;
color: gray;
}<p class="small-text">これはCSSで適用された小さな文字です。</p>関連タグ
<sub>– 下付き文字（H₂Oなど）<sup>– 上付き文字（10² など）<span>– インライン要素のグループ化（カスタムスタイル適用に便利）<em>– 文章の意味的な強調（斜体）<b>– 視覚的な太字（装飾目的）
まとめ
<small>タグは、HTML文書内で補足情報や免責事項を示すためのタグ です。
視覚的にはフォントサイズが小さくなりますが、意味的にも「付加的な情報」として扱われます。
ただし、単なる装飾目的なら CSS を使用する方が推奨されます。
