HTMLを学習中の皆さんは『smallタグ』をご存じですか？smallタグは使用することで、HTML内の文字を小さできるタグですが、実際にどのように使われているのでしょうか。
smallタグはどんな場面で使うの？
今回は、smallタグの
・基本的な使い方
・実際にsmallタグの実用的な使用方法
について説明します。この記事で、smallタグの使い方について基本から応用まで徹底的に学びましょう。
目次
smallタグとは
smallタグの読み方
smallタグは『スモールタグ』と読みます。
smallタグの説明
smallタグは、多くのサイトで注意事項や免責、著作権表示など、本文としては相応しくないが、情報として本文に付け加えたい時に使用されています。
smallタグを使用することで、<small></small>で囲われた文章は小さく表示されるため、ユーザに本文とは別の付帯情報であることを示すことができます。
smallタグで利用できる属性
smallタグではグローバル属性以外に、使用できる属性はありません。ここではよく使用されるグローバル属性のみを掲載しています。
| 属性 | 説明 |
|---|---|
| accesskey属性 | キーボードのショートカットの生成し、簡易なアクセスを可能にする |
| class属性 | 要素に任意の名称を与える（同じclass名を複数の要素に与えられる） |
| dir属性 | テキストの書字方向を示す ・ltr：「left to right」左から右 ・rtl：「rght to left」右から左 ・auto：自動的に書字方向を決定する |
| hidden属性 | 要素に関連性がないことを示す |
| id属性 | 要素に任意の名称を与える（同じidは使用できない：一意） |
| lang属性 | 要素の言語を定義する |
| style属性 | 要素にCSSスタイル宣言を適用する |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 12 |
| Firefox | １ |
| nternet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 4 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
smallタグの基本的な使い方
smallタグの使い方
smallタグは注意事項や、警告、法的事項の追記、著作権などの表示に使用されます。
See the Pen
oNLybvo by rabbittyu (@rabbittyu)
on CodePen.
著作権表示の場合は「copyrignt」の©を一番先頭に表示し、HTMLのフッター内に記載されるのが一般的です。ここではCSSでテキストの配置を中央寄せにしています。
See the Pen
dyXKGKg by rabbittyu (@rabbittyu)
on CodePen.
smallタグの応用的な使い方
上記で紹介した以外にも、smallタグは使われています。例えば税込みか税抜きかを明記したい時、括弧内に記載しますが、その括弧を小さくすることもsmallで行えます。
See the Pen
PozaZyY by rabbittyu (@rabbittyu)
on CodePen.
まとめ
今回はsmallタグについてご紹介しました。smallタグは
- ユーザに注意喚起や免責事項を伝える
- 本文に注釈や警告を加える
- その他附随情報を記載する
- 著作権を明記する
以上4点のために使用される要素だということがわかりました。使用しなくてもページ作成に支障は出ませんが、使用することでより実用的なサイトに近づけることができます。
参考文献：
MDN web docs <small>:附随コメント要素
CODE KITCHEN
