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 時点の英語版に同期 --- .../css/building_blocks/styling_tables/index.html | 479 --------------------- 1 file changed, 479 deletions(-) delete mode 100644 files/ja/conflicting/learn/css/building_blocks/styling_tables/index.html (limited to 'files/ja/conflicting/learn') 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 スタイルシートの目的と構造をもう一度見ていきます。

-- cgit v1.2.3-54-g00ecf