diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/learn/html/tables | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/ja/learn/html/tables')
| -rw-r--r-- | files/ja/learn/html/tables/advanced/index.html | 475 | ||||
| -rw-r--r-- | files/ja/learn/html/tables/basics/index.html | 569 | ||||
| -rw-r--r-- | files/ja/learn/html/tables/index.html | 43 | ||||
| -rw-r--r-- | files/ja/learn/html/tables/structuring_planet_data/index.html | 87 |
4 files changed, 1174 insertions, 0 deletions
diff --git a/files/ja/learn/html/tables/advanced/index.html b/files/ja/learn/html/tables/advanced/index.html new file mode 100644 index 0000000000..bb33f6e292 --- /dev/null +++ b/files/ja/learn/html/tables/advanced/index.html @@ -0,0 +1,475 @@ +--- +title: HTML 表の高度な機能とアクセシビリティ +slug: Learn/HTML/Tables/Advanced +tags: + - Accessibility + - Advanced + - Article + - Beginner + - CodingScripting + - HTML + - Headers + - Learn + - caption + - scope + - sumary + - table + - tbody + - tfoot + - thead +translation_of: Learn/HTML/Tables/Advanced +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div> + +<p class="summary">このモジュールの2番目の記事では、HTML テーブルのより高度な機能 (キャプション/要約、行をテーブルのヘッダー、本文、フッターのセクションにグループ化するなど) や、視覚障碍のあるユーザのためのテーブルのアクセシビリティについて調べます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>HTML の基礎 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を参照)。</td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>表のより高度な機能やアクセシビリティについて学ぶ</td> + </tr> + </tbody> +</table> + +<h2 id="Adding_a_caption_to_your_table_with_<caption>" name="Adding_a_caption_to_your_table_with_<caption>"><caption> を用いて表にキャプションを追加する</h2> + +<p>テーブルにキャプションを付けるには、{{htmlelement("caption")}} 要素内に配置し、それを {{htmlelement("table")}} 要素内にネストします。これは <code><table></code> 要素の開始タグすぐ下に置くべきです。</p> + +<pre class="brush: html"><table> + <caption>ジュラ紀の恐竜</caption> + + ... +</table></pre> + +<p>上記の簡単な例から推測できるように、キャプションには表の内容の説明が含まれています。 これは、ページに目を通して表が役に立つかどうかをすぐに把握したい全ての読者にとって便利ですが、特に盲目のユーザにとっては便利です。 スクリーンリーダーに表の内容を知るためだけに多くのセルの内容を読み上げさせるのではなく、キャプションを頼りにして表をより詳細に読み取るかどうかを決定できます。</p> + +<p>キャプションは <code><table></code> タグのすぐ下に配置します。</p> + +<div class="note"> +<p><strong>注</strong>: {{htmlattrxref("summary","table")}} 属性は、<code><table></code> 要素で説明を提供するためにも使用できます。 これはスクリーンリーダーによっても読み上げられます。 ただし、<code>summary</code> は HTML5 仕様では{{glossary("deprecated","推奨されておらず")}}、(ページには表示されないので)晴眼のユーザには読むことができないため、代わりに <code><caption></code> 要素を使用することをお勧めします。</p> +</div> + +<h3 id="Active_learning_Adding_a_caption" name="Active_learning_Adding_a_caption">アクティブラーニング: キャプションの追加</h3> + +<p>前の記事で最初に出会った例を再考しながら、これを試してみましょう。</p> + +<ol> + <li><a href="/ja/docs/Learn/HTML/Tables/Basics#Active_learning_colgroup_and_col">HTML 表の基本</a>の最後から語学教師の学校の時間割を開くか、または <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a> ファイルのローカルコピーを作成してください。</li> + <li>表に適切なキャプションを追加します。</li> + <li>コードを保存してブラウザで開くと、コードがどのように見えるかがわかります。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: GitHub で私たちのバージョンを見つけることができます — <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/timetable-caption.html">timetable-caption.html</a> を見てください(<a href="http://mdn.github.io/learning-area/html/tables/advanced/timetable-caption.html">ライブもご覧ください</a>)。</p> +</div> + +<h2 id="Adding_structure_with_<thead>_<tfoot>_and_<tbody>" name="Adding_structure_with_<thead>_<tfoot>_and_<tbody>"><thead>、<tfoot>、<tbody> を用いて構造を追加する</h2> + +<p>表の構造がもう少し複雑になったら、それらにもっと構造的な定義を与えることは有用です。 これを行う明確な方法の1つは、{{htmlelement("thead")}}、{{htmlelement("tfoot")}}、および {{htmlelement("tbody")}} を使用することです。 これにより、表のヘッダー、フッター、および本体のセクションをマークアップできます。</p> + +<p>これらの要素によって表がスクリーンリーダーのユーザにアクセスしやすくなることはなく、また視覚的な機能強化が生じることもありません。 ただし、これらはスタイリングやレイアウトに非常に役立ちます — CSS を表に追加するための便利なフックとして機能します。 いくつか興味深い例を挙げると、長い表の場合、全ての印刷ページで表のヘッダーとフッターを繰り返すようにしたり、表の本体を単一ページに表示して、上下にスクロールして内容を表示したりすることができます。</p> + +<p>それらを使用するには、</p> + +<ul> + <li><code><thead></code> 要素は、表のヘッダー部分をラップする必要があります — これは通常、列見出しを含む最初の行になりますが、必ずしもそうとは限りません。 {{htmlelement("col")}} 要素や {{htmlelement("colgroup")}} 要素を使用している場合、表のヘッダーはそれらのすぐ下にくるはずです。</li> + <li><code><tfoot></code> 要素は、表のフッター部分をラップする必要があります — これは、例えば、前の行の項目が合計された最終行になります。 表のフッターは、期待通りに表の一番下に配置することも、表のヘッダーのすぐ下に配置することもできます(ブラウザはそれを表の一番下に表示します)。</li> + <li><code><tbody></code> 要素は、表のヘッダーまたはフッターではない表のコンテンツの他の部分をラップする必要があります。 どのように構成することにしたかに応じて、表のヘッダーの下に出現するか、時にはフッターの下に出現することがあります (上記の注を参照)。</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: <code><tbody></code> は常に全ての表に含まれていて、コードで指定しない場合は暗黙的に含まれます。 これを確認するには、<code><tbody></code> を含まない以前の例の1つを開き、<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザ開発者ツール</a>の HTML コードを調べます — ブラウザによってこのタグが追加されたことがわかります。 なぜそれを含まないのかと疑問に思うかもしれません — すべき、表の構造とスタイリングがより細かく制御できるためです。</p> +</div> + +<h3 id="Active_learning_Adding_table_structure" name="Active_learning_Adding_table_structure">アクティブラーニング: 表構造の追加</h3> + +<p>これらの新しい要素を実行してみましょう。</p> + +<ol> + <li>まず、新しいフォルダに <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record.html">spending-record.html</a> と <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css">minimal-table.css</a> のローカルコピーを作成します。</li> + <li>ブラウザでそれを開いてみてください — あなたはそれが問題ないように見えますが、それは改善されることになるかもしれません。 支出額の合計を含む "SUM" 行は間違った場所にあるように思われ、コードから抜けている細部がいくつかあります。</li> + <li>明白なヘッダー行を <code><thead></code> 要素内に、 "SUM" 行を <code><tfoot></code> 要素内に、そして残りの内容を <code><tbody></code> 要素内に配置します。</li> + <li>保存して更新すると、<code><tfoot></code> 要素を追加すると "SUM" 行が表の一番下に移動していることがわかります。</li> + <li>次に、{{htmlattrxref("colspan","td")}} 属性を追加して "SUM" セルを最初の4列にまたがるようにします。そのため、実際の数は "Cost" 列の下部に表示されます。</li> + <li>これらの要素が CSS を適用するためにどれほど有用であるかのアイデアをあなたに与えるために、表にいくつかの簡単な追加のスタイリングを追加しましょう。 HTML 文書の <code><head></code> の中には、空の {{htmlelement("style")}} 要素があります。 この要素内に、次の CSS コード行を追加します。 + <pre class="brush: css">tbody { + font-size: 90%; + font-style: italic; +} + +tfoot { + font-weight: bold; +} +</pre> + </li> + <li>保存して更新し、結果を確認します。 <code><tbody></code> 要素と <code><tfoot></code> 要素が適切に配置されていない場合は、同じスタイルを適用するためにはるかに複雑なセレクタ/規則を記述する必要があります。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: 現時点で私たちはあなたが CSS を完全に理解しているとは思っていません。 あなたが私たちの CSS モジュールを一通り学ぶとき、これについてより多くを学ぶでしょう(<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>は始めるのに良い場所です。 <a href="/ja/docs/Learn/CSS/Styling_boxes/Styling_tables">スタイリングされた表</a>に関する具体的な記事もあります)。</p> +</div> + +<p>完成した表は次のようになります。</p> + +<div class="hidden"> +<h6 id="Hidden_example" name="Hidden_example">Hidden example</h6> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My spending record</title> + <style> + + html { + font-family: sans-serif; + } + + table { + border-collapse: collapse; + border: 2px solid rgb(200,200,200); + letter-spacing: 1px; + font-size: 0.8rem; + } + + td, th { + border: 1px solid rgb(190,190,190); + padding: 10px 20px; + } + + th { + background-color: rgb(235,235,235); + } + + td { + text-align: center; + } + + tr:nth-child(even) td { + background-color: rgb(250,250,250); + } + + tr:nth-child(odd) td { + background-color: rgb(245,245,245); + } + + caption { + padding: 10px; + } + + tbody { + font-size: 90%; + font-style: italic; + } + + tfoot { + font-weight: bold; + } + </style> + </head> + <body> + <table> + <caption>How I chose to spend my money</caption> + <thead> + <tr> + <th>Purchase</th> + <th>Location</th> + <th>Date</th> + <th>Evaluation</th> + <th>Cost (€)</th> + </tr> + </thead> + <tfoot> + <tr> + <td colspan="4">SUM</td> + <td>118</td> + </tr> + </tfoot> + <tbody> + <tr> + <td>Haircut</td> + <td>Hairdresser</td> + <td>12/09</td> + <td>Great idea</td> + <td>30</td> + </tr> + <tr> + <td>Lasagna</td> + <td>Restaurant</td> + <td>12/09</td> + <td>Regrets</td> + <td>18</td> + </tr> + <tr> + <td>Shoes</td> + <td>Shoeshop</td> + <td>13/09</td> + <td>Big regrets</td> + <td>65</td> + </tr> + <tr> + <td>Toothpaste</td> + <td>Supermarket</td> + <td>13/09</td> + <td>Good</td> + <td>5</td> + </tr> + </tbody> + </table> + + </body> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p><strong>注</strong>: Github では、それを <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html">spending-record-finished.html</a> として見つけることもできます(<a href="http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html">ライブもご覧ください</a>)。</p> +</div> + +<h2 id="Nesting_Tables" name="Nesting_Tables">ネストした表</h2> + +<p><code><table></code> 要素を含む完全な構造を含める限り、表を別の表の中にネストすることは可能です。 そのマークアップがスクリーンリーダーのユーザにとって混乱を招きやすく、アクセスしにくくなるため、これは一般的にはあまり推奨されません。 多くの場合、既存の表に追加のセル/行/列を挿入することもできます。 ただし、他のソースからコンテンツを簡単にインポートしたい場合などは、時々必要になります。</p> + +<p>次のマークアップは、単純なネストした表を示しています。</p> + +<pre class="brush: html"><table id="table1"> + <tr> + <th>title1</th> + <th>title2</th> + <th>title3</th> + </tr> + <tr> + <td id="nested"> + <table id="table2"> + <tr> + <td>cell1</td> + <td>cell2</td> + <td>cell3</td> + </tr> + </table> + </td> + <td>cell2</td> + <td>cell3</td> + </tr> + <tr> + <td>cell4</td> + <td>cell5</td> + <td>cell6</td> + </tr> +</table></pre> + +<p>その出力は次のようになります。</p> + +<table id="table1"> + <tbody> + <tr> + <th>title1</th> + <th>title2</th> + <th>title3</th> + </tr> + <tr> + <td id="nested"> + <table id="table2"> + <tbody> + <tr> + <td>cell1</td> + <td>cell2</td> + <td>cell3</td> + </tr> + </tbody> + </table> + </td> + <td>cell2</td> + <td>cell3</td> + </tr> + <tr> + <td>cell4</td> + <td>cell5</td> + <td>cell6</td> + </tr> + </tbody> +</table> + +<h2 id="Tables_for_visually_impaired_users" name="Tables_for_visually_impaired_users">視覚障碍者向けの表</h2> + +<p>データ表の使用方法について簡単に説明しましょう。 表は、データにすばやくアクセスし、さまざまな値を検索できるようにするための便利なツールです。例えば、昨年8月に Gent で販売された指輪 (Rings) の数を確認するには、下の表を見てください。その情報を理解するために、この表内のデータとその列ヘッダーや行ヘッダーとの間の視覚的な関連付けを行います。</p> + +<table> + <caption>Items Sold August 2016</caption> + <tbody> + <tr> + <td></td> + <td></td> + <th colspan="3" scope="colgroup">Clothes</th> + <th colspan="2" scope="colgroup">Accessories</th> + </tr> + <tr> + <td></td> + <td></td> + <th scope="col">Trousers</th> + <th scope="col">Skirts</th> + <th scope="col">Dresses</th> + <th scope="col">Bracelets</th> + <th scope="col">Rings</th> + </tr> + <tr> + <th rowspan="3" scope="rowgroup">Belgium</th> + <th scope="row">Antwerp</th> + <td>56</td> + <td>22</td> + <td>43</td> + <td>72</td> + <td>23</td> + </tr> + <tr> + <th scope="row">Gent</th> + <td>46</td> + <td>18</td> + <td>50</td> + <td>61</td> + <td>15</td> + </tr> + <tr> + <th scope="row">Brussels</th> + <td>51</td> + <td>27</td> + <td>38</td> + <td>69</td> + <td>28</td> + </tr> + <tr> + <th rowspan="2" scope="rowgroup">The Netherlands</th> + <th scope="row">Amsterdam</th> + <td>89</td> + <td>34</td> + <td>69</td> + <td>85</td> + <td>38</td> + </tr> + <tr> + <th scope="row">Utrecht</th> + <td>80</td> + <td>12</td> + <td>43</td> + <td>36</td> + <td>19</td> + </tr> + </tbody> +</table> + +<p>しかし、あなたがそれらの視覚的な関連付けをすることができないならば、どうですか？ では、どのようにして上記のような表を読むことができますか？ 視覚障碍者は、Webページの情報を読み上げるスクリーンリーダーをよく使用します。 平文を読んでいるときはこれは問題ありませんが、表を解釈することは視覚障碍者にとっては非常に困難な場合があります。 それでも、適切なマークアップを使用して、視覚的な関連付けをプログラムによる関連付けに置き換えることができます。</p> + +<div class="note"> +<p><strong>注</strong>: <a href="http://www.who.int/mediacentre/factsheets/fs282/en/">WHO のデータ</a>によると、2017年の視覚障碍者は約253百万人です。</p> +</div> + +<p>記事のこのセクションでは、可能な限りアクセス可能な表にするためのその他の手法について説明します。</p> + +<h3 class="attTitle" id="Using_column_and_row_headers" name="Using_column_and_row_headers">列ヘッダーと行ヘッダーを使用する</h3> + +<p>スクリーンリーダーは全てのヘッダーを識別し、それらを使用してそれらのヘッダーとそれらが関連するセルとの間のプログラムによる関連付けを行います。 列ヘッダーと行ヘッダーの組み合わせにより、各セル内のデータが識別および解釈されるため、スクリーンリーダーのユーザは、晴眼のユーザの場合と同様に表を解釈できます。</p> + +<p>前の記事ですでにヘッダーについて説明しました — <a href="/ja/docs/Learn/HTML/Tables/Basics#Adding_headers_with_%3Cth%3E_elements"><code><th></code> 要素によるヘッダーの追加</a>を参照してください。</p> + +<h3 class="attTitle" id="The_scope_attribute" name="The_scope_attribute">scope 属性</h3> + +<p>この記事の新しい話題は {{htmlattrxref("scope","th")}} 属性です。 これは <code><th></code> 要素に追加して、ヘッダーがどのセルのヘッダーであるかをスクリーンリーダーに正確に伝えることができます — 例えば、それが入っているのは行のヘッダーなのか、それとも列のヘッダーなのか？ 先ほどの支出記録の例を振り返ると、次のように列ヘッダーを列ヘッダーとして明確に定義できます。</p> + +<pre class="brush: html"><thead> + <tr> + <th scope="col">Purchase</th> + <th scope="col">Location</th> + <th scope="col">Date</th> + <th scope="col">Evaluation</th> + <th scope="col">Cost (€)</th> + </tr> +</thead></pre> + +<p>そして各行は次のように定義されたヘッダーを持つことができます(列ヘッダーと同様に行ヘッダーを追加した場合)。</p> + +<pre class="brush: html"><tr> + <th scope="row">Haircut</th> + <td>Hairdresser</td> + <td>12/09</td> + <td>Great idea</td> + <td>30</td> +</tr></pre> + +<p>スクリーンリーダーは、このように構成されたマークアップを認識し、例えば、ユーザが列全体または行全体を一度に読み上げることを可能にします。</p> + +<p><code>scope</code> には、さらに2つの可能な値、<code>colgroup</code> と <code>rowgroup</code> があります。 これらは、複数列または複数行の上に位置する見出しに使用されます。 このセクションの最初にある "Items Sold August 2016" の表を見ると、"Clothes" セルが "Trousers"、"Skirts"、"Dresses" のセルの上に位置することがわかります。 これらのセルは全てヘッダー(<code><th></code>)としてマークアップするべきで、 "Clothes" はそれらの上に位置し、他の3つの小見出しを定義する見出しです。 従って、"Clothes" は <code>scope="colgroup"</code> の属性を得るべきですが、それ以外は <code>scope="col"</code> の属性を得ます。</p> + +<h3 class="attTitle" id="The_id_and_headers_attributes" name="The_id_and_headers_attributes">id 属性と headers 属性</h3> + +<p><code>scope</code> 属性を使用する代わりに、{{htmlattrxref("id")}} 属性と {{htmlattrxref("headers", "td")}} 属性を使用して、ヘッダーとセル間の関連付けを作成することもできます。 使い方は次のとおりです。</p> + +<ol> + <li>各 <code><th></code> 要素に一意の <code>id</code> を追加します。</li> + <li>各 <code><td></code> 要素に <code>headers</code> 属性を追加します。 各 <code>headers</code> 属性には、そのセルのヘッダーとして機能する全ての <code><th></code> 要素の <code>id</code> のリストを、スペースで区切って含める必要があります。</li> +</ol> + +<p>これは HTML の表に、表内の各セルの位置の明示的な定義を与えます。 これは、それが属する各列と各行のヘッダーによって定義されます。 スプレッドシートのようなものです。 それがうまく機能するためには、表は本当に列と行の両方のヘッダーを必要とします。</p> + +<p>支出コストの例に戻ると、前の2つのコードは次のように書き直すことができます。</p> + +<pre class="brush: html"><thead> + <tr> + <th id="purchase">Purchase</th> + <th id="location">Location</th> + <th id="date">Date</th> + <th id="evaluation">Evaluation</th> + <th id="cost">Cost (€)</th> + </tr> +</thead> +<tbody> +<tr> + <th id="haircut">Haircut</th> + <td headers="location haircut">Hairdresser</td> + <td headers="date haircut">12/09</td> + <td headers="evaluation haircut">Great idea</td> + <td headers="cost haircut">30</td> +</tr> + + ... + +</tbody></pre> + +<div class="note"> +<p><strong>注</strong>: この方法では、ヘッダーとデータセルの間に非常に正確な関連付けが作成されますが、マークアップがはるかに多くなり、エラーの余地がありません。 <code>scope</code> アプローチは通常ほとんどの表に十分です。</p> +</div> + +<h3 id="Active_learning_playing_with_scope_and_headers" name="Active_learning_playing_with_scope_and_headers">アクティブラーニング: scope と headers で遊ぶ</h3> + +<ol> + <li>この最後の演習では、まず <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold.html">items-sold.html</a> と <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css">minimal-table.css</a> のローカルコピーを新しいディレクトリに作成してください。</li> + <li>この表をより適切にするために適切な <code>scope</code> 属性を追加してみてください。</li> + <li>最後に、最初のファイルの別のコピーを作成して、今度は、<code>id</code> 属性と <code>headers</code> 属性を使用して表にアクセスしやすくします。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: 完成した例と照らし合わせて作業内容を確認できます — <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-scope.html">items-sold-scope.html</a>(<a href="http://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html">ライブもご覧ください</a>)および <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-headers.html">items-sold-headers.html</a>(<a href="http://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html">ライブもご覧ください</a>)。</p> +</div> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>表の HTML について他にも学べることがいくつかありますが、現時点で知っておく必要があることは全てここで説明しました。 この時点で、HTML の表のスタイリングについて学びたいと思うかもしれません — <a href="/ja/docs/Learn/CSS/Styling_boxes/Styling_tables">スタイリングされた表</a>を参照してください。</p> + +<div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div> + +<div> +<h2 id="このモジュール">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Tables/Basics">HTML の表の基本</a></li> + <li><a href="/ja/docs/Learn/HTML/Tables/Advanced">HTML 表の高度な機能とアクセシビリティ</a></li> + <li><a href="/ja/docs/Learn/HTML/Tables/Structuring_planet_data">評価: 太陽系の惑星のデータを構造化する</a></li> +</ul> +</div> diff --git a/files/ja/learn/html/tables/basics/index.html b/files/ja/learn/html/tables/basics/index.html new file mode 100644 index 0000000000..ec37b6ad39 --- /dev/null +++ b/files/ja/learn/html/tables/basics/index.html @@ -0,0 +1,569 @@ +--- +title: HTML の表の基本 +slug: Learn/HTML/Tables/Basics +tags: + - Beginner + - CodingScripting + - HTML + - Learn + - basics + - col + - colgroup + - colspan + - header + - row + - rowspan + - セル + - テーブル + - 記事 +translation_of: Learn/HTML/Tables/Basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div> + +<p class="summary">この記事は、 HTML の表を始めるために、行やセルなどとても基本的なところから、見出し、複数列や行のセルの結合、スタイルを適用するためにセルの列をすべてグループ化する方法などを扱います。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を参照)。</td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>基本的に HTML 表に親しむこと。</td> + </tr> + </tbody> +</table> + +<h2 id="What_is_a_table" name="What_is_a_table">テーブルとは何か</h2> + +<p>テーブルとは、行と列からなる構造化されたデータの集合 (<strong>表形式データ</strong>) です。テーブルを使用すると、さまざまな種類のデータ間のある種の関連性、たとえば人と年齢、1日または1週間、地元のプールの予定時刻などを示す値をすばやく簡単に検索できます。</p> + +<p><img alt="A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47." src="https://mdn.mozillademos.org/files/14583/numbers-table.png" style="display: block; height: 156px; margin: 0px auto; width: 350px;"></p> + +<p><img alt="A swimming timetable showing a sample data table" src="https://mdn.mozillademos.org/files/14587/swimming-timetable.png" style="display: block; height: 301px; margin: 0px auto; width: 794px;"></p> + +<p>1800 年以降のこの米国国勢調査文書で証明されているように、テーブルは人間社会で非常に一般的に使用されており、長い間使用されてきました。</p> + +<p><img alt="A very old parchment document; the data is not easily readable, but it clearly shows a data table being used." src="https://mdn.mozillademos.org/files/14585/1800-census.jpg" style="display: block; height: 505px; margin: 0px auto; width: 800px;"></p> + +<p>したがって、HTML の作成者が Web 上で表形式データを構造化して表示するための手段を提供したことは不思議ではありません。</p> + +<h3 id="How_does_a_table_work" name="How_does_a_table_work">テーブルはどのように動作するか</h3> + +<p>テーブルの特徴は、厳密だということです。 情報は、行と列ヘッダーを視覚的に関連付けることによって簡単に解釈されます。例えば下の表を見て、62個の衛星を持つ巨大ガス惑星である木星を見つけてください。関係する行と列との見出し部分を組み合わせて考えることで答えを見つけることができます。</p> + +<table> + <caption>太陽系の惑星のデータ (<span class="tlid-translation translation" lang="ja"><span title="">惑星の事実は「<a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/">Nasa の惑星情報シート - メートル法</a>」から引用</span></span>)</caption> + <thead> + <tr> + <td colspan="2"></td> + <th scope="col">名前</th> + <th scope="col">質量 (10<sup>24</sup>kg)</th> + <th scope="col">直径 (km)</th> + <th scope="col">密度 (kg/m<sup>3</sup>)</th> + <th scope="col">重力 (m/s<sup>2</sup>)</th> + <th scope="col">一日の長さ (hours)</th> + <th scope="col">太陽からの距離 (10<sup>6</sup>km)</th> + <th scope="col">平均気温 (°C)</th> + <th scope="col">月の数</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="2" rowspan="4" scope="rowgroup">地球型惑星</th> + <th scope="row">水星</th> + <td>0.330</td> + <td>4,879</td> + <td>5427</td> + <td>3.7</td> + <td>4222.6</td> + <td>57.9</td> + <td>167</td> + <td>0</td> + <td>太陽に一番近い</td> + </tr> + <tr> + <th scope="row">金星</th> + <td>4.87</td> + <td>12,104</td> + <td>5243</td> + <td>8.9</td> + <td>2802.0</td> + <td>108.2</td> + <td>464</td> + <td>0</td> + <td></td> + </tr> + <tr> + <th scope="row">地球</th> + <td>5.97</td> + <td>12,756</td> + <td>5514</td> + <td>9.8</td> + <td>24.0</td> + <td>149.6</td> + <td>15</td> + <td>1</td> + <td>私たちの世界</td> + </tr> + <tr> + <th scope="row">火星</th> + <td>0.642</td> + <td>6,792</td> + <td>3933</td> + <td>3.7</td> + <td>24.7</td> + <td>227.9</td> + <td>-65</td> + <td>2</td> + <td>赤い惑星</td> + </tr> + <tr> + <th rowspan="4" scope="rowgroup">木星型惑星</th> + <th rowspan="2" scope="rowgroup">巨大ガス惑星</th> + <th scope="row">木星</th> + <td>1898</td> + <td>142,984</td> + <td>1326</td> + <td>23.1</td> + <td>9.9</td> + <td>778.6</td> + <td>-110</td> + <td>67</td> + <td>最大の惑星</td> + </tr> + <tr> + <th scope="row">土星</th> + <td>568</td> + <td>120,536</td> + <td>687</td> + <td>9.0</td> + <td>10.7</td> + <td>1433.5</td> + <td>-140</td> + <td>62</td> + <td></td> + </tr> + <tr> + <th rowspan="2" scope="rowgroup">巨大氷惑星</th> + <th scope="row">天王星</th> + <td>86.8</td> + <td>51,118</td> + <td>1271</td> + <td>8.7</td> + <td>17.2</td> + <td>2872.5</td> + <td>-195</td> + <td>27</td> + <td></td> + </tr> + <tr> + <th scope="row">海王星</th> + <td>102</td> + <td>49,528</td> + <td>1638</td> + <td>11.0</td> + <td>16.1</td> + <td>4495.1</td> + <td>-200</td> + <td>14</td> + <td></td> + </tr> + <tr> + <th colspan="2" scope="rowgroup"><span class="tlid-translation translation" lang="ja"><span title="">矮星</span></span></th> + <th scope="row">冥王星</th> + <td>0.0146</td> + <td>2,370</td> + <td>2095</td> + <td>0.7</td> + <td>153.3</td> + <td>5906.4</td> + <td>-225</td> + <td>5</td> + <td>2006年に惑星として分類されなくなりましたが、これは<a href="http://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">物議を醸しています</a>。</td> + </tr> + </tbody> +</table> + +<p>正しく行われれば、盲目の人でも HTML テーブルの表形式データを解釈できます。HTML テーブルが成功すれば、晴眼者でも視覚障害者でも同様にユーザエクスペリエンスが向上するはずです。</p> + +<h3 id="Table_styling" name="Table_styling">表のスタイル付け</h3> + +<p>GitHub の<a href="https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html">ライブサンプルもご覧ください</a>。テーブルがもう少し読みやすくなっているということに気付くでしょう。これは、今までこのページで見てきたテーブルには最小限のスタイルしか施されていないからです。対して、GitHub バージョンではより特別な意味を持った CSS が適用されています。</p> + +<p>幻想にふけってはいけません。テーブルを Web 上で有効にするには、<a href="/ja/docs/Learn/CSS">CSS</a> でスタイル情報を提供し、HTML でしっかりとした構造を提供する必要があります。このモジュールでは、HTML 部分に焦点を合わせています。CSS の部分については、ここを終えた後に<a href="/ja/docs/Learn/CSS/Styling_boxes/Styling_tables">表のスタイリング</a>の記事を参照してください。</p> + +<p>このモジュールでは CSS に焦点を当てませんが、スタイルを設定しなくてもデフォルトのテーブルより読みやすくなるように、最小限の CSS スタイルシートを使用できます。<a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">スタイルシートはここ</a>で、そしてスタイルシートを適用する <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">HTML テンプレート</a>も見つけることができます。これらを一緒にすると、HTML テーブルを試すための良い出発点になります。</p> + +<h3 id="When_should_you_NOT_use_HTML_tables" name="When_should_you_NOT_use_HTML_tables">HTML の表を使用するべきではない場面</h3> + +<p>HTML テーブルは表形式のデータに使用する必要があります - これがそれらが設計されているものです。残念ながら、HTML テーブルを使用して Web ページをレイアウトする人が多くいました。ヘッダーを含む1行、コンテンツ列を含む1行、フッターを含む1行などです。<a href="/ja/docs/Learn/Accessibility">アクセシビリティ学習モジュール</a>の<a href="/ja/docs/Learn/Accessibility/HTML#Page_layouts">ページレイアウト</a>でより多くの詳細と例を見つけることができます。これは一般的に使用されていました。ブラウザ間での CSS サポートがひどいものだったからです。テーブルレイアウトは、現在ではあまり一般的ではありませんが、Web の一部の場所ではまだ見られることがあります。</p> + +<p>つまり、<a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a>手法ではなく、テーブルをレイアウトに使用するのは得策ではありません。主な理由は次のとおりです。</p> + +<ol> + <li><strong>レイアウトテーブルは視覚障害のあるユーザのアクセシビリティを低下させます。</strong>視覚障害者が使用する<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">スクリーンリーダー</a>は、HTML ページに存在するタグを解釈し、その内容をユーザに読み上げます。テーブルはレイアウトに適したツールではなく、マークアップは CSS のレイアウト手法よりも複雑であるため、スクリーンリーダーの出力はユーザにとってわかりにくいものになります。</li> + <li><strong>テーブルはタグスープを生成します。</strong>前述のように、テーブルレイアウトは通常、適切なレイアウト手法よりも複雑なマークアップ構造を含みます。これにより、コードの記述、保守、およびデバッグが困難になる可能性があります。</li> + <li><strong>テーブルは自動的には応答しません。</strong>適切なレイアウトコンテナ ({{htmlelement("header")}}、{{htmlelement("section")}}、{{htmlelement("article")}}、{{htmlelement("div")}}など) を使用する場合、その幅はデフォルトで親要素の100％になります。一方、テーブルはデフォルトでは内容に応じてサイズが設定されているため、さまざまなデバイスで効果的に機能するようにテーブルレイアウトのスタイルを変更するには、追加の対策が必要です。</li> +</ol> + +<h2 id="Active_learning_Creating_your_first_table" name="Active_learning_Creating_your_first_table">アクティブラーニング: 最初の表の作成</h2> + +<p>テーブル理論については十分に説明したので、実用的な例に飛び込み、簡単なテーブルを作成しましょう。</p> + +<ol> + <li>まず最初に、ローカルマシンの新しいディレクトリに、<a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">blank-template.html</a> と <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> のローカルコピーを作成します。</li> + <li>すべてのテーブルの内容は、<strong><code><a href="/ja/docs/Web/HTML/Element/table"><table></table></a></code></strong> という2つのタグで囲まれています。HTML のボディの中にこれらを追加してください。</li> + <li>テーブル内の最小のコンテナは、<strong><code><a href="/ja/docs/Web/HTML/Element/td"><td></a></code></strong> 要素によって作成されるテーブルセルです ('td' は 'table data' を表します)。テーブルタグ内に次のコードを追加します。 + <pre class="brush: html notranslate"><td>Hi, I'm your first cell.</td></pre> + </li> + <li>4行のセルが必要な場合は、これらのタグを3回コピーする必要があります。テーブルの内容を次のように更新します。 + <pre class="brush: html notranslate"><td>Hi, I'm your first cell.</td> +<td>I'm your second cell.</td> +<td>I'm your third cell.</td> +<td>I'm your fourth cell.</td></pre> + </li> +</ol> + +<p>お分かりのように、セルは互いの下に配置されているのではなく、同じ行に配置されています。 各 <code><td></code> 要素は単一のセルを作成し、それらが一緒になって最初の行を構成します。 追加するセルごとに行が長くなります。</p> + +<p>この行が大きくなるのを防ぎ、後続のセルを2行目に配置するには、<strong><code><a href="/ja/docs/Web/HTML/Element/tr"><tr></a></code></strong> 要素を使用する必要があります ('tr' は 'table row' を表します)。今これを調査しましょう。</p> + +<ol> + <li>以下のように、既に作成した4つのセルを <code><tr></code> タグ内に配置します。 + + <pre class="brush: html notranslate"><tr> + <td>Hi, I'm your first cell.</td> + <td>I'm your second cell.</td> + <td>I'm your third cell.</td> + <td>I'm your fourth cell.</td> +</tr></pre> + </li> + <li>1行作成したら、あと1、2行作成してみましょう。各行は追加の <code><tr></code> 要素で囲み、各セルを <code><td></code> に含める必要があります。</li> +</ol> + +<p>これにより、テーブルは次のようになります。</p> + +<table> + <tbody> + <tr> + <td>Hi, I'm your first cell.</td> + <td>I'm your second cell.</td> + <td>I'm your third cell.</td> + <td>I'm your fourth cell.</td> + </tr> + <tr> + <td>Second row, first cell.</td> + <td>Cell 2.</td> + <td>Cell 3.</td> + <td>Cell 4.</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>メモ</strong>: GitHub では <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html">simple-table.html</a> としても見つけることができます (<a href="https://mdn.github.io/learning-area/html/tables/basic/simple-table.html">こちらも参照してください</a>)。</p> +</div> + +<h2 id="Adding_headers_with_<th>_elements" name="Adding_headers_with_<th>_elements"><th> 要素による見出しの追加</h2> + +<p>それでは表の見出し、つまり行または列の先頭に配置され、その行または列に含まれるデータの種類を定義する特別なセルに注目しましょう(例として、この記事の最初の例の「Person」セルと「Age」セルを参照してください)。それらがなぜ有用であるかを説明するために、次の表の例を見てください。まずはソースコードから：</p> + +<pre class="brush: html notranslate"><table> + <tr> + <td>&nbsp;</td> + <td>Knocky</td> + <td>Flor</td> + <td>Ella</td> + <td>Juan</td> + </tr> + <tr> + <td>Breed</td> + <td>Jack Russell</td> + <td>Poodle</td> + <td>Streetdog</td> + <td>Cocker Spaniel</td> + </tr> + <tr> + <td>Age</td> + <td>16</td> + <td>9</td> + <td>10</td> + <td>5</td> + </tr> + <tr> + <td>Owner</td> + <td>Mother-in-law</td> + <td>Me</td> + <td>Me</td> + <td>Sister-in-law</td> + </tr> + <tr> + <td>Eating Habits</td> + <td>Eats everyone's leftovers</td> + <td>Nibbles at food</td> + <td>Hearty eater</td> + <td>Will eat till he explodes</td> + </tr> +</table></pre> + +<p>実際にレンダリングされたテーブルは次のとおりです。</p> + +<table> + <tbody> + <tr> + <td></td> + <td>Knocky</td> + <td>Flor</td> + <td>Ella</td> + <td>Juan</td> + </tr> + <tr> + <td>Breed</td> + <td>Jack Russell</td> + <td>Poodle</td> + <td>Streetdog</td> + <td>Cocker Spaniel</td> + </tr> + <tr> + <td>Age</td> + <td>16</td> + <td>9</td> + <td>10</td> + <td>5</td> + </tr> + <tr> + <td>Owner</td> + <td>Mother-in-law</td> + <td>Me</td> + <td>Me</td> + <td>Sister-in-law</td> + </tr> + <tr> + <td>Eating Habits</td> + <td>Eats everyone's leftovers</td> + <td>Nibbles at food</td> + <td>Hearty eater</td> + <td>Will eat till he explodes</td> + </tr> + </tbody> +</table> + +<p>ここで問題は、何が起こっているかを知ることはできますが、データを相互参照することができるほど簡単ではないことです。列と行の見出しが何らかの形で目立つ場合は、その方がはるかに良いでしょう。</p> + +<h3 id="Active_learning_table_headers" name="Active_learning_table_headers">アクティブラーニング: 表の見出し</h3> + +<p>このテーブルを改良してみましょう。</p> + +<ol> + <li>まず、あなたのローカルマシンの新しいディレクトリに <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table.html">dogs-table.html</a> と <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> ファイルのローカルコピーを作ります。HTML には、上で見たのと同じ Dogs の例が含まれています。</li> + <li>テーブルのヘッダを視覚的にも意味的にもヘッダとして認識させるには、<strong><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th"><th></a></code></strong> 要素を使用します ('th' は 'table header' を表します)。これは <code><td></code> とまったく同じように機能しますが、通常のセルではなくヘッダーを表す点が異なります。HTML を開き、テーブルのヘッダを囲む全ての <code><td></code> 要素を <code><th></code> 要素に変更してください。</li> + <li>HTML を保存してブラウザにロードすると、ヘッダーがヘッダーらしく見えます。</li> +</ol> + +<div class="note"> +<p><strong>メモ</strong>: 完成した例は GitHub の <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html">dogs-table-fixed.html</a> にあります (<a href="https://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html">こちらもご覧ください</a>)。</p> +</div> + +<h3 id="Why_are_headers_useful" name="Why_are_headers_useful">なぜ見出しは便利なのか</h3> + +<p>私たちはすでにこの質問に部分的に答えました — ヘッダーがはっきり目立つときには探しているデータを見つけやすく、デザインは一般的に見栄えがよくなります。</p> + +<div class="note"> +<p><strong>メモ</strong>: テーブルの見出しにはデフォルトのスタイルがいくつかあります。テーブルに独自のスタイルを追加しなくても、目立つように太字で中央に配置されています。</p> +</div> + +<p>テーブルヘッダには、<code>scope</code> 属性 (次の記事で学ぶことになります) とともに、追加の利点もあります。それらを使用すると、各ヘッダーを同じ行または列のすべてのデータに関連付けることで、テーブルをよりアクセスしやすくすることができます。これにより、スクリーンリーダーはデータの行全体または列全体を一度に読み取ることができます。これは非常に便利です。</p> + +<h2 id="Allowing_cells_to_span_multiple_rows_and_columns" name="Allowing_cells_to_span_multiple_rows_and_columns">セルを複数の行や列で結合できるようにする</h2> + +<p>セルを複数の行または列にまたがるようにしたい場合があるかもしれません。次の簡単な例を見てください。これは一般的な動物の名前を示しています。場合によっては、動物の名前の横にオスとメスの名前を表示したいことがあります。そうでない場合もあるでしょう。そのような場合は、動物の名前を表全体に広げたいだけです。</p> + +<p>最初のマークアップは次のようになります。</p> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>table</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>th</span><span class="punctuation token">></span></span>Animals<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>th</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>th</span><span class="punctuation token">></span></span>Hippopotamus<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>th</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>th</span><span class="punctuation token">></span></span>Horse<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>th</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span><span class="punctuation token">></span></span>Mare<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span><span class="punctuation token">></span></span>Stallion<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>th</span><span class="punctuation token">></span></span>Crocodile<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>th</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>th</span><span class="punctuation token">></span></span>Chicken<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>th</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span><span class="punctuation token">></span></span>Hen<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span><span class="punctuation token">></span></span>Rooster<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>table</span><span class="punctuation token">></span></span></code></pre> + +<p>しかし、出力結果は私たちが望むものではありません。</p> + +<table> + <tbody> + <tr> + <th>Animals</th> + </tr> + <tr> + <th>Hippopotamus</th> + </tr> + <tr> + <th>Horse</th> + <td>Mare</td> + </tr> + <tr> + <td>Stallion</td> + </tr> + <tr> + <th>Crocodile</th> + </tr> + <tr> + <th>Chicken</th> + <td>Hen</td> + </tr> + <tr> + <td>Rooster</td> + </tr> + </tbody> +</table> + +<p>"Animals"、"Hippopotamus"、および "Crocodile" を2列にまたがって作成し、"Horse" と "Chicken" を2列にまたがって作成する方法が必要です。幸いなことに、テーブルのヘッダーとセルには <code>colspan</code> 属性と <code>rowspan</code> 属性があり、それを使って実行できます。どちらも単位なしの数値を受け入れます。これはスパンする行数または列数と同じです。たとえば、<code>colspan="2"</code> を指定すると、セルは2列にまたがります。</p> + +<p>このテーブルを改善するために <code>colspan</code> と <code>rowspan</code> を使用しましょう。</p> + +<ol> + <li>まず、ご使用のローカルマシンの新しいディレクトリに、<a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table.html">animals-table.html</a> ファイルと <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> ファイルのローカルコピーを作成します。HTML には、上記と同じ動物の例が含まれています。</li> + <li>次に、<code>colspan</code> を使用して "Animals"、"Hippopotamus"、および "Crocodile" を2列にまたがって作成します。</li> + <li>最後に、<code>rowspan</code> を使用して "Horse" と "Chicken" を2行にまたがるようにします。</li> + <li>改善を確認するには、ブラウザでコードを保存して開きます。</li> +</ol> + +<div class="note"> +<p><strong>メモ</strong>: 完成した例は GitHub の <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html">animals-table-fixed.html</a> にあります (<a href="https://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html">こちらもご覧ください</a>)。</p> +</div> + +<h2 id="Providing_common_styling_to_columns" name="Providing_common_styling_to_columns">列への共通のスタイル付け</h2> + +<p><span class="tlid-translation translation" lang="ja"><span title="">先に進む前に、この記事で最後に紹介する機能があります。</span><br> + <span title="">HTML では、データの列全体のスタイル情報を1か所にまとめて定義することができます</span></span> — <strong><code><a href="/ja/docs/Web/HTML/Element/col"><col></a></code></strong> <span class="tlid-translation translation" lang="ja"><span title="">要素と</span></span> <strong><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup"><colgroup></a></code></strong> <span class="tlid-translation translation" lang="ja"><span title="">要素です。</span><span title="">列にスタイルを指定するのは少々面倒で非効率的な場合があるためです。列内の</span></span> <code><td></code> <span class="tlid-translation translation" lang="ja"><span title="">や</span></span> <code><th></code> <span class="tlid-translation translation" lang="ja"><span title="">ごとにスタイル情報を指定するか、</span></span>{{cssxref(":nth-child()")}}<span class="tlid-translation translation" lang="ja"><span title=""> などの複雑なセレクタを使用する必要があります。</span></span></p> + +<p>次の簡単な例を見てください。</p> + +<pre class="brush: html notranslate"><table> + <tr> + <th>Data 1</th> + <th style="background-color: yellow">Data 2</th> + </tr> + <tr> + <td>Calcutta</td> + <td style="background-color: yellow">Orange</td> + </tr> + <tr> + <td>Robots</td> + <td style="background-color: yellow">Jazz</td> + </tr> +</table></pre> + +<p>これにより、次のような出力結果が得られます。</p> + +<table> + <tbody> + <tr> + <th>Data 1</th> + <th style="background-color: yellow;">Data 2</th> + </tr> + <tr> + <td>Calcutta</td> + <td style="background-color: yellow;">Orange</td> + </tr> + <tr> + <td>Robots</td> + <td style="background-color: yellow;">Jazz</td> + </tr> + </tbody> +</table> + +<p>列内の3つすべてのセルにわたってスタイル情報を繰り返す必要があるため、これは理想的ではありません (実際のプロジェクトでは3つすべてに <code>class</code> を設定し、別のスタイルシートでスタイルを指定することになります)。これを行う代わりに、<code><col></code> 要素で情報を1回指定できます。<code><col></code> 要素は、開始 <code><table></code> タグのすぐ下の <code><colgroup></code> コンテナ内で指定されます。次のようにテーブルを指定することで、上と同じ効果を生み出すことができます。</p> + +<pre class="brush: html notranslate"><table> + <colgroup> + <col> + <col style="background-color: yellow"> + </colgroup> + <tr> + <th>Data 1</th> + <th>Data 2</th> + </tr> + <tr> + <td>Calcutta</td> + <td>Orange</td> + </tr> + <tr> + <td>Robots</td> + <td>Jazz</td> + </tr> +</table></pre> + +<p>事実上、2つの "スタイル列" を定義しています。1つは各列のスタイル情報を指定しています。最初の列にはスタイルを設定していませんが、空白の <code><col></code> 要素を含める必要があります。そうでない場合、スタイルは最初の列にも適用されます。</p> + +<p>両方の列にスタイル情報を適用する場合は、次のように span 属性を持つ1つの <code><col></code> 要素を含めるだけで済みます。</p> + +<pre class="brush: html notranslate"><colgroup> + <col style="background-color: yellow" span="2"> +</colgroup></pre> + +<p><code>colspan</code> や <code>rowspan</code> と同じように、<code>span</code> はスタイルを適用したい列の数を指定する単位なしの数値を取ります。</p> + +<h3 id="Active_learning_colgroup_and_col" name="Active_learning_colgroup_and_col">アクティブラーニング: colgroup と col</h3> + +<p>今こそ自分でやってみるべき時です。</p> + +<p>以下に言語教師のタイムテーブルを見ることができます。金曜日に、彼女は一日中オランダ語を教える新しいクラスを持っていますが、彼女はまた火曜日と木曜日に数期間ドイツ語を教えています。彼女は教えている日を含むコラムをハイライトしたいと思います。</p> + +<p>{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}</p> + +<p>以下の手順に従ってテーブルを再作成してください。</p> + +<ol> + <li>まず、<a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable.html">timetable.html</a> ファイルのローカルコピーをあなたのローカルマシンの新しいディレクトリに作成してください。HTML には、上で見たのと同じ表から、列のスタイル情報を除いたものが含まれています。</li> + <li><code><col></code> 要素を追加することができる <code><table></code> タグのすぐ下のテーブルの上部に <code><colgroup></code> 要素を追加します (以下の残りの手順を参照)。</li> + <li>最初の2つの列はスタイルなしのままにする必要があります。</li> + <li>3列目に背景色を追加します。<code>style</code> 属性の値は<code>background-color:#97DB9A;</code> です。</li> + <li>4列目に別の幅を設定します。<code>style</code> 属性の値は <code>width: 42px;</code> です。</li> + <li>5列目に背景色を追加します。<code>style</code> 属性の値は <code>background-color: #97DB9A;</code> です。</li> + <li>これは特別な日であり、彼女は新しいクラスを教えていることを示すために、6番目の列に異なる背景色と境界線を追加します。<code>style</code> <span class="tlid-translation translation" lang="ja"><span title="">属性の値は </span></span><code>background-color:#DCC48E; border:4px solid #C1437A;</code><span class="tlid-translation translation" lang="ja"><span title=""> です。</span></span></li> + <li>The last two days are free days, so just set them to no background color but a set width; the value for the <code>style</code> attribute is <code>width: 42px;</code><br> + 最後の2日間は空き日なので、背景色を設定せずに幅を設定します。<code>style</code> 属性の値は <code>width: 42px;</code> です。</li> +</ol> + +<p>例でどのようにして上手くいくかを見てください。どうしていいか分からなくなったり、作業をチェックしたい場合は、<a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a> として GitHub に私たちのバージョンを見つけることができます (<a href="https://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html">それもライブを見てください</a>)。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>HTML テーブルの基本はこれで終わりです。次の記事では、もう少し高度なテーブルの機能を見て、視覚障害者にとってそれらがどれほどアクセシブルであるかを考えます。</p> + +<p>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</p> + +<div> +<h2 id="このモジュール">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Tables/Basics">HTML の表の基本</a></li> + <li><a href="/ja/docs/Learn/HTML/Tables/Advanced">HTML 表の高度な機能とアクセシビリティ</a></li> + <li><a href="/ja/docs/Learn/HTML/Tables/Structuring_planet_data">評価: 太陽系の惑星のデータを構造化する</a></li> +</ul> +</div> diff --git a/files/ja/learn/html/tables/index.html b/files/ja/learn/html/tables/index.html new file mode 100644 index 0000000000..7f1a8c7fd2 --- /dev/null +++ b/files/ja/learn/html/tables/index.html @@ -0,0 +1,43 @@ +--- +title: HTML テーブル +slug: Learn/HTML/Tables +tags: + - Article + - Beginner + - CodingScripting + - Guide + - HTML + - Landing + - Module + - Tables +translation_of: Learn/HTML/Tables +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">HTML でのとてもよくある仕事はテーブルデータの構造化で、数々の要素と属性がこの目的のためにあります。スタイリング用の <a href="/ja/docs/Learn/CSS">CSS</a> と組み合わせて、HTML は Web 上に、学校の授業の計画や、水泳の時間割や、好きな恐竜やフットボールチームの統計情報といった、情報のテーブルを簡単に表示できます。このモジュールではHTMLを使ってテーブルデータを構造化するのに必要な知識を一通り案内します。</p> + +<h2 id="Prerequisites" name="Prerequisites">必要となる知識</h2> + +<p>このモジュールを学習する前に、HTMLの基本について既に理解している必要があります。もしまだ理解が足りていないと感じているならば <a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を参照してください。</p> + +<div class="note"> +<p><strong>注</strong>: もしあなたが自分のファイルを作成することのできないコンピュータ・タブレット端末そのほかのデバイスで作業をしているならば、 インターネット上の <a href="http://jsbin.com/">JSBin</a> や <a href="https://thimble.mozilla.org/">Thimble</a>といったコーディングプログラムを用いてほとんどのコードの例を試してみることができます。</p> +</div> + +<h2 id="Guides" name="Guides">ガイド</h2> + +<p>このモジュールは以下の話題を含んでいます。:</p> + +<dl> + <dt><a href="/ja/docs/Learn/HTML/Tables/Basics">HTML テーブルの基本</a></dt> + <dd>この記事を読めば、HTMLのテーブルについてのイロハを知ることができます。行や列、見出しやカラムと行を複数に分割するセルの作成を扱い、またいかにしてカラムにあるセルをまとめて見栄えを整えるかについて扱います。</dd> + <dt><a href="/ja/docs/Learn/HTML/Tables/Advanced">HTML テーブルの高度な機能とアクセシビリティ</a></dt> + <dd>このモジュールの2つ目の記事では、 HTMLのもう少し発展的な機能について扱います。 たとえば、見出しや要約、そして行をまとめて表のhead,bodyそしてフッターのsectionにすることです。同時に視覚にハンディキャップを有する人びとのために表のアクセシビリティについても記事で扱います。</dd> +</dl> + +<h2 id="Assessments" name="Assessments">評価</h2> + +<dl> + <dt><a href="/ja/docs/Learn/HTML/Tables/Structuring_planet_data">惑星データの構造化</a></dt> + <dd>テーブルについての記事を理解できたかの評価として、太陽系の星についてのいくつかのデータを提供し、あなたにHTMLを用いて表にしてもらいます。</dd> +</dl> diff --git a/files/ja/learn/html/tables/structuring_planet_data/index.html b/files/ja/learn/html/tables/structuring_planet_data/index.html new file mode 100644 index 0000000000..625a34c151 --- /dev/null +++ b/files/ja/learn/html/tables/structuring_planet_data/index.html @@ -0,0 +1,87 @@ +--- +title: '評価: 太陽系の惑星のデータを構造化する' +slug: Learn/HTML/Tables/Structuring_planet_data +tags: + - Assessment + - Beginner + - CodingScripting + - HTML + - Learn + - テーブル +translation_of: Learn/HTML/Tables/Structuring_planet_data +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div> + +<p class="summary">テーブルの評価では、太陽系の惑星に関するいくつかのデータを提供し、それを HTML テーブルに構造化しましょう。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>この評価を行う前に、このモジュールのすべての記事について学んでいるべきです。</td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>HTML の表やそれに付随する機能に関する理解を確認する。</td> + </tr> + </tbody> +</table> + +<h2 id="はじめに">はじめに</h2> + +<p>この評価を開始するには、ローカルコンピュータの新しいディレクトリに、<a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/blank-template.html">blank-template.html</a>、<a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/minimal-table.css">minimal-table.css</a>、および <a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/planets-data.txt">planets-data.txt</a> のローカルコピーを作成します。</p> + +<div class="note"> +<p><strong>メモ</strong>: 代わりとして、<a class="external external-icon" href="https://jsbin.com/">JSBin</a> や <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> のようなサイトを使って評価することもできます。HTML、CSS、および JavaScript をこれらのオンラインエディタのいずれかに貼り付けることができます。使用しているオンラインエディタに個別の JavaScript/CSS パネルがない場合は、それらを HTML ページ内に <code><script></code>/<code><style></code> 要素をインラインで配置してください。</p> +</div> + +<h2 id="やることの概要">やることの概要</h2> + +<p>あなたは学校で働いています。現在生徒たちは私たちの太陽系の惑星を研究しています、そしてあなたは彼らに惑星についての事実と数字を調べるために分かりやすいデータのセットを提供したいです。HTML データテーブルが理想的です — 利用可能な生データを取得し、それをテーブルに変換する必要があります。以下の手順に従ってください。</p> + +<p>完成した表は次のような外観を備えているはずです:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14609/assessment-table.png" style="display: block; margin: 0 auto;"></p> + +<p>また、<a href="https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html">ここに掲載されている例を見る</a>こともできます (ソースコードを見ないでください — チートしないでください)。</p> + +<ul> +</ul> + +<h2 id="手順">手順</h2> + +<p>次の手順では、表の例を完成させるために必要な作業について説明します。必要なすべてのデータは <code>planets-data.txt</code> ファイルに含まれています。データをうまく視覚化できない場合は、上記の実際の例を見てみるか、図を描いてみてください。</p> + +<ol> + <li><code>blank-template.html</code> のコピーを開き、外部コンテナ、テーブルヘッダー、およびテーブル本体を指定してテーブルを作成します。この例ではテーブルフッターは必要ありません。</li> + <li>提供されたキャプションを自分のテーブルに追加します。</li> + <li>すべての列ヘッダーを含む行をテーブルヘッダーに追加します。</li> + <li>すべての行見出しを意味的に見出しにすることを忘れずに、テーブル本体内にすべてのコンテンツ行を作成します。</li> + <li>すべてのコンテンツが正しいセルに挿入されていることを確認してください — 生データでは、惑星データの各行が関連する惑星の隣に表示されます。</li> + <li>行ヘッダーと列ヘッダーを、それらが見出しとして機能する行、列、または行グループと明確に関連付けられるように属性を追加します。</li> + <li>すべての惑星名行ヘッダーを含む列のすぐ周りに黒い枠線を追加します。</li> +</ol> + +<h2 id="ヒントとTIPS">ヒントとTIPS</h2> + +<ul> + <li>ヘッダー行の最初のセルは空白で、2列にまたがる必要があります。</li> + <li>惑星名の行見出し (例: <em>土星</em>) の左側にあるグループの行見出し (例: <em>木星型惑星</em>) は、整理するのが少し面倒です。それぞれが正しい行数と列数にまたがるようにする必要があります。</li> + <li>ヘッダーを行/列に関連付ける1つの方法は、他の方法よりもはるかに簡単です。</li> +</ul> + +<h2 id="評価">評価</h2> + +<p>あなたが組織的コースの一環としてこの評価に従っている場合、採点のために作品を教師/メンターに渡すことができるはずです。もし自己学習しているのであれば、<a href="https://discourse.mozilla.org/t/structuring-planet-data-assessment/24680">この練習問題についてのディスカッションスレッド</a>、または <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> の <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC チャンネルで尋ねることで、非常に簡単にマーキングガイドを入手することができます。最初にエクササイズをしてみてください。不正をすることによって得られるものは何もありません！</p> + +<p>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</p> + +<h2 id="このモジュール">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Tables/Basics">HTML の表の基本</a></li> + <li><a href="/ja/docs/Learn/HTML/Tables/Advanced">HTML 表の高度な機能とアクセシビリティ</a></li> + <li><a href="/ja/docs/Learn/HTML/Tables/Structuring_planet_data">評価: 太陽系の惑星のデータを構造化する</a></li> +</ul> |