From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../html/tables/structuring_planet_data/index.html | 87 ++++++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 files/ja/learn/html/tables/structuring_planet_data/index.html (limited to 'files/ja/learn/html/tables/structuring_planet_data/index.html') 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 +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+ +

テーブルの評価では、太陽系の惑星に関するいくつかのデータを提供し、それを HTML テーブルに構造化しましょう。

+ + + + + + + + + + + + +
前提知識:この評価を行う前に、このモジュールのすべての記事について学んでいるべきです。
目標:HTML の表やそれに付随する機能に関する理解を確認する。
+ +

はじめに

+ +

この評価を開始するには、ローカルコンピュータの新しいディレクトリに、blank-template.html、minimal-table.css、および planets-data.txt のローカルコピーを作成します。

+ +
+

メモ: 代わりとして、JSBin や Thimble のようなサイトを使って評価することもできます。HTML、CSS、および JavaScript をこれらのオンラインエディタのいずれかに貼り付けることができます。使用しているオンラインエディタに個別の JavaScript/CSS パネルがない場合は、それらを HTML ページ内に <script>/<style> 要素をインラインで配置してください。

+
+ +

やることの概要

+ +

あなたは学校で働いています。現在生徒たちは私たちの太陽系の惑星を研究しています、そしてあなたは彼らに惑星についての事実と数字を調べるために分かりやすいデータのセットを提供したいです。HTML データテーブルが理想的です — 利用可能な生データを取得し、それをテーブルに変換する必要があります。以下の手順に従ってください。

+ +

完成した表は次のような外観を備えているはずです:

+ +

+ +

また、ここに掲載されている例を見ることもできます (ソースコードを見ないでください — チートしないでください)。

+ + + +

手順

+ +

次の手順では、表の例を完成させるために必要な作業について説明します。必要なすべてのデータは planets-data.txt ファイルに含まれています。データをうまく視覚化できない場合は、上記の実際の例を見てみるか、図を描いてみてください。

+ +
    +
  1. blank-template.html のコピーを開き、外部コンテナ、テーブルヘッダー、およびテーブル本体を指定してテーブルを作成します。この例ではテーブルフッターは必要ありません。
    2. +
  2. 提供されたキャプションを自分のテーブルに追加します。
    3. +
  3. すべての列ヘッダーを含む行をテーブルヘッダーに追加します。
    4. +
  4. すべての行見出しを意味的に見出しにすることを忘れずに、テーブル本体内にすべてのコンテンツ行を作成します。
    5. +
  5. すべてのコンテンツが正しいセルに挿入されていることを確認してください — 生データでは、惑星データの各行が関連する惑星の隣に表示されます。
    6. +
  6. 行ヘッダーと列ヘッダーを、それらが見出しとして機能する行、列、または行グループと明確に関連付けられるように属性を追加します。
    7. +
  7. すべての惑星名行ヘッダーを含む列のすぐ周りに黒い枠線を追加します。
    8. +
+ +

ヒントとTIPS

+ + + +

評価

+ +

あなたが組織的コースの一環としてこの評価に従っている場合、採点のために作品を教師/メンターに渡すことができるはずです。もし自己学習しているのであれば、この練習問題についてのディスカッションスレッド、または Mozilla IRC の #mdn IRC チャンネルで尋ねることで、非常に簡単にマーキングガイドを入手することができます。最初にエクササイズをしてみてください。不正をすることによって得られるものは何もありません！

+ +

{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}

+ +

このモジュール

+ + -- cgit v1.2.3-54-g00ecf