VIDEO LESSON

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

再生時間 7:37動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

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

0:00こんにちは。
0:00エイチティーエムエルリファレンス解説です。
0:03エイチティーエムエルタグ編の九十三本目は、コルグループタグです。
0:08コルグループは、表の中の列のまとまりを表す要素です。
0:12行ではなく、縦方向の列をグループとして扱い、列単位で背景や幅などの設定をまとめるために使います。
0:19普段、表を作るときは行やセルに目が行きがちですが、列ごとにまとめて見た目をそろえたい場面では、
0:23このタグが土台になります。
0:28今回は、コルとの関係、スパン属性の役割、使い方、コード例、ブラウザー互換性、
0:33そして効くスタイルと効かないスタイルの違いまで、順番に確認します。
0:38まず、列をまとめるという考え方を押さえます。
0:42表には、見出し行をまとめるティーヘッドや、本体行をまとめるティーボディといった、
0:46行方向のグループがあります。
0:50それに対してコルグループは、列方向のグループです。
0:54たとえば、商品名の列、価格の列、備考の列といった縦の並びを一つの単位として扱います。
1:01列の幅をそろえたり、特定の列だけ背景色を変えたりしたいとき、セルを一つずつ指定するのではなく、
1:07列のグループとしてまとめて指定できるのが利点です。
1:12ただし後で説明するように、列に指定できるスタイルには限りがある点も、あわせて覚えておきましょう。
1:20次に、コルタグとの関係を整理します。
1:23コルグループが列のグループ全体を表す親要素で、その中に置くコルが、一列ずつに対応する子要素です。
1:30画面の例では、二つのコルが並んでいて、一つ目が名前の列、二つ目が価格の列に対応します。
1:37コルにクラスを付ければ、列ごとに異なる設定を持たせることもできます。
1:43なお、コルは空要素で、終了タグはありません。
1:46一方、コルグループには開始タグと終了タグを明示します。
1:51この親子の関係が、コルグループを使いこなすうえでの基本になります。
1:56次のセクションでは、子を使わない書き方も見ていきます。
2:00コルグループの主な属性が、スパンです。
2:03スパンは、このグループが対象にする列の数を、正の整数で指定します。
2:08たとえばスパンに二と書けば、そのグループは二列分をまとめて扱います。
2:13子のコルを並べずに、列数だけでグループを作りたいときに便利な書き方です。
2:19ここで大切な注意があります。
2:21記事でも強調されているように、子のコルを使う場合は、コルグループのスパンを同時に指定しません。
2:28どちらか一方の方法で列を表すのが正しい書き方です。
2:32両方書いてしまうと、意図と異なる列の対応になってしまう恐れがあるので注意してください。
2:39基本の書き方と配置ルールを確認します。
2:41コルグループの親要素は、テーブルのみです。
2:44置く位置にも決まりがあり、キャプションがある場合はその後ろ、そしてティーヘッドやティーボディ、
2:49行そのものよりも前に置きます。
2:54つまり、表の内容である行が始まる前に、列の設計図を先に宣言する形です。
2:59順番を間違えて行の後ろに置くと、ブラウザーが構造を補正して、意図しない表示になることがあります。
3:06試すときは、練習用ファイルに表ごと写し、保存して再読み込みしたうえで、開発者ツールのエレメンツで、
3:12コルグループがテーブルの直下に正しく入っているかを確認しましょう。
3:18記事の活用事例を読み解きます。
3:21目的は、列単位の背景をまとめることです。
3:24例では、コルグループの中に二つのコルを置き、一つ目のコルにだけ背景色を指定しています。
3:31これで、行見出しのある一列目全体に、淡い背景がまとめて付きます。
3:36もしコルグループを使わなければ、その列のセル一つひとつに、同じ背景を繰り返し指定しなければなりません。
3:44行が増えるほど手間もミスも増えます。
3:46列の定義を一か所に集めておけば、色を変えたいときも一か所の修正で済みます。
3:52表の見た目を列単位で管理したいときの、代表的な使い方です。
3:57ここが、コルグループで最もつまずきやすいポイントです。
4:01列の要素に指定しても、すべてのシーエスエスがセルに効くわけではありません。
4:07一般に、列に対して効くのは、背景、幅、枠線、そしてビジビリティで列を折りたたむ指定などに限られます。
4:15一方で、文字の色やフォント、テキストアラインのような文字揃えの指定を列に書いても、
4:19そのままセルへ継承されるとは限りません。
4:24記事も、テキストアラインなどのすべてのスタイルがセルへ継承されるわけではないと注意しています。
4:31文字の見た目はセル側で指定する、列では背景と幅を扱う、と役割を分けて考えると混乱しません。
4:38応用として、複数のグループを作る書き方も見ておきます。
4:43コルグループは、一つの表の中に複数並べることができます。
4:47グループは左の列から順番に対応していきます。
4:51画面の例では、最初のグループが一列、次のグループが二列を担当し、合わせて三列の表になります。
4:59項目名の列と、数値の列で背景や幅の扱いを分けたいときなどに便利です。
5:05このとき大切なのは、グループが担当する列数の合計と、実際のセルの列数が合っているかを確認することです。
5:13対応がずれると、背景や幅が意図しない列に付いてしまいます。
5:18列を増減したら、グループ側もあわせて見直しましょう。
5:23共通属性についても確認します。
5:25コルグループでも、アイディー、クラス、ラングといった共通属性が使えます。
5:31実務では特にクラスが便利で、列グループにクラスを付けておけば、シーエスエス側から背景や幅をまとめて指定できます。
5:41なお、コルにもスパンがあり、コル側のスパンで複数列をまとめる書き方もできます。
5:47また、データスター属性で独自の値を保持することもできますが、ページのソースを見れば誰でも読めるため、
5:53秘密情報を置く場所ではありません。
5:58見た目の指定と要素の意味は分けて考え、列の構造はエイチティーエムエル、装飾はシーエスエスという分担を守りましょう。
6:08ブラウザー互換性を確認します。
6:10記事が紹介するエムディーエヌのデータでは、コルグループ要素本体は、クロームが一以降、
6:16エッジが十二以降、ファイアフォックスが一以降、サファリが四以前の版から対応しています。
6:22中心となるスパン属性の対応開始版も、同じ数字です。
6:25かなり古くから使われてきた要素なので、現在の主要ブラウザーでは安心して使えると考えてよいでしょう。
6:32ただし、この表は要素本体の対応を示すもので、列に指定したスタイルがすべて同じように効くことを保証するものではありません。
6:40特に、列へのスタイルの効き方はブラウザーで差が出やすい部分なので、対象環境で実際の表示を確認してください。
6:48まとめとして、よくある間違いを三つ挙げます。
6:51一つ目は、コルグループを行の後ろに置いてしまうことです。
6:56必ずテーブルの直下で、行グループの前に置いてください。
7:00二つ目は、子のコルとスパンを同時に指定してしまうことです。
7:05列の表し方は、どちらか一方にそろえます。
7:09三つ目は、文字色や文字揃えなど、列には効きにくいシーエスエスをコルグループに書いて効果を期待してしまうことです。
7:18列では背景と幅、文字はセルで、という分担を思い出してください。
7:23コルグループは、表の列を設計図として先に宣言する要素です。
7:28これでコルグループタグの解説を終わります。
7:32ぜひ、自分の表で列の背景をまとめる練習をしてみてください。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

colgroupタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。列のまとまり。列単位の設定に使いますが、すべてのCSSが列に効くわけではありません。

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