WEBVTT

1
00:00:00.000 --> 00:00:00.858
こんにちは。

2
00:00:00.858 --> 00:00:04.003
エイチティーエムエル、リファレンス解説です。

3
00:00:04.003 --> 00:00:07.435
HTMLタグ編の二十五本目は、スモールタグです。

4
00:00:07.435 --> 00:00:11.868
スモールは、本文のあとに添える小さな付記を表すためのタグです。

5
00:00:11.868 --> 00:00:16.729
たとえば免責事項、著作権表示、細かな条件や注意書きなどが代表例です。

6
00:00:16.729 --> 00:00:24.021
ブラウザーでは周りの文字より一段小さく表示されますが、目的は見た目を小さくすること自体ではありません。

7
00:00:24.021 --> 00:00:27.810
今回は、どんな文章に使うべきか、使ってはいけない場面、基本の書き方と実例を、

8
00:00:27.810 --> 00:00:31.599
初心者向けに順番に解説します。

9
00:00:31.599 --> 00:00:36.889
小さなタグですが、意味を正しく選ぶことで、読み手に誠実なページになります。

10
00:00:36.889 --> 00:00:39.892
意味から選ぶという考え方を押さえましょう。

11
00:00:39.892 --> 00:00:43.295
まず、どんな場面で使うかを整理しましょう。

12
00:00:43.295 --> 00:00:47.185
一つ目は、ページ下部の著作権表示や免責事項です。

13
00:00:47.185 --> 00:00:52.694
本文の主張ではないけれど、きちんと伝えておきたい情報に向いています。

14
00:00:52.694 --> 00:00:56.098
二つ目は、価格や日程に付く細かな条件です。

15
00:00:56.098 --> 00:01:01.121
たとえば、表示価格は税込みです、といった補足が当てはまります。

16
00:01:01.121 --> 00:01:05.497
三つ目は、写真や文章のライセンス表示、出典の注記です。

17
00:01:05.497 --> 00:01:09.872
共通するのは、どれも本文を補う付記であるという点です。

18
00:01:09.872 --> 00:01:15.707
逆に、本文そのものや、重要なお知らせをスモールに入れるのは避けましょう。

19
00:01:15.707 --> 00:01:22.837
身近なWebページの最下部を思い浮かべると、著作権表示の小さな一行を思い出せるはずです。

20
00:01:22.837 --> 00:01:25.592
付記かどうかが判断の軸になります。

21
00:01:25.592 --> 00:01:26.926
基本の書き方です。

22
00:01:26.926 --> 00:01:32.561
スモールは、開始タグと終了タグの両方を書いて、その間に付記の文章を入れます。

23
00:01:32.561 --> 00:01:36.861
空要素ではないので、終了タグの書き忘れに注意してください。

24
00:01:36.861 --> 00:01:44.719
置く場所は、補足したい文章の近くが基本で、段落の下に単独で置くことも、文章の流れの中で使うこともできます。

25
00:01:44.719 --> 00:01:47.240
この要素に専用の属性はありません。

26
00:01:47.240 --> 00:01:52.281
アイディーやクラスなど、すべての要素で使える共通属性だけで十分です。

27
00:01:52.281 --> 00:01:57.470
書く場所や囲み方を一度覚えてしまえば、あとは文章の意味に集中できます。

28
00:01:57.470 --> 00:02:04.884
ファイルを用意したり、特別な設定をしたりする必要はなく、意味に合う文章を囲むだけで使い始められます。

29
00:02:04.884 --> 00:02:07.141
記事の活用事例を見てみましょう。

30
00:02:07.141 --> 00:02:11.091
本文の、体験会は無料です、という段落のあとに、交通費は各自でご負担ください、

31
00:02:11.091 --> 00:02:15.040
という条件をスモールで添えた例です。

32
00:02:15.040 --> 00:02:20.965
本文だけでは誤解されかねない条件を、小さな付記として補う、まさに典型的な使い方です。

33
00:02:20.965 --> 00:02:25.902
画面では付記が一段小さく表示され、本文と補足の区別が一目で分かります。

34
00:02:25.902 --> 00:02:33.096
練習では、エイチティーエムエルのファイルにこの例を写して保存し、再読み込みして表示を確認してください。

35
00:02:33.096 --> 00:02:38.315
本文と付記の役割分担がはっきりすると、ページ全体の読みやすさも上がります。

36
00:02:38.315 --> 00:02:43.816
条件の文章を変えて、自分のサイトに合う付記を作ってみるのも良い練習になります。

37
00:02:43.816 --> 00:02:48.620
実務で最もよく見る使い方が、フッターの中の著作権表示です。

38
00:02:48.620 --> 00:02:53.010
ページの一番下にあるフッター要素の中にスモールを置き、コピーライト記号、

39
00:02:53.010 --> 00:02:57.399
年、サイト名や運営者名を書きます。

40
00:02:57.399 --> 00:03:04.522
フッター自体がページの補足領域なので、その中の著作権表示も付記として自然に収まります。

41
00:03:04.522 --> 00:03:13.302
ただし、住所や問い合わせ先など、利用者にしっかり読んでほしい情報まで一緒くたに小さくするのは避けましょう。

42
00:03:13.302 --> 00:03:20.094
多くのサイトで採用されている形なので、実際のページで探してみるのも勉強になります。

43
00:03:20.094 --> 00:03:27.548
スモールに入れるのは、あくまで著作権や免責といった付記に絞るのが、読み手に親切な設計です。

44
00:03:27.548 --> 00:03:32.130
スモールは段落の下だけでなく、文章の途中でも使えます。

45
00:03:32.130 --> 00:03:40.615
たとえば参加費の金額のすぐ横に、カッコ書きで税込み、教材費込みといった注記をスモールで添える形です。

46
00:03:40.615 --> 00:03:48.422
補足したい言葉のすぐ近くに置くことで、どの情報への注記なのかが読み手に伝わりやすくなります。

47
00:03:48.422 --> 00:03:53.682
ここでも判断基準は同じで、その文章が本文への付記かどうかです。

48
00:03:53.682 --> 00:04:00.810
価格の条件や対象年齢、開催条件の但し書きなど、本文を支える小さな補足に向いています。

49
00:04:00.810 --> 00:04:06.580
注記の位置が近いほど、読み手は立ち止まらずに本文を読み進められます。

50
00:04:06.580 --> 00:04:13.368
逆に、行の中の言葉をただ目立たなくしたいだけなら、スモールの出番ではありません。

51
00:04:13.368 --> 00:04:15.667
ここが一番大切な注意点です。

52
00:04:15.667 --> 00:04:20.430
スモールは、文字を小さく表示するための道具ではありません。

53
00:04:20.430 --> 00:04:27.821
デザイン上、少し小さく見せたいだけの文章には、シーエスエスのフォントサイズを使いましょう。

54
00:04:27.821 --> 00:04:37.511
また、解約条件や料金の重要な条件など、利用者が必ず読むべき内容を、読めないほど小さな付記に紛れ込ませるのもいけません。

55
00:04:37.511 --> 00:04:42.438
重要な情報は本文として、はっきり読める大きさで書くべきです。

56
00:04:42.438 --> 00:04:50.157
さらに、段落全体やページの大部分をスモールで囲う使い方も、付記という意味から外れてしまいます。

57
00:04:50.157 --> 00:04:56.070
タグの意味とデザインの都合を分けて考える習慣は、他のタグでも役立ちます。

58
00:04:56.070 --> 00:05:00.340
意味が合うかどうかを、使う前に必ず確認してください。

59
00:05:00.340 --> 00:05:01.829
属性を確認します。

60
00:05:01.829 --> 00:05:05.634
スモールには、この要素専用の属性はありません。

61
00:05:05.634 --> 00:05:10.101
使えるのは、すべての要素に共通するグローバル属性です。

62
00:05:10.101 --> 00:05:17.381
アイディーは文書内で一つだけの識別子で、ページ内リンクやスクリプトからの参照に使います。

63
00:05:17.381 --> 00:05:22.676
クラスは、シーエスエスでまとめて見た目を整えたいときに便利です。

64
00:05:22.676 --> 00:05:29.128
ラングは内容の言語を示し、データ属性はアプリ独自の値を保持するために使えます。

65
00:05:29.128 --> 00:05:34.753
ただし、クラスで色や大きさを変えても、要素の意味自体は変わりません。

66
00:05:34.753 --> 00:05:41.040
必要になった場面で少しずつ使えば十分で、最初から全部覚える必要はありません。

67
00:05:41.040 --> 00:05:48.320
見た目の調整はシーエスエス、意味の指定はタグ、という役割分担を忘れないようにしましょう。

68
00:05:48.320 --> 00:05:51.222
注意点と、よくある間違いをまとめます。

69
00:05:51.222 --> 00:05:53.055
一つ目は読みやすさです。

70
00:05:53.055 --> 00:05:57.866
ブラウザーの標準表示でも一段小さくなりますが、シーエスエスでさらに小さくしすぎると、

71
00:05:57.866 --> 00:06:02.678
高齢の方や小さい画面では読めなくなります。

72
00:06:02.678 --> 00:06:04.358
二つ目は重ね掛けです。

73
00:06:04.358 --> 00:06:10.315
スモールの中にさらにスモールを入れると、文字はどんどん小さくなってしまいます。

74
00:06:10.315 --> 00:06:13.064
意図しない入れ子には注意しましょう。

75
00:06:13.064 --> 00:06:14.744
三つ目は確認不足です。

76
00:06:14.744 --> 00:06:22.840
三百二十ピクセル程度の狭い画面や、文字を拡大した状態でも、付記が欠けずに読めるか公開前に確かめてください。

77
00:06:22.840 --> 00:06:27.880
公開前のひと手間の確認が、読み手のつまずきを未然に防いでくれます。

78
00:06:27.880 --> 00:06:32.004
付記だからこそ、必要な人が確実に読めることが大切です。

79
00:06:32.004 --> 00:06:34.122
ブラウザー互換性を確認します。

80
00:06:34.122 --> 00:06:39.630
記事が参照するエムディーエヌの記録では、スモール本体は、クロームが一以降、

81
00:06:39.630 --> 00:06:45.138
エッジが十二以降、ファイアフォックスが一以降、サファリが四以前から対応しています。

82
00:06:45.138 --> 00:06:50.504
非常に古くからすべての主要ブラウザーで使えてきた、安定した要素だと言えます。

83
00:06:50.504 --> 00:06:54.600
そのため、対応を心配して使用を控える必要はほぼありません。

84
00:06:54.600 --> 00:06:59.048
ただし、見た目の小ささの度合いはブラウザーの標準スタイルに任されるため、

85
00:06:59.048 --> 00:07:03.497
厳密なサイズを指定したい場合はシーエスエスで補います。

86
00:07:03.497 --> 00:07:08.439
長く安定して使える要素なので、学習した知識がそのまま実務でも活きます。

87
00:07:08.439 --> 00:07:14.512
モバイル環境でも問題は報告されにくい要素ですが、最終的には実機での表示確認が確実です。

88
00:07:14.512 --> 00:07:16.274
最後に練習とまとめです。

89
00:07:16.274 --> 00:07:21.119
スモールは、免責、著作権、細かな条件といった付記を表すタグでした。

90
00:07:21.119 --> 00:07:23.028
大切なポイントは三つです。

91
00:07:23.028 --> 00:07:28.607
一つ目は、使うかどうかは文字の大きさではなく、付記という意味で判断すること。

92
00:07:28.607 --> 00:07:33.012
二つ目は、ただ小さく見せたいだけならシーエスエスを使うこと。

93
00:07:33.012 --> 00:07:38.298
三つ目は、大切な条件は小さな付記に隠さず、本文でしっかり伝えることです。

94
00:07:38.298 --> 00:07:46.667
練習として、自分のページのフッターに著作権表示をスモールで追加し、本文の下にも条件の付記を一つ添えてみてください。

95
00:07:46.667 --> 00:07:47.989
お疲れさまでした。

96
00:07:47.989 --> 00:07:53.274
ぜひ手元のファイルで一度試して、表示の違いを自分の目で確かめてください。

97
00:07:53.274 --> 00:07:57.092
次回もエイチティーエムエルタグの解説を続けましょう。