VIDEO LESSON

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

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

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

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

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

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

この動画で学べること

colタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。colgroup 内の列を表し、span で対象列数を指定できます。

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