diff options
Diffstat (limited to 'files/ja/web/html/element/col/index.html')
| -rw-r--r-- | files/ja/web/html/element/col/index.html | 177 |
1 files changed, 177 insertions, 0 deletions
diff --git a/files/ja/web/html/element/col/index.html b/files/ja/web/html/element/col/index.html new file mode 100644 index 0000000000..252d9f7bd3 --- /dev/null +++ b/files/ja/web/html/element/col/index.html @@ -0,0 +1,177 @@ +--- +title: <col> +slug: Web/HTML/Element/col +tags: + - Element + - HTML + - HTML tabular data + - Reference + - Tables + - Web +translation_of: Web/HTML/Element/col +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML の <code><col></code> 要素</strong>は、表内の列を定義して、すべての一般セルに共通の意味を定義するために使用します。この要素は通常、 {{HTMLElement("colgroup")}} 要素内にみられます。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/col.html","tabbed-taller")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<p><code><col></code> では CSS を使用して列にスタイルを設定できますが、列に対して効果があるプロパティは限定されています (<a href="https://www.w3.org/TR/CSS21/tables.html#columns">CSS 2.1 仕様書</a> をご覧ください)。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td>なし</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>なし。これは{{Glossary("empty element", "空要素")}}です。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>開始タグは必須ですが、終了タグを置いてはいけません。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>{{HTMLElement("colgroup")}} のみ。ただし開始タグが必須ではないため暗黙的に定義されることがあります。 {{HTMLElement("colgroup")}} 要素は {{htmlattrxref("span", "colgroup")}} 属性を持っていてはいけません。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>許可されている <code>role</code> なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLTableColElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<dl> + <dt>{{htmlattrdef("span")}}</dt> + <dd>この属性は正の整数で、 <code><col></code> 要素がまたがる列の数を示します。存在しない場合、既定値は <code>1</code> です。</dd> +</dl> + +<h3 id="Deprecated_attributes" name="Deprecated_attributes">非推奨の属性</h3> + +<p>以下の属性は非推奨であり、使用すべきではありません。これらの属性は、既存のコードを更新する際の参考として、また歴史的な興味のためだけに、以下に文書化されています。</p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecated_inline}}</dt> + <dd>この列挙属性は、各列の内容物の水平方向の配置方法を制御します。以下の値が指定可能です。 + <ul> + <li><code>left</code> : 内容物をセルの左側に揃えます。</li> + <li><code>center</code> : 内容物をセル内で中央揃えにします。</li> + <li><code>right</code> : 内容物をセルの右側に揃えます。</li> + <li><code>justify</code>: 内容物がセル内で両端揃えになるように、テキストコンテンツに空白を挿入します。</li> + </ul> + + <p>この属性が設定されていない場合、その値は <code><col></code> 要素が属する {{HTMLElement("colgroup")}} 要素の {{htmlattrxref("align", "colgroup")}} 属性から継承します。それも存在しない場合は、<code>left</code> 値であるものとします。</p> + + <div class="note"><strong>補足:</strong> + + <ul> + <li>値 <code>left</code>、<code>center</code>、<code>right</code>、<code>justify</code> と同じ効果を得る方法: + + <ul> + <li>{{cssxref("text-align")}} プロパティを <code><col></code> 要素を与えたセレクターに設定しようとしてはいけません。 {{HTMLElement("td")}} 要素は <code><col></code> 要素の子孫ではないため、プロパティを継承しません。</li> + <li>表で {{htmlattrxref("colspan", "td")}} 属性を使用していない場合は、<code>td:nth-child(an+b)</code> CSS セレクターを使用してください。 <code>a</code> を 0 に、<code>b</code> を表内の列の位置を示す序数にします。例えば <code>td:nth-child(2) { text-align: right; }</code> は、2 列目を右揃えにします。</li> + <li>表で {{htmlattrxref("colspan", "td")}} 属性を使用している場合は <code>[colspan=n]</code> のような、十分な CSS 属性セレクターの組み合わせで実現できますが、容易ではありません。</li> + </ul> + </li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt> + <dd> + <p>表の背景色です。この属性は、列の各セルの背景色を定義します。 <a href="/ja/docs/Web/CSS/color_value#RGB_colors">6桁の16進数の RGB コード</a>の前に '<code>#</code>' が付いた形です。定義済みの<a href="/ja/docs/Web/CSS/color_value#Color_keywords">色キーワード</a>のうちの一つも使用できます。</p> + + <p>同様の効果を得るには、 CSS の {{cssxref("background-color")}} プロパティを使用してください。</p> + </dd> + <dt>{{htmlattrdef("char")}} {{deprecated_inline}}</dt> + <dd>この属性は、列内のセルで揃える文字を設定します。よく使用する値としては、数値や金額を揃えるときのピリオド (.) があります。 {{htmlattrxref("align", "col")}} 属性が <code>char</code> ではない場合は、この属性は無視されます。</dd> + <dt>{{htmlattrdef("charoff")}} {{deprecated_inline}}</dt> + <dd>この属性は、 <code>char</code> 属性で指定された揃え文字からその列のデータをオフセットする文字数を示します。</dd> + <dt>{{htmlattrdef("valign")}} {{deprecated_inline}}</dt> + <dd>この属性は、その列のそれぞれのセルの中にある内容物の垂直方向の配置方法を指定します。以下の値が指定可能です。 + <ul> + <li><code>baseline</code> : テキストを可能な限りセルの下端に近づけますが、下端ではなく文字の<a class="external" href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">ベースライン</a>に揃えます。文字がサイズ全体に渡る場合は、 <code>bottom</code> と同じ効果になります。</li> + <li><code>bottom</code> : テキストを可能な限りセルの下端に近づけて配置します。</li> + <li><code>middle</code> : テキストをセルの中央部に置きます。</li> + <li>and <code>top</code> : テキストを可能な限りセルの上端に近づけて配置します。</li> + </ul> + + <div class="note"><strong>補足:</strong> + + <ul> + <li>{{cssxref("vertical-align")}} プロパティを、 <code><col></code> 要素を与えたセレクターに設定しようとしてはいけません。{{HTMLElement("td")}} 要素は <code><col></code> 要素の子孫ではないため、プロパティを継承しません。</li> + <li>表で {{htmlattrxref("colspan", "td")}} 属性を使用していない場合は、 CSS の <code>td:nth-child(an+b)</code> セレクターを使用してください。a は表内の列数、b は表内の列の位置を示す序数です。このセレクターの後でのみ <code>vertical-align</code> プロパティを使用することができます。</li> + <li>表で {{htmlattrxref("colspan", "td")}} 属性を使用している場合は <code>[colspan=n]</code> のような、十分な CSS 属性セレクターの組み合わせで実現できますが、容易ではありません。</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("width")}} {{deprecated_inline}}</dt> + <dd>この属性は、現在の列グループ内の各列に既定の幅を指定します。標準的なピクセル値やパーセント値に加えて、この属性は特別な書式である <code>0*</code> も使用できます。これはグループ内の各列の幅を、列の内容物を保持するのに必要最小限の幅にします。<code>5*</code> のような幅の相対値も使用できます。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<p>{{HTMLElement("table")}} ページに <code><col></code> 要素の使用例があります。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'tables.html#the-col-element', '<col>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-col-element', '<col>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.4.2', '<col>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.col")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><code><col></code> 要素のスタイル設定に特に役立つであろう CSS プロパティと擬似クラス: + + <ul> + <li>列の幅を制御するための {{cssxref("width")}} プロパティ</li> + <li>列内のセルの配置を設定するための {{cssxref(":nth-child")}} 擬似クラス</li> + <li>すべてのセル内コンテンツを '.' などの同一文字で揃えるための {{cssxref("text-align")}} プロパティ</li> + </ul> + </li> +</ul> |