WEBVTT

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

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

3
00:00:04.518 --> 00:00:09.203
エイチティーエムエルタグ編の九十四本目は、コルタグです。

4
00:00:09.203 --> 00:00:12.048
コルは、表の中の列を表す要素です。

5
00:00:12.048 --> 00:00:19.912
前回扱ったコルグループが列のまとまり全体を表すのに対して、コルはその中の一列一列に対応します。

6
00:00:19.912 --> 00:00:26.605
表の縦方向、つまり列単位で背景や幅などの設定をまとめたいときに使うのがコルです。

7
00:00:26.605 --> 00:00:31.346
今回は、コルグループとの関係、スパン属性の使い方、空要素としての書き方、

8
00:00:31.346 --> 00:00:36.087
コード例、ブラウザー互換性、そして列に効くスタイルと効かないスタイルの違いまで、

9
00:00:36.087 --> 00:00:40.828
順番に確認します。

10
00:00:40.828 --> 00:00:44.032
まず、コルグループとの関係を整理します。

11
00:00:44.032 --> 00:00:51.722
コルグループが列のグループ全体を表す親要素で、その中に置くコルが、一列ずつに対応する子要素です。

12
00:00:51.722 --> 00:00:58.611
画面の例では、二つのコルが並んでいて、一つ目が名前の列、二つ目が価格の列に対応します。

13
00:00:58.611 --> 00:01:05.020
コルは左の列から順番に対応していくため、並べる順番がそのまま列の順番になります。

14
00:01:05.020 --> 00:01:10.467
コルにクラスを付ければ、列ごとに異なる設定を持たせることもできます。

15
00:01:10.467 --> 00:01:14.632
この親子の関係が、表の列を扱うときの基本になります。

16
00:01:14.632 --> 00:01:20.720
コル単体では意味を持たず、必ずコルグループの中で使う点も覚えておきましょう。

17
00:01:20.720 --> 00:01:23.805
コルの書き方と配置ルールを確認します。

18
00:01:23.805 --> 00:01:25.266
コルは空要素です。

19
00:01:25.266 --> 00:01:30.138
終了タグであるスラッシュ付きコルや、内側の本文は書きません。

20
00:01:30.138 --> 00:01:33.060
開始タグだけで完結するのが特徴です。

21
00:01:33.060 --> 00:01:35.496
置く場所にも決まりがあります。

22
00:01:35.496 --> 00:01:41.829
コルはコルグループの子として、テーブルの直下にあるコルグループの中に置きます。

23
00:01:41.829 --> 00:01:48.973
そして、そのコルグループ自体は、キャプションの後、見出し行や本体行が始まる前に置きます。

24
00:01:48.973 --> 00:01:53.844
つまり、表の行が始まる前に、列の設計図を先に宣言する形です。

25
00:01:53.844 --> 00:01:59.040
順番を間違えると、ブラウザーが構造を補正して意図しない表示になることがあるため、

26
00:01:59.040 --> 00:02:04.236
開発者ツールで位置を確認する習慣を付けましょう。

27
00:02:04.236 --> 00:02:06.514
コルの主な属性が、スパンです。

28
00:02:06.514 --> 00:02:11.223
スパンは、このコルが対象にする列の数を、正の整数で指定します。

29
00:02:11.223 --> 00:02:16.690
たとえば、スパンに二と書けば、その一つのコルが二列分をまとめて扱います。

30
00:02:16.690 --> 00:02:23.677
同じ背景や幅を隣り合う複数列に付けたいとき、コルを何度も繰り返し書かずに済む便利な指定です。

31
00:02:23.677 --> 00:02:27.474
画面の例では、最初のコルがスパン二で二列を担当し、次のコルが一列を担当して、

32
00:02:27.474 --> 00:02:31.271
合計三列の表になります。

33
00:02:31.271 --> 00:02:34.309
ゼロや負の数、マイナスの値は使えません。

34
00:02:34.309 --> 00:02:40.384
列数が変わったら、スパンの合計と実際の列数が合っているか、必ず見直してください。

35
00:02:40.384 --> 00:02:42.776
基本のコード例を見ていきます。

36
00:02:42.776 --> 00:02:47.321
三列の表を例に、コルグループの中に三つのコルを並べ、それぞれにラベル、バリュー、

37
00:02:47.321 --> 00:02:51.867
ノートというクラスを付けています。

38
00:02:51.867 --> 00:02:57.767
一列目、二列目、三列目という対応が、コードを読むだけで分かるのが利点です。

39
00:02:57.767 --> 00:03:02.871
実際の背景色や列幅は、シーエスエス側でクラスを選んで指定します。

40
00:03:02.871 --> 00:03:11.164
これにより、エイチティーエムエルは列の構造を、シーエスエスは見た目を担当するという分担がはっきりします。

41
00:03:11.164 --> 00:03:18.500
行の内容であるティーボディは、コルグループの後に書くという順番も、あわせて確認してください。

42
00:03:18.500 --> 00:03:21.085
記事の活用事例を読み解きます。

43
00:03:21.085 --> 00:03:24.877
目的は、複数列へ共通の列設定を行うことです。

44
00:03:24.877 --> 00:03:33.322
例では、コルグループの中に、スパンが二のコルを一つだけ置き、スタイルで淡い背景色を指定しています。

45
00:03:33.322 --> 00:03:37.803
これで、最初の二列全体に同じ背景がまとめて付きます。

46
00:03:37.803 --> 00:03:46.075
もしコルを使わなければ、その二列のセル一つひとつに、同じ背景を繰り返し指定しなければなりません。

47
00:03:46.075 --> 00:03:49.177
行が増えるほど手間もミスも増えます。

48
00:03:49.177 --> 00:03:55.554
列の定義を一か所に集めておけば、色を変えたいときも一か所の修正で済みます。

49
00:03:55.554 --> 00:04:00.552
表の見た目を列単位で管理したいときの、代表的な使い方です。

50
00:04:00.552 --> 00:04:04.420
ここが、コルで最もつまずきやすいポイントです。

51
00:04:04.420 --> 00:04:10.307
コルに指定しても、すべてのシーエスエスがセルに効くわけではありません。

52
00:04:10.307 --> 00:04:18.717
一般に、列に対して効くのは、背景、幅、枠線、そしてビジビリティで列を折りたたむ指定などに限られます。

53
00:04:18.717 --> 00:04:23.679
一方で、文字の色やフォント、テキストアラインのような文字揃えの指定をコルに書いても、

54
00:04:23.679 --> 00:04:28.641
そのままセルへ効くとは限りません。

55
00:04:28.641 --> 00:04:37.891
記事でも、文字揃えなど列で効かない指定は、ティーエイチやティーディーへセレクターで適用するよう案内しています。

56
00:04:37.891 --> 00:04:45.460
文字の見た目はセル側で指定する、列では背景と幅を扱う、と役割を分けて考えると混乱しません。

57
00:04:45.460 --> 00:04:49.157
コルグループのスパンとの使い分けも確認します。

58
00:04:49.157 --> 00:04:52.050
列を表す方法は大きく二通りあります。

59
00:04:52.050 --> 00:05:00.729
一つは、今回の主役であるコルを列の数だけ並べる方法で、列ごとにクラスやスタイルを変えたいときに適しています。

60
00:05:00.729 --> 00:05:06.515
もう一つは、コルを使わず、コルグループのスパンだけで列数を表す方法です。

61
00:05:06.515 --> 00:05:11.337
こちらは、グループ全体に一律の設定をするときにシンプルです。

62
00:05:11.337 --> 00:05:17.766
注意点は、子のコルを使う場合は、コルグループのスパンを同時に指定しないことです。

63
00:05:17.766 --> 00:05:25.160
列の表し方はどちらか一方にそろえるのが正しい書き方で、両方書くと対応がずれる恐れがあります。

64
00:05:25.160 --> 00:05:27.334
共通属性についても確認します。

65
00:05:27.334 --> 00:05:31.972
コルでも、アイディー、クラス、ラングといった共通属性が使えます。

66
00:05:31.972 --> 00:05:39.653
実務では特にクラスが便利で、コルにクラスを付けておけば、シーエスエス側から背景や幅をまとめて指定できます。

67
00:05:39.653 --> 00:05:49.944
画面の例のように、スタイル属性で幅を直接指定することもできますが、複数ページで共通にするなら外部シーエスエスへ分ける方が管理しやすくなります。

68
00:05:49.944 --> 00:05:54.799
また、データスター属性で独自の値を保持することもできますが、ページのソースを見れば誰でも読めるため、

69
00:05:54.799 --> 00:05:59.654
秘密情報を置く場所ではありません。

70
00:05:59.654 --> 00:06:02.988
見た目と意味を分けて考える姿勢を守りましょう。

71
00:06:02.988 --> 00:06:05.306
ブラウザー互換性を確認します。

72
00:06:05.306 --> 00:06:11.565
記事が紹介するエムディーエヌのデータでは、コル要素本体は、クロームが一以降、

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

74
00:06:17.823 --> 00:06:21.687
中心となるスパン属性の対応開始版も、同じ数字です。

75
00:06:21.687 --> 00:06:29.259
かなり古くから使われてきた要素なので、現在の主要ブラウザーでは安心して使えると考えてよいでしょう。

76
00:06:29.259 --> 00:06:38.531
ただし、この表は要素本体の対応を示すもので、列に指定したスタイルがすべて同じように効くことを保証するものではありません。

77
00:06:38.531 --> 00:06:45.640
特に列へのスタイルの効き方は差が出やすい部分なので、対象環境で実際の表示を確認してください。

78
00:06:45.640 --> 00:06:49.329
まとめとして、よくある間違いを三つ挙げます。

79
00:06:49.329 --> 00:06:54.359
一つ目は、コルをコルグループの外に直接置いてしまうことです。

80
00:06:54.359 --> 00:06:58.048
コルは必ずコルグループの中に置いてください。

81
00:06:58.048 --> 00:07:03.079
二つ目は、空要素であるコルに終了タグを書いてしまうことです。

82
00:07:03.079 --> 00:07:05.426
開始タグだけで完結させます。

83
00:07:05.426 --> 00:07:14.145
三つ目は、文字色や文字揃えなど、列には効きにくいシーエスエスをコルに書いて効果を期待してしまうことです。

84
00:07:14.145 --> 00:07:19.343
列では背景と幅、文字はセルで、という分担を思い出してください。

85
00:07:19.343 --> 00:07:25.883
コルは、表の列を一列ずつ宣言し、スパンで複数列をまとめることもできる要素です。

86
00:07:25.883 --> 00:07:28.733
これでコルタグの解説を終わります。

87
00:07:28.733 --> 00:07:33.596
ぜひ、自分の表で列の背景をまとめる練習をしてみてください。