From d52ca0108c03ddaa75633c0aa4f9ac2cf7425da1 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 25 Jun 2021 01:28:44 +0900 Subject: Learn/CSS/Building_blocks/Styling_tables を更新 (#1206) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - conflicting/Learn/CSS/Building_blocks/Styling_tables を正規版に統合 - 2021/02/20 時点の英語版に同期 --- files/ja/_redirects.txt | 8 +- files/ja/_wikihistory.json | 7 - .../css/building_blocks/styling_tables/index.html | 479 --------------------- .../css/building_blocks/styling_tables/index.html | 100 +++-- 4 files changed, 57 insertions(+), 537 deletions(-) delete mode 100644 files/ja/conflicting/learn/css/building_blocks/styling_tables/index.html (limited to 'files') diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index b146be359d..3f3d394e3e 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -354,7 +354,7 @@ /ja/docs/CSS/Getting_Started/Lists /ja/docs/conflicting/Learn/CSS/Styling_text/Styling_lists /ja/docs/CSS/Getting_Started/Media /ja/docs/Web/Progressive_web_apps/Responsive/Media_types /ja/docs/CSS/Getting_Started/Selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors -/ja/docs/CSS/Getting_Started/Tables /ja/docs/conflicting/Learn/CSS/Building_blocks/Styling_tables +/ja/docs/CSS/Getting_Started/Tables /ja/docs/Learn/CSS/Building_blocks/Styling_tables /ja/docs/CSS/Getting_Started/Text_styles /ja/docs/Learn/CSS/Styling_text/Fundamentals /ja/docs/CSS/Getting_Started/What_is_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ja/docs/CSS/Getting_Started/Why_use_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works @@ -3666,7 +3666,7 @@ /ja/docs/Web-d/Guide/CSS/Getting_started/Lists /ja/docs/conflicting/Learn/CSS/Styling_text/Styling_lists /ja/docs/Web-d/Guide/CSS/Getting_started/Media /ja/docs/Web/Progressive_web_apps/Responsive/Media_types /ja/docs/Web-d/Guide/CSS/Getting_started/Selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors -/ja/docs/Web-d/Guide/CSS/Getting_started/Tables /ja/docs/conflicting/Learn/CSS/Building_blocks/Styling_tables +/ja/docs/Web-d/Guide/CSS/Getting_started/Tables /ja/docs/Learn/CSS/Building_blocks/Styling_tables /ja/docs/Web-d/Guide/CSS/Getting_started/Text_styles /ja/docs/Learn/CSS/Styling_text/Fundamentals /ja/docs/Web-d/Guide/CSS/Getting_started/What_is_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ja/docs/Web-dd/Guide/CSS/Getting_started/Cascading_and_inheritance /en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance @@ -4369,7 +4369,7 @@ /ja/docs/Web/CSS/Getting_started/Lists /ja/docs/conflicting/Learn/CSS/Styling_text/Styling_lists /ja/docs/Web/CSS/Getting_started/Media /ja/docs/Web/Progressive_web_apps/Responsive/Media_types /ja/docs/Web/CSS/Getting_started/Selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors -/ja/docs/Web/CSS/Getting_started/Tables /ja/docs/conflicting/Learn/CSS/Building_blocks/Styling_tables +/ja/docs/Web/CSS/Getting_started/Tables /ja/docs/Learn/CSS/Building_blocks/Styling_tables /ja/docs/Web/CSS/Getting_started/Text_styles /ja/docs/Learn/CSS/Styling_text/Fundamentals /ja/docs/Web/CSS/Getting_started/What_is_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ja/docs/Web/CSS/Index /ja/docs/orphaned/Web/CSS/Index @@ -4566,7 +4566,7 @@ /ja/docs/Web/Guide/CSS/Getting_started/Lists /ja/docs/conflicting/Learn/CSS/Styling_text/Styling_lists /ja/docs/Web/Guide/CSS/Getting_started/Media /ja/docs/Web/Progressive_web_apps/Responsive/Media_types /ja/docs/Web/Guide/CSS/Getting_started/Selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors -/ja/docs/Web/Guide/CSS/Getting_started/Tables /ja/docs/conflicting/Learn/CSS/Building_blocks/Styling_tables +/ja/docs/Web/Guide/CSS/Getting_started/Tables /ja/docs/Learn/CSS/Building_blocks/Styling_tables /ja/docs/Web/Guide/CSS/Getting_started/Text_styles /ja/docs/Learn/CSS/Styling_text/Fundamentals /ja/docs/Web/Guide/CSS/Getting_started/What_is_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ja/docs/Web/Guide/CSS/Getting_started/Why_use_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index 30eea2fe9b..16b74330ec 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -48531,13 +48531,6 @@ "ethertank" ] }, - "conflicting/Learn/CSS/Building_blocks/Styling_tables": { - "modified": "2019-03-23T23:30:40.564Z", - "contributors": [ - "teoli", - "ethertank" - ] - }, "conflicting/Learn/CSS/CSS_layout": { "modified": "2019-03-23T23:30:42.231Z", "contributors": [ diff --git a/files/ja/conflicting/learn/css/building_blocks/styling_tables/index.html b/files/ja/conflicting/learn/css/building_blocks/styling_tables/index.html deleted file mode 100644 index 0b8c69302c..0000000000 --- a/files/ja/conflicting/learn/css/building_blocks/styling_tables/index.html +++ /dev/null @@ -1,479 +0,0 @@ ---- -title: Tables -slug: conflicting/Learn/CSS/Building_blocks/Styling_tables -tags: - - CSS - - CSS:Getting_Started -translation_of: Learn/CSS/Building_blocks/Styling_tables -translation_of_original: Web/Guide/CSS/Getting_started/Tables -original_slug: Web/Guide/CSS/Getting_started/Tables ---- -
- {{CSSTutorialTOC}}{{previousPage("/ja/docs/CSS/Getting_Started/Layout", "Layout")}}
-

これは CSS Getting Started チュートリアルの第 13 章です。ここではさらに高度なセレクタと、テーブルのスタイルづけに特有の方法を述べます。テーブルを含む新しいサンプル文書と、スタイルシートを作ってください。

-

表（テーブル）について

-

テーブルは、縦軸 / 横軸のデータ構造を持つ情報の並びです。テーブルは複雑になることがあり、複雑なテーブルはブラウザによって違った表示になる場合があります。

-

文書を設計する際には、テーブルを細かな情報同士の 関係性 を示すのに使ってください。そうすれば、ブラウザによって少し違った表示がされても問題ありません。目的が依然はっきりしているためです。

-

精密な視覚的レイアウトを作るために、テーブルの変わった使い方をしないでください。そういった目的には、このチュートリアルの前のページにある技法（レイアウト）のほうが適しています。

-

テーブルの構造

-

テーブルでは、情報の一つ一つが セル（cell） に入れて表示されます。

-

ページを横切るように並ぶセルが、 行（row）を作ります。

-

テーブルによっては、行はグループ化されているかもしれません。テーブルの初めにある特殊な行グループが、ヘッダー（header）です。テーブルの終わりにある特殊な行グループが、フッター（footer）です。テーブルの中心的な行が ボディ（body）で、これも、グループに入っているかもしれません。

-

ページ下方に向けて並ぶセルは列（column）を作りますが、CSS のテーブルでは、列の用途には制限があります。

-
-
- 例
-

Selectors ページの Selectors based on relationships の表には、行が 5 つ、セルが 10 個あります。

-

最初の行はヘッダーです。残りの 4 つの行はボディです。フッターはありません。

-

列は 2 つあります。

-
-

このチュートリアルでは結果が予測できるような、簡単なテーブルしか扱いません。簡単なテーブルでは、各セルがどれも 1 つの行と 1 つの列を占めます。セルが 1 行や 1 列以上に 伸びた（span）複雑なテーブルにも CSS を使えますが、そういったテーブルはこの基本チュートリアルの範疇を超えています。

-

ボーダー

-

セルにはマージンがありません。

-

セルにはボーダーとパディングがあります。デフォルトでは、ボーダーはテーブルの {{cssxref("border-spacing")}} プロパティで決められます。テーブルの {{cssxref("border-collapse")}} プロパティを collapse にすると、間隔を完全に取り除くことができます。

-
-
- 例
-

テーブルが 3 つあります。

-

左のテーブルには 0.5em 幅のボーダーがあります。中央のテーブルには幅ゼロのボーダーがあります。右のテーブルには 折り畳まれた（collapsed）ボーダーがあります:
- （表示例は、この wiki の制限により、正しく表示されていないかもしれません）

- - - - - - - - -
- - - - - - - - - - - -
ClubsHearts
DiamondsSpades
- 		- - - - - - - - - - - -
ClubsHearts
DiamondsSpades
- 		- - - - - - - - - - - -
ClubsHearts
DiamondsSpades
-
-
-

キャプション

-

{{HTMLElement("caption")}} 要素はテーブル全体に当てられるラベルです。デフォルトでは、テーブルの一番上に表示されます。

-

底部に移動させるには、{{cssxref("caption-side")}} プロパティを bottom にします。プロパティは継承されるので、テーブルに設定することも、祖先要素に設定することもできます。

-

キャプションの文字にスタイルをつけるには、通常のテキスト用のプロパティを使ってください。

-
-
- 例
-

このテーブルは底部にキャプションがあります

-

（表示例は、この wiki の制限により、正しく表示されていないかもしれません）

- 
#demo-table > caption {
-  caption-side: bottom;
-  font-style: italic;
-  text-align: right;
-}
-
- - - - - - -
- - - - - - - -
- Suits
- - - - - - - - - - - -
ClubsHearts
DiamondsSpades
-
-
-
-

空のセル

-

テーブル要素に {{cssxref("empty-cells")}}: show; と定義すると、空のセル（これはつまりセルのボーダーと背景です）を表示できます。

-

隠すには empty-cells: hide; と定義します。こうすると、セルの親要素に背景があるとき、空のセル越しに見ることができます。

-
-
- 例
-

次のテーブルは薄い緑の背景を持っています。各セルは薄い灰色の背景と濃い灰色のボーダーを持っています。

-

左のテーブルでは、空セルが見えています。右のテーブルでは隠されています:

- - - - - - - -
- - - - - - - - - - - -
 Hearts
DiamondsSpades
- 		- - - - - - - - - - - -
 Hearts
DiamondsSpades
-
-
-
-
- 詳細
-

テーブルについての詳しい情報は、CSS 仕様書の Tables をご覧ください。

-

そこにある情報はこのチュートリアルを超えたものになりますが、そこでは、複雑なテーブルに影響する、ブラウザ間の相違については触れていません。

-
-

実習: テーブルのスタイルづけ

-
    -
  1. 新しい HTML 文書 doc3.html を作ってください。次の内容をコピー＆ペーストしてください。スクロールさせて、コピー漏れがないか確認してください: -
    - 
    <!DOCTYPE html>
-<html>
-  <head>
-    <title>Sample document 3</title>
-    <link rel="stylesheet" href="style3.css">
-  </head>
-  <body>
-    <table id="demo-table">
-      <caption>Oceans</caption>
-      <thead>
-        <tr>
-          <th></th>
-          <th>Area</th>
-          <th>Mean depth</th>
-        </tr>
-        <tr>
-          <th></th>
-          <th>million km<sup>2</sup></th>
-          <th>m</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <th>Arctic</th>
-          <td>13,000</td>
-          <td>1,200</td>
-        </tr>
-        <tr>
-          <th>Atlantic</th>
-          <td>87,000</td>
-          <td>3,900</td>
-        </tr>
-        <tr>
-          <th>Pacific</th>
-          <td>180,000</td>
-          <td>4,000</td>
-        </tr>
-        <tr>
-          <th>Indian</th>
-          <td>75,000</td>
-          <td>3,900</td>
-        </tr>
-        <tr>
-          <th>Southern</th>
-          <td>20,000</td>
-          <td>4,500</td>
-        </tr>
-      </tbody>
-      <tfoot>
-        <tr>
-          <th>Total</th>
-          <td>361,000</td>
-          <td></td>
-        </tr>
-        <tr>
-          <th>Mean</th>
-          <td>72,000</td>
-          <td>3,800</td>
-        </tr>
-      </tfoot>
-    </table>
-  </body>
-</html>
-
    -
    -
    2. -
  2. 新しいスタイルシート style3.css を作ります。次の内容をコピー＆ペーストしてください。スクロールして、コピー漏れがないことを確認します: - 
    /*** Style for doc3.html (Tables) ***/
-
-#demo-table {
-  font: 100% sans-serif;
-  background-color: #efe;
-  border-collapse: collapse;
-  empty-cells: show;
-  border: 1px solid #7a7;
-}
-
-#demo-table > caption {
-  text-align: left;
-  font-weight: bold;
-  font-size: 200%;
-  border-bottom: .2em solid #4ca;
-  margin-bottom: .5em;
-}
-
-
-/* basic shared rules */
-#demo-table th,
-#demo-table td {
-  text-align: right;
-  padding-right: .5em;
-}
-
-#demo-table th {
-  font-weight: bold;
-  padding-left: .5em;
-}
-
-
-/* header */
-#demo-table > thead > tr:first-child > th {
-  text-align: center;
-  color: blue;
-}
-
-#demo-table > thead > tr + tr > th {
-  font-style: italic;
-  color: gray;
-}
-
-/* fix size of superscript */
-#demo-table sup {
-  font-size: 75%;
-}
-
-/* body */
-#demo-table td {
-  background-color: #cef;
-  padding:.5em .5em .5em 3em;
-}
-
-#demo-table tbody th:after {
-  content: ":";
-}
-
-
-/* footer */
-#demo-table tfoot {
-  font-weight: bold;
-}
-
-#demo-table tfoot th {
-  color: blue;
-}
-
-#demo-table tfoot th:after {
-  content: ":";
-}
-
-#demo-table > tfoot td {
-  background-color: #cee;
-}
-
-#demo-table > tfoot > tr:first-child td {
-  border-top: .2em solid #7a7;
-}
-
    -
    3. -
  3. 文書をブラウザで開きます。次の内容に似たものになるでしょう: - - - - - - -
    -
    -

    Oceans

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
     AreaMean depth
     million km2m
    Arctic:13,0001,200
    Atlantic:87,0003,900
    Pacific:180,0004,000
    Indian:75,0003,900
    Southern:20,0004,500
    Total:361,000 
    Mean:72,0003,800
    -
    -
    -
    -
    4. -
  4. 表示されたテーブルとスタイルシートにあるルールを比較して、各行の働きを理解できているか確かめてください。自信のないルールを見つけたら、そのルールをコメントアウトしてブラウザを更新し、何が起きるか見てみましょう。このテーブルに関する注意点は次のとおりです: -
      -
    • キャプションはテーブルのボーダーより外側に置かれています。
      • -
    • もしオプションでフォントの最小値を設定していれば、 km2 の上付き文字に影響します。
      • -
    • 空セルが 3 つあります。そのうち2つは、テーブルの背景を透過しています。 3 つ目は背景と上辺にボーダーを持ちます。
      • -
    • コロンはスタイルシートで追加しています。
      • -
    -
    5. -
-
-
- チャレンジ
-

スタイルシートを、テーブルが次のようになるように変えてください:

- - - - - - -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 AreaMean depth
 million km2m
Arctic:13,0001,200
Atlantic:87,0003,900
Pacific:180,0004,000
Indian:75,0003,900
Southern:20,0004,500
Total:361,000 
Mean:72,0003,800
-
-

Oceans

-
-
-
-

チャレンジの解答を見る。

-

さて次は？

-

{{nextPage("/ja/docs/CSS/Getting_Started/Media", "Media")}} このページは、CSS のプロパティと値に主眼を置いたチュートリアルの最後のページです。プロパティと値についてのすべての概要については、CSS 仕様書の Full property table をご覧ください。

-

次のページでは、CSS スタイルシートの目的と構造をもう一度見ていきます。

diff --git a/files/ja/learn/css/building_blocks/styling_tables/index.html b/files/ja/learn/css/building_blocks/styling_tables/index.html index 9d3988ddf7..9e9cc3f0be 100644 --- a/files/ja/learn/css/building_blocks/styling_tables/index.html +++ b/files/ja/learn/css/building_blocks/styling_tables/index.html @@ -11,32 +11,32 @@ tags: - Tables translation_of: Learn/CSS/Building_blocks/Styling_tables --- -

{{LearnSidebar}}

+
{{LearnSidebar}}
-

{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}

+
{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}
-
+

-

HTML 表を装飾することは、世界で最も魅力的な仕事ではありませんが、時にはそれをしなければならないこともあります。 この記事では、これまでに説明した機能のいくつかとともに、HTML 表を見栄え良くするためのガイドを提供します。

+

HTML の表を装飾することは、世界で最も魅力的な仕事ではありませんが、時にはそれをしなければならないこともあります。 この記事では、これまでに説明した機能のいくつかとともに、HTML の表を見栄え良くするためのガイドを提供します。

- + - +
前提条件:HTML の基本（HTML 入門）と HTML 表 および CSS に関するアイデア（CSS の第一歩）に関する基本的な知識を得ている。HTML の基本 (HTML 入門) と HTML の表に関する知識、 CSS の動作に関する理解 (CSS の第一歩)。
目的:HTML 表を効果的に装飾する方法を学ぶ。HTML の表を効果的に装飾する方法を学ぶ。
-

典型的な HTML 表

+

典型的な HTML の表

-

典型的な HTML 表を見ることから始めましょう。 まあ、典型的な言い方ですが、ほとんどの HTML 表の例は、靴、天気、あるいは従業員に関するものです。 私達はイギリスの有名なパンクバンドについてそれを作ることで、もっと面白くすることにしました。 マークアップはこんな感じです。

+

典型的な HTML の表を見ることから始めましょう。 まあ、私もよく言いますが、ほとんどの HTML の表の例は、靴、天気、あるいは従業員に関するものです。 私たちはイギリスの有名なパンクバンドについてそれを作ることで、もっと面白くすることにしました。 マークアップはこのような感じです。

-
<table>
+
<table>
   <caption>A summary of the UK's most famous punk bands</caption>
   <thead>
     <tr>
@@ -77,29 +77,29 @@ translation_of: Learn/CSS/Building_blocks/Styling_tables
   </tfoot>
 </table>

 
-
{{htmlattrxref("scope","th")}}、{{htmlelement("caption")}}、{{htmlelement("thead")}}、{{htmlelement("tbody")}} などの機能のおかげで、表はうまくマークアップされ、簡単に装飾を整えられ、アクセスしやすくなりました。 残念なことに、画面に表示したときは見栄えがよくありません（punk-bands-unstyled.html でライブを見る）。

+
{{htmlattrxref("scope","th")}}、{{htmlelement("caption")}}、{{htmlelement("thead")}}、{{htmlelement("tbody")}} などの機能のおかげで、表はうまくマークアップされ、簡単に装飾を整えられ、アクセスしやすくなりました。 残念なことに、画面に表示したときは見栄えがよくありません (punk-bands-unstyled.html でライブを見る)。

 
-

+

 
-
それは窮屈に見え、読みにくく、そして退屈です。 これを修正するために CSS を使用する必要があります。

+
ブラウザーの既定のスタイリングでは、窮屈で、読みにくく、つまらなく見えます。これを修正するためには CSS を使用する必要があります。

 
-
テーブルのスタイリング

+
表のスタイリング

 
-
テーブルの例を一緒にスタイリングしてみましょう。

+
表の例を一緒にスタイリングしてみましょう。

 
 
    
  
  1. まず始めに、サンプルマークアップのローカルコピーを作成し、noise と leopardskin の両方の画像をダウンロードして、3つのファイルをローカルコンピュータのどこかの作業ディレクトリに配置します。
    2. 
  
  2. 次に、style.css という名前の新しいファイルを作成し、他のファイルと同じディレクトリに保存します。
    3. 
  
  3. {{htmlelement("head")}} の内側に次の HTML 行を配置して、CSS を HTML にリンクします。
-  
    <link href="style.css" rel="stylesheet" type="text/css">
    
+  
    <link href="style.css" rel="stylesheet" type="text/css">
    
  
    4. 
 

 
-
スペーシングとレイアウト

+
スペーシングとレイアウト

 
-
最初にすべきことは、スペーシングやレイアウトを整理することです — デフォルトの表の装飾はとても窮屈です！ これを行うには、style.css ファイルに次の CSS を追加します。

+
最初にすべきことは、スペーシングやレイアウトを整理することです — 既定のの表の装飾はとても窮屈です！ これを行うには、style.css ファイルに次の CSS を追加します。

 
-
/* spacing */
+
/* spacing */
 
 table {
   table-layout: fixed;
@@ -131,19 +131,19 @@ th, td {
 
注意すべき最も重要な部分は次のとおりです。

 
 
    
- 
  • {{cssxref("table-layout")}} の値を fixed に設定すると、デフォルトで表の動作が多少予測しやすくなるため、通常は表に設定することをお勧めします。 通常、表の列は、含まれるコンテンツの量に応じてサイズが変更される傾向があり、これは奇妙な結果を生むことがあります。 table-layout: fixed を使うと、見出しの幅に応じてカラムのサイズを調整し、その内容を適切に処理することができます。そのために、thead th:nth-child(n) ({{cssxref(":nth-child")}}) セレクタ（<thead> 要素の中の <th> 要素で、シーケンス中の n 番目の子を選択する）で4つの異なる見出しを選択し、それらに設定されたパーセンテージの幅を与えています。列全体の幅はその見出しの幅に従うので、表の列のサイズを変更するのに適した方法です。 Chris Coyier は、このテクニックを Fixed Table Layouts でさらに詳しく説明しています。
    
+ 
  • {{cssxref("table-layout")}} の値を fixed に設定すると、既定で表の動作が多少予測しやすくなるため、通常は表に設定することをお勧めします。 通常、表の列は、含まれるコンテンツの量に応じてサイズが変更される傾向があり、これは奇妙な結果を生むことがあります。 table-layout: fixed を使うと、見出しの幅に応じてカラムのサイズを調整し、その内容を適切に処理することができます。そのために、thead th:nth-child(n) ({{cssxref(":nth-child")}}) セレクター ({{htmlelement("thead")}} 要素の中の {{htmlelement("th")}} 要素で、シーケンス中の n 番目の子を選択する) で 4 つの異なる見出しを選択し、それらに設定されたパーセント値の幅を与えています。列全体の幅はその見出しの幅に従うので、表の列のサイズを変更するのに適した方法です。 Chris Coyier は、このテクニックを Fixed Table Layouts でさらに詳しく説明しています。
    
   
    
-  これは 100% の {{cssxref("width")}} と結合されています。 つまり、表は入れられているコンテナをすべて満たし、とてもレスポンシブになります（しかし、狭い画面幅で見栄えを良くするにはまだ作業が必要です）。
    • 
- 
  • {{cssxref("border-collapse")}} の collapse の値は、あらゆる表の装飾の取り組みにおける標準的なベストプラクティスです。 デフォルトでは、下の画像に示すように、表要素に境界線を設定すると、境界線の間に間隔が空くことになります。 これはあまり見栄えがよくありません（それはあなたが望む外観かもしれませんが、誰が知っていますか？）。 border-collapse: collapse; を設定すると、境界線は1つに折りたたまれ、次のようにずっと良く見えます。
    • 
+  これは 100% の {{cssxref("width")}} と結合されています。 つまり、表は入れられているコンテナーをすべて満たし、とてもレスポンシブになります (しかし、狭い画面幅で見栄えを良くするにはまだ作業が必要です)。
+ 
  • {{cssxref("border-collapse")}} の collapse の値は、あらゆる表の装飾の取り組みにおける標準的なベストプラクティスです。 既定では、下の画像に示すように、表要素に境界線を設定すると、境界線の間に間隔が空くことになります。 これはあまり見栄えがよくありません (あなたが望む外観かもしれませんが、誰にも分かりません)。 border-collapse: collapse; を設定すると、境界線は 1 つに折りたたまれ、次のようにずっと良く見えます。
    • 
  
  • 表全体を囲むように {{cssxref("border")}} を付けています。 これは、後で表のヘッダーとフッターに境界線を付けるために必要です — 表の外側全体に境界線がなく、ギャップで終わる場合、それは本当に奇妙でまとまりのないものに見えます。
    • 
  
  • {{htmlelement("th")}} 要素と {{htmlelement("td")}} 要素に {{cssxref("padding")}} を設定しました。 これにより、データ項目に余裕を持たせることができ、表がもっと見やすくなります。
    • 
 

 
 
この時点で、表はすでにずっと良く見えています。

 
-

+

 
-
簡単なタイポグラフィ

+
簡単なタイポグラフィ

 
 
それでは、テキストを少し整理しましょう。

 
@@ -151,11 +151,11 @@ th, td {
 
 
まず、HTML head の既存の {{htmlelement("link")}} 要素のすぐ上に、次の <link> 要素を追加します。

 
-
<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>

+
<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>

 
 
そして、style.css ファイルの以前の追加の下に、次の CSS を追加します。

 
-
/* typography */
+
/* typography */
 
 html {
   font-family: 'helvetica neue', helvetica, arial, sans-serif;
@@ -186,21 +186,23 @@ tfoot th {
 
    
  
  • グローバルなサンセリフのフォントスタックを設定しました。 これは純粋に装飾的な選択です。 また、素敵に汚れた、パンクな外観のために {{htmlelement("thead")}} 要素内の見出しと {{htmlelement("tfoot")}} 要素内の見出しにもカスタムフォントを設定しました。
    • 
  
  • 読みやすくするために、見出しとセルに {{cssxref("letter-spacing")}} を設定しています。 繰り返しますが、主に装飾的な選択です。
    • 
- 
  • {{htmlelement("tbody")}} 内の表セル内のテキストを見出しと揃えるように中央揃えにしました。 デフォルトでは、セルは {{cssxref("text-align")}} に left の値が与えられ、見出しは center の値が与えられますが、一般的には、両方の揃えを同じに設定する方が見栄えがよくなります。 見出しフォントのデフォルトの太字は、見た目を区別するのに十分です。
    • 
+ 
  • {{htmlelement("tbody")}} 内の表セル内のテキストを見出しと揃えるように中央揃えにしました。 既定では、セルは {{cssxref("text-align")}} に left の値が与えられ、見出しは center の値が与えられますが、一般的には、両方の揃えを同じに設定する方が見栄えがよくなります。 見出しフォントの既定の太字は、見た目を区別するのに十分です。
    • 
  
  • {{htmlelement("tfoot")}} 内の見出しは、データと視覚的に関連付けやすくなるように右揃えしています。
    • 
 

 
 
結果は少しきれいに見えます。

 
-

+

 
-
グラフィックスと色

+
グラフィックスと色

 
-
今度はグラフィックと色です！ 表はパンクとその態度でいっぱいですので、それに合わせていくつかの明るい印象的な装飾を与える必要があります。 心配しないで、表をそんなに騒々しくする必要はありません — もっと微妙で上品な何かを選ぶことができます。

+
今度はグラフィックと色です。表はパンクとその態度でいっぱいですので、それに合わせていくつかの明るい印象的な装飾を与える必要があります。 心配しないで、表をそんなに騒々しくする必要はありません — もっと微妙で上品な何かを選ぶことができます。

 
 
次の CSS を style.css ファイルの一番下に再び追加してください。

 
-
thead, tfoot {
+
/* グラフィックと色 */
+
+thead, tfoot {
   background: url(leopardskin.jpg);
   color: white;
   text-shadow: 1px 1px 1px black;
@@ -212,17 +214,19 @@ thead th, tfoot th, tfoot td {
 }
 

 
-
繰り返しますが、ここでは表に固有のものは何もありませんが、いくつか注意することは価値があります。

+
繰り返しますが、ここでは表に何も特徴がありませんが、いくつか注意することは価値があります。

 
 
{{htmlelement("thead")}} と {{htmlelement("tfoot")}} に {{cssxref("background-image")}} を追加し、ヘッダー内とフッター内のすべてのテキストの {{cssxref("color")}} を白に変更して（そして {{cssxref("text-shadow")}} を指定して）読みやすくしています。 読みやすいように、テキストが背景と比べてコントラストがあるようにしてください。

 
 
また、ヘッダー内とフッター内の {{htmlelement("th")}} 要素と {{htmlelement("td")}} 要素に線形グラデーションを追加して、テクスチャをきれいにし、それらの要素に明るい紫色の境界線を付けました。 複数のネストした要素を使用できるようにしておくと、スタイルを重ね合わせることができます。 はい、複数の背景画像を使用して {{htmlelement("thead")}} 要素と {{htmlelement("tfoot")}} 要素に背景画像と線形グラデーションの両方を配置することもできましたが、複数の背景画像や線形グラデーションをサポートしない古いブラウザーの利点のために別々に行うことにしました。

 
-
ゼブラストライピング

+
ゼブラストライピング

 
-
ゼブラストライプ（zebra stripes）を実装する方法を示すために別のセクションを捧げたいと思います — 表のさまざまなデータ行を解析して読みやすくするために、行の色を交互に並べます。 style.css ファイルの一番下に次の CSS を追加します。

+
ゼブラストライプ (zebra stripes) を実装する方法を示すために別のセクションを捧げたいと思います — 表のさまざまなデータ行を解析して読みやすくするために、行の色を交互に並べます。 style.css ファイルの一番下に次の CSS を追加します。

 
-
tbody tr:nth-child(odd) {
+
/* 縞模様 */
+
+tbody tr:nth-child(odd) {
   background-color: #ff33cc;
 }
 
@@ -239,22 +243,24 @@ table {
 }

 
 
    
- 
  • 先ほど、{{cssxref(":nth-child")}} セレクタが特定の子要素を選択するために使われていたのを見ました。 式をパラメータとして指定することもできるので、一連の要素を選択します。 式 2n-1 はすべての奇数番号の子（1、3、5 など）を選択し、式 2n はすべての偶数番号の子（2、4、6 など）を選択します。 上のコードでは odd と even のキーワードを使っていますが、それは前述の式とまったく同じです。 この場合、奇数行と偶数行に異なる（けばけばしい）色を付けます。
    • 
+ 
  • 先ほど、{{cssxref(":nth-child")}} セレクターが特定の子要素を選択するために使われていたのを見ました。 式をパラメータとして指定することもできるので、一連の要素を選択します。 式 2n-1 はすべての奇数番号の子（1、3、5 など）を選択し、式 2n はすべての偶数番号の子（2、4、6 など）を選択します。 上のコードでは odd と even のキーワードを使っていますが、それは前述の式とまったく同じです。 この場合、奇数行と偶数行に異なる（けばけばしい）色を付けます。
    • 
  
  • また、すべての本体行に繰り返しの背景タイルを追加しました。 これは、テクスチャを提供するためのわずかなノイズです（視覚的な歪みが少しある半透明の .png）。
    • 
- 
  • 最後に、:nth-child セレクタをサポートしていないブラウザーでも本体行に背景があるように、表全体の背景色を単色にしました。
    • 
+ 
  • 最後に、:nth-child セレクターをサポートしていないブラウザーでも本体行に背景があるように、表全体の背景色を単色にしました。
    • 
 

 
 
この色の爆発により、以下のような見た目になります。

 
-

+

 
 
さて、これはあなたの好みではなく、少々限度を超えているかもしれませんが、ここで主張しようとしているのは、表が退屈で学術的である必要はないということです。

 
-
キャプションの装飾

+
キャプションの装飾

 
 
表でやるべきことがもう一つあります — キャプションの装飾です。 これを行うには、style.css ファイルの一番下に次のコードを追加します。

 
-
caption {
+
/* caption */
+
+caption {
   font-family: 'Rock Salt', cursive;
   padding: 20px;
   font-style: italic;
@@ -264,11 +270,11 @@ table {
   letter-spacing: 1px;
 }

 
-
{{cssxref("caption-side")}} プロパティに、bottom の値が与えられている以外に、ここで注目に値するものは何もありません。 これにより、キャプションは表の下に配置され、他の宣言と共にこの最終的な外観が得られます（punk-bands-complete.html でライブで見る）。

+
{{cssxref("caption-side")}} プロパティに、bottom の値が与えられている以外に、ここで注目に値するものは何もありません。 これにより、キャプションは表の下に配置され、他の宣言と共にこの最終的な外観が得られます（punk-bands-complete.html でライブで見る）。

 
-

+

 
-
表の装飾のちょっとした助言

+
表の装飾のちょっとした助言

 
 
先に進む前に、上に示した最も有用なポイントの簡単なリストをお送りします。

 
@@ -281,17 +287,17 @@ table {
  
  • {{cssxref("text-align")}} を使用して、{{htmlelement("th")}} と {{htmlelement("td")}} のテキストを揃えることで、きれいにして見やすくします。
    • 
 
 
-
    あなたのスキルをテストしてください！
    
+
    スキルをテストしましょう
    
 
-
    この記事では多くの情報を取り上げましたが、最も重要な情報を覚えていますか？先に進む前に、この情報を保持しているかどうかを確認するためのテストをいくつか見つけることができます。Test your skills: tables を参照してください。
    
+
    この記事では多くの情報を取り上げましたが、最も重要な情報を覚えていますか？先に進む前に、この情報を保持しているかどうかを確認するためのテストをいくつか見つけることができます。Test your skills: tables を参照してください。
    
 
-
    まとめ
    
+
    まとめ
    
 
-
    テーブルのスタイリングも終わりに近づいてきたので、他にも何か時間を割くものが必要になってきました。次の記事では、CSS をデバッグする方法を探ります。レイアウトが思うように見えない、プロパティが適用されないなどの問題を解決する方法です。これには、ブラウザの DevTools を使用して問題を解決する方法についての情報も含まれています。
    
+
    表のスタイリングも終わりに近づいてきたので、他にも何か時間を割くものが必要になってきました。次の記事では、CSS をデバッグする方法を探ります。レイアウトが思うように見えない、プロパティが適用されないなどの問題を解決する方法です。これには、ブラウザの DevTools を使用して問題を解決する方法についての情報も含まれています。
    
 
 
    {{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}
    
 
-
    このモジュール
    
+
    このモジュール
    
 
 
      
  
    1. カスケードと継承
      2. 
-- 
cgit v1.2.3-54-g00ecf