smallタグ 小さく表示される文を表す

HTMLの<small>スモールタグは、免責事項、警告、法的制限、著作権などの注釈や小さく表示されるべき文に対して使います。

<p>このソフトウェアは無料で使用できます。</p>
<p><small>このソフトウェアにより、機器に何らかの損害が生じたとしても、一切の責任を負いかねますので、ご了承ください。</small></p>

smallタグの使い方

使いどころ

<small>タグの使うどころをいくつか紹介します。

1. 著作権表示

たとえばWebサイトのフッターにあるコピーライト情報に対して使います。

<footer>
  <p><small>© 2019 Code Kitchen</small></p>
</footer>

2. 補足のコメント

カッコでくくった補足コメントを<small>でマークアップするのも適切な使い方です。

<p>JavaScript<small>（JSと呼ぶ人も多い）</small>は、プログラミング言語の1つです。</p>

3. 料金表示の補足

料金を表示するときに「税込み」や「○○代込み」などの補足情報をのせたいときに<small>を使うのも良いでしょう。

<h2>料金</h2>
<p>2,500円<small>（税込み）</small></p>

<dl>
 <dt>シングル</dt>
 <dd>¥10,800<small>（朝食なし）</small></dd>
 <dt>プレミアム・シングル</dt>
 <dd>¥15,800<small>（朝食つき）</small></dd>
</dl>

段落やリストなどの中で使う

<small>は記述コンテンツであり、段落などの文章の中で使われます。

👍良い例

<p><small>〜</small></p>

<ul>
  <li>〜</li>
  <li><small>〜</small></li>
</ul>

<small>で段落や見出しを囲むような形で使うことはできないので注意しましょう。

👎悪い例

<!-- 🙅-->
<small><p>〜</p></small>

<!-- 🙅-->
<small>
  <ul>
    <li>〜</li>
    <li><small>〜</small></li>
  </ul>
</small>

見栄えを目的として使わない

<small>要素内のテキストは、ブラウザによりデフォルトで小さい文字で表示されます。しかし、<small>はあくまでも「内容的に小さく表示されるべき文章」に対して使うものであり、文字を小さくする目的で使うべきではありません。

文字を小さくしたいだけならCSSを使う

ただ文字を小さくしたい場合にはCSSを使います。

👇たとえば、以下のように<small>タグと同じように「文字サイズを小さくするクラス」をCSSで作っておきます。

CSS 文字サイズを小さくするクラス

.font-small {
  font-size: 0.85em;
}

👇そのクラスをHTMLの小さく表示したい部分に使います。見た目の調整を目的としているのであれば、タグとしての意味を持たない<span>を使うのが良いでしょう。

<p>ただ<span class="font-small">ここ</span>を小さくしたい</p>

.font-small {
  font-size: 0.8em;
}