WEBVTT

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

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

3
00:00:03.968 --> 00:00:07.228
HTMLタグ編の二十三本目は、スパンタグです。

4
00:00:07.228 --> 00:00:11.905
スパンは、文章の中の一部分を囲むための、とてもシンプルなタグです。

5
00:00:11.905 --> 00:00:17.432
前回学んだストロングと違い、スパン自体には重要といった特別な意味はありません。

6
00:00:17.432 --> 00:00:22.322
その代わり、意味がないからこそ使い道が広く、文の一部だけにシーエスエスを当てたり、

7
00:00:22.322 --> 00:00:27.211
ジャバスクリプトで書き換えたりする目印として活躍します。

8
00:00:27.211 --> 00:00:34.297
今回は、使いどころ、基本の書き方、記事のコード例、ディブとの違いまで、初心者向けに順番に解説します。

9
00:00:34.297 --> 00:00:40.108
目印を付けるという発想は、この後の学習でも何度も登場する、とても大切な考え方です。

10
00:00:40.108 --> 00:00:43.340
まず、どんな場面で使うかを整理しましょう。

11
00:00:43.340 --> 00:00:48.880
たとえば、文章の中で数字だけを目立たせたいとき、商品名の一部だけ色を変えたいとき、

12
00:00:48.880 --> 00:00:54.420
在庫数や価格のように後から数字が変わる部分を分けたいときです。

13
00:00:54.420 --> 00:00:59.499
ポイントは、意味を持つタグが合わない場合の受け皿だということです。

14
00:00:59.499 --> 00:01:03.961
重要な言葉ならストロング、引用なら別のタグが向いています。

15
00:01:03.961 --> 00:01:07.809
どれも当てはまらないけれど、範囲だけは指定したい。

16
00:01:07.809 --> 00:01:10.271
そんなときにスパンが役立ちます。

17
00:01:10.271 --> 00:01:14.272
逆に、範囲指定の目的がないのに使う必要はありません。

18
00:01:14.272 --> 00:01:21.813
身の回りの商品ページや申込みページを思い浮かべると、数字だけ色が違う表示に心当たりがあるはずです。

19
00:01:21.813 --> 00:01:23.265
基本の書き方です。

20
00:01:23.265 --> 00:01:29.236
スパンは開始タグと終了タグを明示し、その間に、対象にしたい文字を入れます。

21
00:01:29.236 --> 00:01:33.915
段落や見出しといった文章の中で、部分的に使うのが基本です。

22
00:01:33.915 --> 00:01:39.724
スパンで囲んでも、ブラウザーの表示は基本的に変わらず、改行もされません。

23
00:01:39.724 --> 00:01:44.887
これはスパンがインライン要素で、行の中に溶け込む性質だからです。

24
00:01:44.887 --> 00:01:50.696
コード例のように、文章の流れを崩さずに、一部分だけを囲めるのが特徴です。

25
00:01:50.696 --> 00:01:56.344
保存後に再読み込みし、文章が不自然に途切れていないか確認してください。

26
00:01:56.344 --> 00:02:03.121
タグで囲むという操作自体はシンプルなので、まずは一文だけ練習すると感覚がつかめます。

27
00:02:03.121 --> 00:02:05.903
記事の活用事例を見てみましょう。

28
00:02:05.903 --> 00:02:14.770
例は、残り三席です、という一文で、数字の三だけをスパンで囲み、リメイニングというクラスを付けています。

29
00:02:14.770 --> 00:02:17.726
なぜ数字だけを分けるのでしょうか。

30
00:02:17.726 --> 00:02:24.333
席数は申込みがあるたびに変わる情報なので、独立させておくと、シーエスエスで色を付けて目立たせたり、

31
00:02:24.333 --> 00:02:30.939
プログラムで数字だけを更新したりしやすくなるからです。

32
00:02:30.939 --> 00:02:34.938
文章全体ではなく、変化する部分だけを切り出す。

33
00:02:34.938 --> 00:02:38.589
この考え方が、スパンの活用事例の核心です。

34
00:02:38.589 --> 00:02:44.153
練習用ファイルに写して、開発者ツールで構造を確認してみましょう。

35
00:02:44.153 --> 00:02:51.977
席数だけでなく、割引率や残り時間など、変わりやすい数字ほど、この分け方が効果を発揮します。

36
00:02:51.977 --> 00:02:54.470
シーエスエスと組み合わせる使い方です。

37
00:02:54.470 --> 00:02:58.734
スパン自体には見た目の指定がありませんが、クラスを目印にすれば、その部分だけ色を変えたり、

38
00:02:58.734 --> 00:03:02.998
太字にしたり、背景色を付けたりできます。

39
00:03:02.998 --> 00:03:07.590
コード例では、リメイニングというクラスに、赤色と太字を指定しています。

40
00:03:07.590 --> 00:03:13.494
同じクラスを付ければ、ページ内の複数の場所に同じ装飾をまとめて当てられるのも便利な点です。

41
00:03:13.494 --> 00:03:17.955
ただし、見た目が変わっても、スパンの意味が増えるわけではありません。

42
00:03:17.955 --> 00:03:21.498
装飾はシーエスエス、意味はタグ、と分けて考えましょう。

43
00:03:21.498 --> 00:03:26.877
クラス名は、後から見ても役割が分かる名前を付けておくと、修正するときに迷いません。

44
00:03:26.877 --> 00:03:30.162
ジャバスクリプトとの組み合わせも紹介します。

45
00:03:30.162 --> 00:03:37.181
スパンにアイディーを付けておくと、プログラムからその部分だけを探して、文字を書き換えられます。

46
00:03:37.181 --> 00:03:41.960
コード例では、残り席数の数字を、三から二へ更新するイメージです。

47
00:03:41.960 --> 00:03:48.979
在庫表示やタイマーの数字など、変わる部分だけをスパンで切り出す設計は、実務でもよく使われます。

48
00:03:48.979 --> 00:03:54.505
なお、記事も触れているように、スパン自体に結果を通知する機能はありません。

49
00:03:54.505 --> 00:04:02.867
大切な変化を利用者へ知らせる場合は、アウトプットやライブ領域といった、通知向けの仕組みも併せて検討してください。

50
00:04:02.867 --> 00:04:09.289
更新の対象を小さく分けておくほど、プログラムもシンプルで、間違いが起きにくくなります。

51
00:04:09.289 --> 00:04:11.185
スパンの属性を整理します。

52
00:04:11.185 --> 00:04:14.685
この要素には、必須となる専用の属性はありません。

53
00:04:14.685 --> 00:04:22.123
必要に応じて、アイディー、クラス、ラング、データ属性といった、どの要素にも使える共通属性を利用します。

54
00:04:22.123 --> 00:04:26.206
アイディーは文書内で一意な目印に、クラスは複数要素をまとめて選ぶときに、

55
00:04:26.206 --> 00:04:30.290
ラングは内容の言語を示すときに使います。

56
00:04:30.290 --> 00:04:36.415
データ属性は、画面には見せない補助的な値を、プログラム用に持たせたいときに便利です。

57
00:04:36.415 --> 00:04:40.426
属性をたくさん付けることが目的ではないので、装飾や更新といった目的があるときだけ、

58
00:04:40.426 --> 00:04:44.436
必要なものを選んでください。

59
00:04:44.436 --> 00:04:51.291
特にクラスとアイディーの違いは、複数をまとめるか、一つだけか、という点で覚えると整理できます。

60
00:04:51.291 --> 00:04:54.584
間違えやすい、ディブなどとの違いを押さえましょう。

61
00:04:54.584 --> 00:04:58.405
ディブとスパンは、どちらも意味を持たない汎用的な要素です。

62
00:04:58.405 --> 00:05:05.782
違いは大きさで、ディブは段落のようなまとまり全体を囲むブロック要素、スパンは文の一部分を囲むインライン要素です。

63
00:05:05.782 --> 00:05:10.393
一方、ストロングやイーエム、タイムなどは、それぞれ意味を持つタグです。

64
00:05:10.393 --> 00:05:15.399
囲みたい内容に合う意味のあるタグがある場合は、そちらを優先し、意味のあるタグがなく範囲だけ指定したいときにスパンを使う、

65
00:05:15.399 --> 00:05:20.405
という順番で考えると迷いません。

66
00:05:20.405 --> 00:05:26.070
この優先順位を守ると、読み上げソフトや検索エンジンにも、内容の意味が正しく伝わります。

67
00:05:26.070 --> 00:05:28.930
注意点と、よくある間違いを確認します。

68
00:05:28.930 --> 00:05:33.296
一つ目は、目的もなく文章のあちこちをスパンで囲むことです。

69
00:05:33.296 --> 00:05:37.962
目印だらけのコードは読みにくく、後からの修正も大変になります。

70
00:05:37.962 --> 00:05:41.575
二つ目は、見出しや段落の代わりに使う間違いです。

71
00:05:41.575 --> 00:05:46.693
スパンは文の一部専用なので、文書の構造は見出しや段落で作りましょう。

72
00:05:46.693 --> 00:05:49.252
三つ目は、終了タグの書き忘れです。

73
00:05:49.252 --> 00:05:55.876
囲む範囲が意図せず広がってしまうので、開始と終了は必ず対になっているか確認してください。

74
00:05:55.876 --> 00:05:59.338
狭い画面で表示が崩れないか見る習慣も大切です。

75
00:05:59.338 --> 00:06:05.510
公開前にコードを一度読み返し、本当に必要なスパンだけが残っているか見直しましょう。

76
00:06:05.510 --> 00:06:07.632
ブラウザー互換性を確認します。

77
00:06:07.632 --> 00:06:13.007
記事が参照するエムディーエヌの記録では、スパン本体は、クロームが一以降、

78
00:06:13.007 --> 00:06:18.382
エッジが十二以降、ファイアフォックスが一以降、サファリが一以降で対応しています。

79
00:06:18.382 --> 00:06:22.201
対応開始の数字がとても小さいことから分かる通り、昔からある基本の要素なので、

80
00:06:22.201 --> 00:06:26.020
現在の環境では安心して使えます。

81
00:06:26.020 --> 00:06:34.224
ただし、これは要素本体の対応開始の記録であり、シーエスエスやスクリプトの細かな動作までを保証するものではありません。

82
00:06:34.224 --> 00:06:40.165
大切なページでは、スマートフォンなど、利用対象の実機でも表示を確認しておきましょう。

83
00:06:40.165 --> 00:06:46.530
互換性を気にせず使える土台があるからこそ、まずは基本の書き方を正確に覚えることが大切です。

84
00:06:46.530 --> 00:06:48.150
最後に練習とまとめです。

85
00:06:48.150 --> 00:06:53.550
スパンは、特別な意味を持たず、文の一部を装飾や更新の対象にするためのタグでした。

86
00:06:53.550 --> 00:06:55.305
大切なポイントは三つです。

87
00:06:55.305 --> 00:06:59.759
一つ目は、意味のあるタグが合わないときに、範囲指定として使うこと。

88
00:06:59.759 --> 00:07:05.294
二つ目は、クラスやアイディーが、シーエスエスやジャバスクリプトへの目印になること。

89
00:07:05.294 --> 00:07:10.424
三つ目は、ブロック全体ならディブ、文の一部ならスパン、と使い分けることです。

90
00:07:10.424 --> 00:07:18.388
練習として、在庫数や残り席数のような変わる数字を一つスパンで囲み、クラスで色を付けてブラウザーで確認してみてください。

91
00:07:18.388 --> 00:07:19.603
お疲れさまでした。

92
00:07:19.603 --> 00:07:22.438
次回も、HTMLタグの解説を続けましょう。

93
00:07:22.438 --> 00:07:27.838
小さな練習を一つ終えるだけでも、タグの役割が頭の中ではっきり整理されていきます。