WEBVTT

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

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

3
00:00:03.967 --> 00:00:08.669
エイチティーエムエルタグ編の九十三本目は、コルグループタグです。

4
00:00:08.669 --> 00:00:12.489
コルグループは、表の中の列のまとまりを表す要素です。

5
00:00:12.489 --> 00:00:19.541
行ではなく、縦方向の列をグループとして扱い、列単位で背景や幅などの設定をまとめるために使います。

6
00:00:19.541 --> 00:00:23.949
普段、表を作るときは行やセルに目が行きがちですが、列ごとにまとめて見た目をそろえたい場面では、

7
00:00:23.949 --> 00:00:28.356
このタグが土台になります。

8
00:00:28.356 --> 00:00:33.572
今回は、コルとの関係、スパン属性の役割、使い方、コード例、ブラウザー互換性、

9
00:00:33.572 --> 00:00:38.788
そして効くスタイルと効かないスタイルの違いまで、順番に確認します。

10
00:00:38.788 --> 00:00:42.263
まず、列をまとめるという考え方を押さえます。

11
00:00:42.263 --> 00:00:46.529
表には、見出し行をまとめるティーヘッドや、本体行をまとめるティーボディといった、

12
00:00:46.529 --> 00:00:50.794
行方向のグループがあります。

13
00:00:50.794 --> 00:00:54.744
それに対してコルグループは、列方向のグループです。

14
00:00:54.744 --> 00:01:01.379
たとえば、商品名の列、価格の列、備考の列といった縦の並びを一つの単位として扱います。

15
00:01:01.379 --> 00:01:07.066
列の幅をそろえたり、特定の列だけ背景色を変えたりしたいとき、セルを一つずつ指定するのではなく、

16
00:01:07.066 --> 00:01:12.753
列のグループとしてまとめて指定できるのが利点です。

17
00:01:12.753 --> 00:01:20.336
ただし後で説明するように、列に指定できるスタイルには限りがある点も、あわせて覚えておきましょう。

18
00:01:20.336 --> 00:01:23.211
次に、コルタグとの関係を整理します。

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

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

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

22
00:01:43.177 --> 00:01:46.691
なお、コルは空要素で、終了タグはありません。

23
00:01:46.691 --> 00:01:51.004
一方、コルグループには開始タグと終了タグを明示します。

24
00:01:51.004 --> 00:01:56.275
この親子の関係が、コルグループを使いこなすうえでの基本になります。

25
00:01:56.275 --> 00:02:00.588
次のセクションでは、子を使わない書き方も見ていきます。

26
00:02:00.588 --> 00:02:03.497
コルグループの主な属性が、スパンです。

27
00:02:03.497 --> 00:02:08.549
スパンは、このグループが対象にする列の数を、正の整数で指定します。

28
00:02:08.549 --> 00:02:13.755
たとえばスパンに二と書けば、そのグループは二列分をまとめて扱います。

29
00:02:13.755 --> 00:02:19.266
子のコルを並べずに、列数だけでグループを作りたいときに便利な書き方です。

30
00:02:19.266 --> 00:02:21.410
ここで大切な注意があります。

31
00:02:21.410 --> 00:02:28.605
記事でも強調されているように、子のコルを使う場合は、コルグループのスパンを同時に指定しません。

32
00:02:28.605 --> 00:02:32.433
どちらか一方の方法で列を表すのが正しい書き方です。

33
00:02:32.433 --> 00:02:39.016
両方書いてしまうと、意図と異なる列の対応になってしまう恐れがあるので注意してください。

34
00:02:39.016 --> 00:02:41.855
基本の書き方と配置ルールを確認します。

35
00:02:41.855 --> 00:02:44.992
コルグループの親要素は、テーブルのみです。

36
00:02:44.992 --> 00:02:49.624
置く位置にも決まりがあり、キャプションがある場合はその後ろ、そしてティーヘッドやティーボディ、

37
00:02:49.624 --> 00:02:54.256
行そのものよりも前に置きます。

38
00:02:54.256 --> 00:02:59.485
つまり、表の内容である行が始まる前に、列の設計図を先に宣言する形です。

39
00:02:59.485 --> 00:03:06.657
順番を間違えて行の後ろに置くと、ブラウザーが構造を補正して、意図しない表示になることがあります。

40
00:03:06.657 --> 00:03:12.782
試すときは、練習用ファイルに表ごと写し、保存して再読み込みしたうえで、開発者ツールのエレメンツで、

41
00:03:12.782 --> 00:03:18.908
コルグループがテーブルの直下に正しく入っているかを確認しましょう。

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

43
00:03:21.261 --> 00:03:24.398
目的は、列単位の背景をまとめることです。

44
00:03:24.398 --> 00:03:31.142
例では、コルグループの中に二つのコルを置き、一つ目のコルにだけ背景色を指定しています。

45
00:03:31.142 --> 00:03:36.161
これで、行見出しのある一列目全体に、淡い背景がまとめて付きます。

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

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

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

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

50
00:03:57.336 --> 00:04:01.520
ここが、コルグループで最もつまずきやすいポイントです。

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

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

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

54
00:04:19.731 --> 00:04:24.458
そのままセルへ継承されるとは限りません。

55
00:04:24.458 --> 00:04:31.742
記事も、テキストアラインなどのすべてのスタイルがセルへ継承されるわけではないと注意しています。

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

57
00:04:38.716 --> 00:04:43.272
応用として、複数のグループを作る書き方も見ておきます。

58
00:04:43.272 --> 00:04:47.997
コルグループは、一つの表の中に複数並べることができます。

59
00:04:47.997 --> 00:04:51.709
グループは左の列から順番に対応していきます。

60
00:04:51.709 --> 00:04:59.472
画面の例では、最初のグループが一列、次のグループが二列を担当し、合わせて三列の表になります。

61
00:04:59.472 --> 00:05:05.209
項目名の列と、数値の列で背景や幅の扱いを分けたいときなどに便利です。

62
00:05:05.209 --> 00:05:13.815
このとき大切なのは、グループが担当する列数の合計と、実際のセルの列数が合っているかを確認することです。

63
00:05:13.815 --> 00:05:18.709
対応がずれると、背景や幅が意図しない列に付いてしまいます。

64
00:05:18.709 --> 00:05:23.096
列を増減したら、グループ側もあわせて見直しましょう。

65
00:05:23.096 --> 00:05:25.608
共通属性についても確認します。

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

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

68
00:05:41.017 --> 00:05:47.548
なお、コルにもスパンがあり、コル側のスパンで複数列をまとめる書き方もできます。

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

70
00:05:53.159 --> 00:05:58.770
秘密情報を置く場所ではありません。

71
00:05:58.770 --> 00:06:08.316
見た目の指定と要素の意味は分けて考え、列の構造はエイチティーエムエル、装飾はシーエスエスという分担を守りましょう。

72
00:06:08.316 --> 00:06:10.393
ブラウザー互換性を確認します。

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

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

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

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

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

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

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

80
00:06:51.742 --> 00:06:56.424
一つ目は、コルグループを行の後ろに置いてしまうことです。

81
00:06:56.424 --> 00:07:00.938
必ずテーブルの直下で、行グループの前に置いてください。

82
00:07:00.938 --> 00:07:05.786
二つ目は、子のコルとスパンを同時に指定してしまうことです。

83
00:07:05.786 --> 00:07:09.130
列の表し方は、どちらか一方にそろえます。

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

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

86
00:07:23.676 --> 00:07:28.524
コルグループは、表の列を設計図として先に宣言する要素です。

87
00:07:28.524 --> 00:07:32.035
これでコルグループタグの解説を終わります。

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