SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

HTMLのsmallタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:57動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエル、リファレンス解説です。
  3. 0:04HTMLタグ編の二十五本目は、スモールタグです。
  4. 0:07スモールは、本文のあとに添える小さな付記を表すためのタグです。
  5. 0:11たとえば免責事項、著作権表示、細かな条件や注意書きなどが代表例です。
  6. 0:16ブラウザーでは周りの文字より一段小さく表示されますが、目的は見た目を小さくすること自体ではありません。
  7. 0:24今回は、どんな文章に使うべきか、使ってはいけない場面、基本の書き方と実例を、
  8. 0:27初心者向けに順番に解説します。
  9. 0:31小さなタグですが、意味を正しく選ぶことで、読み手に誠実なページになります。
  10. 0:36意味から選ぶという考え方を押さえましょう。
  11. 0:39まず、どんな場面で使うかを整理しましょう。
  12. 0:43一つ目は、ページ下部の著作権表示や免責事項です。
  13. 0:47本文の主張ではないけれど、きちんと伝えておきたい情報に向いています。
  14. 0:52二つ目は、価格や日程に付く細かな条件です。
  15. 0:56たとえば、表示価格は税込みです、といった補足が当てはまります。
  16. 1:01三つ目は、写真や文章のライセンス表示、出典の注記です。
  17. 1:05共通するのは、どれも本文を補う付記であるという点です。
  18. 1:09逆に、本文そのものや、重要なお知らせをスモールに入れるのは避けましょう。
  19. 1:15身近なWebページの最下部を思い浮かべると、著作権表示の小さな一行を思い出せるはずです。
  20. 1:22付記かどうかが判断の軸になります。
  21. 1:25基本の書き方です。
  22. 1:26スモールは、開始タグと終了タグの両方を書いて、その間に付記の文章を入れます。
  23. 1:32空要素ではないので、終了タグの書き忘れに注意してください。
  24. 1:36置く場所は、補足したい文章の近くが基本で、段落の下に単独で置くことも、文章の流れの中で使うこともできます。
  25. 1:44この要素に専用の属性はありません。
  26. 1:47アイディーやクラスなど、すべての要素で使える共通属性だけで十分です。
  27. 1:52書く場所や囲み方を一度覚えてしまえば、あとは文章の意味に集中できます。
  28. 1:57ファイルを用意したり、特別な設定をしたりする必要はなく、意味に合う文章を囲むだけで使い始められます。
  29. 2:04記事の活用事例を見てみましょう。
  30. 2:07本文の、体験会は無料です、という段落のあとに、交通費は各自でご負担ください、
  31. 2:11という条件をスモールで添えた例です。
  32. 2:15本文だけでは誤解されかねない条件を、小さな付記として補う、まさに典型的な使い方です。
  33. 2:20画面では付記が一段小さく表示され、本文と補足の区別が一目で分かります。
  34. 2:25練習では、エイチティーエムエルのファイルにこの例を写して保存し、再読み込みして表示を確認してください。
  35. 2:33本文と付記の役割分担がはっきりすると、ページ全体の読みやすさも上がります。
  36. 2:38条件の文章を変えて、自分のサイトに合う付記を作ってみるのも良い練習になります。
  37. 2:43実務で最もよく見る使い方が、フッターの中の著作権表示です。
  38. 2:48ページの一番下にあるフッター要素の中にスモールを置き、コピーライト記号、
  39. 2:53年、サイト名や運営者名を書きます。
  40. 2:57フッター自体がページの補足領域なので、その中の著作権表示も付記として自然に収まります。
  41. 3:04ただし、住所や問い合わせ先など、利用者にしっかり読んでほしい情報まで一緒くたに小さくするのは避けましょう。
  42. 3:13多くのサイトで採用されている形なので、実際のページで探してみるのも勉強になります。
  43. 3:20スモールに入れるのは、あくまで著作権や免責といった付記に絞るのが、読み手に親切な設計です。
  44. 3:27スモールは段落の下だけでなく、文章の途中でも使えます。
  45. 3:32たとえば参加費の金額のすぐ横に、カッコ書きで税込み、教材費込みといった注記をスモールで添える形です。
  46. 3:40補足したい言葉のすぐ近くに置くことで、どの情報への注記なのかが読み手に伝わりやすくなります。
  47. 3:48ここでも判断基準は同じで、その文章が本文への付記かどうかです。
  48. 3:53価格の条件や対象年齢、開催条件の但し書きなど、本文を支える小さな補足に向いています。
  49. 4:00注記の位置が近いほど、読み手は立ち止まらずに本文を読み進められます。
  50. 4:06逆に、行の中の言葉をただ目立たなくしたいだけなら、スモールの出番ではありません。
  51. 4:13ここが一番大切な注意点です。
  52. 4:15スモールは、文字を小さく表示するための道具ではありません。
  53. 4:20デザイン上、少し小さく見せたいだけの文章には、シーエスエスのフォントサイズを使いましょう。
  54. 4:27また、解約条件や料金の重要な条件など、利用者が必ず読むべき内容を、読めないほど小さな付記に紛れ込ませるのもいけません。
  55. 4:37重要な情報は本文として、はっきり読める大きさで書くべきです。
  56. 4:42さらに、段落全体やページの大部分をスモールで囲う使い方も、付記という意味から外れてしまいます。
  57. 4:50タグの意味とデザインの都合を分けて考える習慣は、他のタグでも役立ちます。
  58. 4:56意味が合うかどうかを、使う前に必ず確認してください。
  59. 5:00属性を確認します。
  60. 5:01スモールには、この要素専用の属性はありません。
  61. 5:05使えるのは、すべての要素に共通するグローバル属性です。
  62. 5:10アイディーは文書内で一つだけの識別子で、ページ内リンクやスクリプトからの参照に使います。
  63. 5:17クラスは、シーエスエスでまとめて見た目を整えたいときに便利です。
  64. 5:22ラングは内容の言語を示し、データ属性はアプリ独自の値を保持するために使えます。
  65. 5:29ただし、クラスで色や大きさを変えても、要素の意味自体は変わりません。
  66. 5:34必要になった場面で少しずつ使えば十分で、最初から全部覚える必要はありません。
  67. 5:41見た目の調整はシーエスエス、意味の指定はタグ、という役割分担を忘れないようにしましょう。
  68. 5:48注意点と、よくある間違いをまとめます。
  69. 5:51一つ目は読みやすさです。
  70. 5:53ブラウザーの標準表示でも一段小さくなりますが、シーエスエスでさらに小さくしすぎると、
  71. 5:57高齢の方や小さい画面では読めなくなります。
  72. 6:02二つ目は重ね掛けです。
  73. 6:04スモールの中にさらにスモールを入れると、文字はどんどん小さくなってしまいます。
  74. 6:10意図しない入れ子には注意しましょう。
  75. 6:13三つ目は確認不足です。
  76. 6:14三百二十ピクセル程度の狭い画面や、文字を拡大した状態でも、付記が欠けずに読めるか公開前に確かめてください。
  77. 6:22公開前のひと手間の確認が、読み手のつまずきを未然に防いでくれます。
  78. 6:27付記だからこそ、必要な人が確実に読めることが大切です。
  79. 6:32ブラウザー互換性を確認します。
  80. 6:34記事が参照するエムディーエヌの記録では、スモール本体は、クロームが一以降、
  81. 6:39エッジが十二以降、ファイアフォックスが一以降、サファリが四以前から対応しています。
  82. 6:45非常に古くからすべての主要ブラウザーで使えてきた、安定した要素だと言えます。
  83. 6:50そのため、対応を心配して使用を控える必要はほぼありません。
  84. 6:54ただし、見た目の小ささの度合いはブラウザーの標準スタイルに任されるため、
  85. 6:59厳密なサイズを指定したい場合はシーエスエスで補います。
  86. 7:03長く安定して使える要素なので、学習した知識がそのまま実務でも活きます。
  87. 7:08モバイル環境でも問題は報告されにくい要素ですが、最終的には実機での表示確認が確実です。
  88. 7:14最後に練習とまとめです。
  89. 7:16スモールは、免責、著作権、細かな条件といった付記を表すタグでした。
  90. 7:21大切なポイントは三つです。
  91. 7:23一つ目は、使うかどうかは文字の大きさではなく、付記という意味で判断すること。
  92. 7:28二つ目は、ただ小さく見せたいだけならシーエスエスを使うこと。
  93. 7:33三つ目は、大切な条件は小さな付記に隠さず、本文でしっかり伝えることです。
  94. 7:38練習として、自分のページのフッターに著作権表示をスモールで追加し、本文の下にも条件の付記を一つ添えてみてください。
  95. 7:46お疲れさまでした。
  96. 7:47ぜひ手元のファイルで一度試して、表示の違いを自分の目で確かめてください。
  97. 7:53次回もエイチティーエムエルタグの解説を続けましょう。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

smallタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。免責や著作権などの付記。小さい文字すべてに使うものではありません。

解説記事・サンプルコードを読む：HTMLのsmallタグとは？属性・使い方・ブラウザー互換性と活用例 →