HTML『small』はどう使う?初心者向けWebデザインレシピ

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  1
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タグをただ文字を小さくするために使用しないということ。ただ文字を小さくしたい場合はCSSで指定するようにしましょう。

まとめ

今回はsmallタグについてご紹介しました。smallタグは

  • ユーザに注意喚起や免責事項を伝える
  • 本文に注釈や警告を加える
  • その他附随情報を記載する
  • 著作権を明記する

以上4点のために使用される要素だということがわかりました。使用しなくてもページ作成に支障は出ませんが、使用することでより実用的なサイトに近づけることができます。

参考文献:
MDN web docs <small>:附随コメント要素
CODE KITCHEN