【smallタグ】テキストの一部小さく表示してみよう「HTML・解説・初心者向け」- ノブレコ
nobreco
★<smalll>タグの特徴
・タグのカテゴリ ―― インライン要素。
・コンテンツモデル ―― フローコンテンツ・フレージングコンテンツ・パルパブルコンテンツ。
・タグの省略 ―― 不可。（開始タグと終了タグが必要）
・使用可能な親要素 ―― フローコンテンツ・フレージングコンテンツを許容するすべての親要素。
・グローバル属性のみを持つ。
・ARIAロール ―― 標準でのARIAロールはなし。
<small>の説明
■<small>タグとは
テキストの文字を一段階小さくして表示するためのタグです。
例えば下記リストのコメントを表示する場合などに使用します。
使用する副次的なテキストの種類
- 補足説明
- 免責事項
- 著作権表示（コピーライト）
- 法的な注意書き
- 警告や注釈
※ このリストの中でよく使用するのは、フッターのコピーライトで文字を小さく表示するような場合くらいです。
■見た目のためだけに使わない
この要素は、テキストを小さく見せるためのものではなく、あくまで意味的にコンテンツを小さく表示するものですので間違えないように注意しましょう。
エンベット方式やリンク方式のCSSで、文字だけを小さく見せたいのでしたら、セレクタ｛ font-size: ○○;｝で、値の○○文字サイズを指定しましょう。
またインライン方式でCSSを指定する場合は、<span>要素を使って、開始タグ内にclass属性を使用して装飾します。
使用上の注意点
① 長文には使用しない。
あくまで副次的（サブ）で短い内容に対して使用するものです。
段落ちを複数使って表示するのもなどは主題になる可能性がありますので、そういった長文には使用しないようにしましょう。
② テキストの強弱を付けるタグではない。
文字が小さくなるからといって、そのテキストの意味が弱まるものではありません。むしろ<em>要素や<strong>要素と併用して強調や重要性を付与することはできます。
③ 文字を小さく見せるためだけに使わない。
この場合は、前述したCSSなどで装飾しましょう。
コピーライトを表示するときなどしか使用機会がないかもしれません。なるべくCSSで文字サイズを調整するようにしておいたほうがよいでしょう。
内容モデル
<small>要素の内容モデルは「phrasing」です。
フレージングコンテンツを内包できますので、<em>や<strong>などで強調や重要性といった意味を持たせて表示することも可能です。
アクセシビリティでの注意点
<small>要素は標準でARIAロールを持っていません。
スクリーンリーダーなどで特別な読み上げをされるようなことはありません。
<small>の記述例
■シンプルな使い方の例
★HTML
★実行結果
上記のように、補足内容を小さく表示したい場合などにも使えます。
さらに小さく表示したいときは、<small>要素の中に同じ<small>を使って囲みます。
この使い方は、コピーライトで使うのと同じくらい一般的なことです。
■フッターのコピーライトで使用する例
★HTML
★実行結果
サイトの下部に配置するフッター部分でよく見かける©（コピーライトマーク）です。
著作権を表示するもので、小さく表示されているのを見かけたこともあると思いますが、このように<small>タグを使って表示することがほとんどです。
この例では、左から「コピーライトマーク」「著作物の発行年」「著作者名」という３つの最低限必要な情報で記述しています。
ちなみに、HTMLで©を記述する際は「©」と記述します。
まとめ
この記事では、<small>タグの解説をいたしました。
このタグは文字の見た目が小さくなりますが、文字を小さく表示するためのもではありません。
その文字の意味を補足やサブ的なものとして小さくするといった役割がありますので、くれぐれも文字を小さくする目的で使用しないようにしましょう。
また使う頻度として、フッター部分のコピーライトを表示するという程度ではないかと思います。
仮に©以外の用途で、小さく補足情報や注釈などを入れたいときはCSSで代替できますので、そちらを使ってスタイルを変更しましょう。
この記事が少しでも皆さんのお役に立てれば幸いです。
最後読んでいただき、ありがとうございました。またなん(ˉ﹃ˉ)
