<small>

細目のような注釈を表す

HTML4.01〜HTML5 ~ 利用可能

最終更新日: 2020.04.11

どんなタグ?
著作権などの注釈や細目を表す場合に
この<small>タグを使う

コードサンプル
<footer>
  <p>
    <small>© Shibajuku All Rights Reserved.</small>
  </p>
</footer>
  
small要素は <small></small> タグで挟んだ範囲が著作権などの注釈や細目であることを示します。 HTML4.01ではテキストを小さく表示する要素でしたがHTML5では意味が変更されています。 具体的には、メインコンテンツではなく、注釈や細目などの短いテキストを<small>タグで挟みます。
どのカテゴリに属しているの?
small要素は フロー・コンテンツと、フレージング・コンテンツというコンテンツ・カテゴリに属しているタグです。
梱包できるタグは?
smaillタグに梱包できる要素コンテンツ・モデルは、フレージングコンテンツです。
つまり、フレージングコンテンツというカテゴリに属しているタグなら梱包可能です。

teru 使うの忘れがちなタグです。

どうやって使うの?
フッター等に記載される著作権表記や
注釈のテキストを、 <small>タグで挟むだけ。

small要素はメインコンテンツ以外の注釈や細目などの短いテキストなどを <small></small> で挟むだけです。
使い方
<small>著作権表記や注釈や細目</small>
コードサンプル
<footer>
  <address>
    〒XXX-XXXX 大阪市XX区 Shibajuku酒場
  </address>
  <p>
    <small>© Shibajuku All Rights Reserved.</small>
  </p>
</footer>
ブラウザでの表示例
https://codehero.shibajuku.net/html/small/sample01/
どこでも使えるの?
small要素は フロー・コンテンツもしくはフレージング・コンテンツが配置できるところならどこでも使えます。
気をつけることは?
small要素は、あくまで注釈や著作権表記など短いテキストに使用するもので、メインコンテンツや長いテキストで使用するものではないので注意して下さい。

teru 注釈や著作権表記等の細目を伝えるためのタグです。

使える属性は?
グローバル属性のみ使えます。

<small> タグには、どの要素にでも使えるグローバル属性のみ使えます。

teru 使えるのはグローバル属性のみです。

サンプルが見たい
<small>タグを使ったサンプルを
紹介。

<small>タグを使ったサンプルを紹介します。

基本的な<small>タグのサンプル

コードサンプル
<footer>
  <address>
    詳細情報はお電話にて、お問い合わせ下さい。<br>
    Tel XX-XXXX-XXXX 営業時間 10:00-20:00<br>
  </address>
  <p>
    <small>© Shibajuku All Rights Reserved.</small>
  </p>
</footer>
ブラウザでの表示例
https://codehero.shibajuku.net/html/small/sample02/

teru フッターのコピーライト表記によく使います。

デフォルトスタイルは?
フォントサイズが親要素より
1段階小さいサイズになっている。

フォントサイズが、デフォルトスタイルにより
親要素より1段階小さいサイズ(smaller)になります。 具体的には、下記のCSSと同等のスタイルが適用されます。

small要素のデフォルトスタイル
small {
  font-size: smaller;
}
CSS

teru デザインに合わせた文字サイズの指定が必要です。

対応ブラウザは?
基本的にどのブラウザでも大丈夫。

<small>タグは主に以下のブラウザが対応しています。

Internet Explorar
Internet Explorar 有り
Edge
Edge 有り
Google Chrome
Google Chrome 有り
Firefox
Firefox 有り
Safari
Safari 有り
Opera
Opera 有り

teru どのブラウザでも問題ありません。

このリファレンスを書いた人

TERU

TERU

フリーランスのWEBエンジニア。 インフラSE10年→ITベンチャーへ転職→1年後にフリーランス(2019年8月~) WordPress、Shopifyを中心にサイト制作を行っています。 今はフリーランスチームでの活動に注力してます。

About サロンメンバーで作った
リファレンスサイト

Shibajuku

Webのスキルを
ワイワイ学んで、
ガンガン活用
するサロン。

このサイトはWebクリエーター養成所
「Shibajuku」のメンバーが作った、
初心者でもわかりやすいHTML + CSSのリファレンスサイトです。

このサイトについて