htmlタグ｜colgroup・col [ホームページ制作の基本タグ]

ホームページ（ウェブサイト）制作において、料金表や事業の比較データなど、複雑な表組みを作成する機会は数多くあります。この表組みの列を制御するHTMLタグ「colgroup」と「col」についてのご説明です。通常、表の列ごとに背景色や幅を指定する場合、一つひとつのセルに対して個別にスタイルを記述するとソースコードが肥大化し、後から修正を加える作業も非常に困難になります。このような問題を解決し、効率的な保守管理を実現する上で、これらのタグに対する理解は非常に重要です。

表組みの列をグループ化する役割

表組みを構成するtableタグの中で、列全体のまとまりを作り、一括でデザインや幅を調整するのがcolgroupタグとcolタグの役割です。これらを適切に記述することでHTML全体のコード量が大幅に削減され、ホームページの更新にかかる手間を大きく減らすことができます。

データ構造の最適化にも繋がる

サービス内容の拡充などに伴って、表の列を後から追加する作業が発生することがあります。そのような場面でも、事前にcolgroupとcolを使って列のデザイン規則を定めておけば、一部の記述を変更するだけで瞬時に表全体のレイアウトを整えられます。また、無駄なコードが省かれた整理されたHTML構造は、検索エンジンがページ内の情報を正確に読み解くためにも有利に働くかもしれません。

colgroup

ホームページ制作（ウェブサイト制作）の際に使用する<colgroup>タグについてのご説明です。

ホームページを制作する時にホームページ（ウェブサイト）のページにおいて<colgroup>（コルグループ）タグを使用することによって、テーブル列（縦）のグループ化・構造化をすることができます。

<colgroup> 列をグループ化

<colgroup>タグはテーブル列（縦）の構造化します。<thead>などと同様、ホームページ制作においてテーブルの内容をグループ化するための要素です。

<colgroup>、<col>は、 <table>内<caption>より後、 <thead>より前に配置します。

span

グループ化する列数、対象縦列数

span=””

属性やスタイルシート設定の対象とする縦列の数を1以上の整数で指定。
無指定場合、初期値は1。<colgroup>内に<col>を含んでいる場合は無視される。

width

縦列の幅

width=””

指定した各縦列の幅の初期値を指定。<colgroup>で指定されている場合でも、<col>が優先される。

align

グループ化した列のセル内表示位置（横方向）、横方向の位置揃え

align=””

left（左寄せ）、right（右寄せ）、center（中央揃え）、justify（両端揃え）、char（後述参照）

char

位置を揃える文字

char=””

align=”char”とした場合の位置を揃える文字を指定。文字を指定しない場合の初期値は”.”。

charoff

位置を揃える文字までの距離

charoff=””

align=”char”とした場合の、セルの端からchar属性で指定した文字までの距離を指定します。セル内に指定文字がない場合には、末尾が指定文字の直前に揃えられます。

valign

グループ化した列のセル内表示位置（縦方向）、縦方向の位置揃え

valign=””

top（上寄せ）、middle（中央揃え）、bottom（下寄せ）、baseline（1行目のベースラインを揃える）

bgcolor

グループ化した列のセルの背景色

bgcolor=””

この<colgroup>タグはhtml4.01、html5どちらのhtmlバージョンで制作されたホームページ（ウェブサイト）でも使用することができるため、CMS内で生成するコンテンツなどにおいても、ベースとなるWordPressテーマなどのhtmlバージョンに影響されず使用することができます。

ホームページ制作・SEOの1ポイント

ホームページ制作において、テーブルの生成は記述すべきタグも多く、手間がかかるため、テーブル生成にかかるテンプレートなどが配布されていることもあります。しかしながら、微調整などの際は、そうしたテンプレートのCSSの中から該当箇所を修正する必要があり、特にモバイルフレンドリー対応ではないケースであれば、テーブル関連のCSSの影響で、モバイル閲覧時にレイアウトが崩れることもありますので注意が必要です。

なお、表である部分を「段落ではなく表である」という事をしっかし示すことも細かなSEOのひとつであると考えることができます。ページ内に表があることでクエリ関連性の判断においてページ属性が判定される際の判断要素のひとつになりえることもあります。

col

ホームページ制作（ウェブサイト制作）の際に使用する<col>タグについてのご説明です。

ホームページ制作において<col>（コル、カラム）タグは、<colgroup>でグループ化した列の個別属性、表の列の属性をまとめて指定します。

<col> グループ化した列の個別属性、表の列の属性をまとめて指定

Column（カラム、コラム）。ホームページ制作において<col>タグは、表の縦列の属性をまとめて指定したい場合に使用します。

<colgroup>でグループとしてまとめた列に関して、個別に属性を指定します。

span

グループ化する列数、対象縦列数

span=””

属性やスタイルシート設定の対象とする縦列の数を1以上の整数で指定。
無指定場合、初期値は1。

width

縦列の幅

width=””

指定した各縦列の幅の初期値を指定。<colgroup>で指定されている場合でも、<col>が優先される。

align

グループ化した列のセル内表示位置（横方向）、横方向の位置揃え

align=””

left（左寄せ）、right（右寄せ）、center（中央揃え）、justify（両端揃え）、char（後述参照）

char

位置を揃える文字

char=””

align=”char”とした場合の位置を揃える文字を指定。文字を指定しない場合の初期値は”.”。

charoff

位置を揃える文字までの距離

charoff=””

valign

グループ化した列のセル内表示位置（縦方向）、縦方向の位置揃え

valign=””

top（上寄せ）、middle（中央揃え）、bottom（下寄せ）、baseline（1行目のベースラインを揃える）

bgcolor

グループ化した列のセルの背景色

bgcolor=””

この<col>タグはhtml4.01、html5どちらのhtmlバージョンで制作されたホームページ（ウェブサイト）でも使用することができるため、CMS内で生成するコンテンツなどにおいても、ベースとなるWordPressテーマなどのhtmlバージョンに影響されず使用することができます。

ホームページ制作・SEOの1ポイント

テーブルを設置するコンテンツ部分など、テーブルタグの親要素がモバイルフレンドリー対応のレスポンシブ仕様であっても、テーブルに関するCSSの影響で、レイアウトが崩れることがあります。ホームページ制作時には、こうした部分にも注意をすることが大切です。テーブル生成の時に、こうしたcolを利用すると思い通りの表のレイアウト・構造を作ることができますが、テーブル幅などの指定において、要素の面積がpx指定されている場合、はみ出し部分に関する問題が別問題として浮かび上がってくる場合があります。

ホームページ（ウェブサイト）制作・作成に役立つHTML5のタグ一覧は
⇒html5 tag reference index ホームページ制作の基本タグ

ホームページ（ウェブサイト）のHTML編集方法

ホームページのHTML編集方法について。ホームページ（ウェブサイト）は基本的にHTMLで構成されています。かつてはHTML単独でHTMLの文書スタイルを設定していましたが、現代ではページの基本構成はHTMLで、外観はスタイルシート・CSSで設定されています。ホームページ制作・作成、ホームページ修正の基本はこのHTMLとCSSの編集で行います。

ホームページのHTML編集方法

ホームページ制作（ウェブサイト制作）なら
Web制作会社ファンフェアファンファーレへ

「Web集客できるホームページ制作・作成（ウェブサイト制作）
『お客さまのお客さま目線』でのWeb制作、Webマーケティング」
ホームページ制作京都のWeb制作会社（ホームページ制作会社）ファンフェアファンファーレは、Webマーケティングツールとして、Webマーケティング・SEMを意識したWeb集客・プロモーション力のあるSEO特性・ウェブPR力の高いSEO対策付きのホームページ制作（ウェブサイト制作）・作成、WordPress（ワードプレス）などのCMS（コンテンツマネジメントシステム）の導入やカスタマイズ、ウェブサイトの高速表示化、レスポンシブデザイン、モバイルフレンドリーを得意としています。
ホームページ制作サービスにあたり、WordPress（ワードプレス）を利用したホームページ制作（ウェブサイト制作）をはじめ、HTML5,CSS3,jQueryによるホームページ制作を行っております。Web集客のためのWebマーケティング効果の高いホームページ制作をはじめ、ホームページのリニューアル・更新・修正・管理、ホームページのSEO（SEO対策）、ホームページ運営やWebマーケティングにかかるWebコンサルティングなど、様々なサービスを提供しています。
Web集客・Webマーケティングに効果的なコンテンツマーケティング・コンテンツSEO・ウェブPRを加速させるWordPressなどCMSを活用したオウンドメディア構築、既にお持ちのホームページ（ウェブサイト）のWordPress化やWordPressのカスタマイズもお任せください！
ホームページ制作価格表（Web制作サービス）

WordPressホームページ制作（ウェブサイト制作）

WordPressをベースとしたホームページ制作やWordPressサイトのカスタマイズもおまかせください！既存ホームページをWordPressサイトへと変更する「WordPress化」のカスタマイズも可能です！
新規WordPressホームページ制作や既存ホームページのWordPress化では、コンテンツマーケティングのためのホームページ内オウンドメディア構築に対応しています。
既に運用されているWordPressサイトの軽微な修正や大規模なカスタマイズまであらゆる分野に対応可能です。WordPressサイトのSEOやWordPressのエラー修正・復旧にも対応しています。

HTML5でのホームページ制作（ウェブサイト制作）

HTML5での静的HTMLホームページ制作（ウェブサイト制作）やHTML5でのWordPress（ワードプレス）テーマの制作なら、京都のWeb制作会社（ホームページ制作会社）ファンフェアファンファーレにお任せください！ HTML5で構築した企業ホームページ制作や店舗ホームページ制作をはじめ、PRサイトの制作、メディアサイト・情報サイトの制作、モバイルサイト・スマホサイト、ECサイト・ネットショップまであらゆるホームページ制作に対応しております。
静的HTMLでの新規ホームページ制作に関しては全てHTML5でページを作成させていただきます。HTMLでのリスティング広告用LP制作にも対応しております。
HTML4.01、HTML5問わずHTMLソースの修正にも対応しておりますので、既存ホームページの修正やカスタマイズもお任せください！

ホームページ制作実績

新規ホームページ制作・カスタマイズ実績のある業種・エリアや、ホームページ制作事例・サイトカスタマイズ事例などホームページ制作実績のご紹介。企業の公式ホームページをはじめ、各種ホームページ制作（ホームページ作成）に対応しています。
ホームページ制作実績

ホームページの更新・修正

ホームページのページ更新やページ追加、文章や価格の修正、リンクの修正をはじめ、ホームページ内部の様々な箇所の修正など、各種ホームページの更新・ホームページの修正の代行に対応しております。ホームページの更新や修正にかかる単発のご依頼で対応させていただいておりますので、軽微な修正でもお気軽にご相談ください。スマホ対応化やSSL化、ホームページのエラー修正・エラー復旧にも対応しております。
ホームページの更新・修正料金価格表

ホームページ制作京都

京都でホームページ制作・ホームページ作成・Web制作ならお任せください。Web制作会社・ホームページ制作会社ファンフェアファンファーレでは、京都はもちろんホームページ制作・SEO（SEO対策）・WebマーケティングのWebコンサルティングにつき全国対応しております。WordPressやHTML5でのホームページ制作・作成ならお任せください！ホームページの修正・更新作業・エラー修正にも対応可能です。