- Terapadを起動する。
- 「表示」→「オプション」でタブの幅を4文字分にし、タブと空白文字を表示する設定に変更する。
- デスクトップに「課題3」フォルダーを作り、さらにその中に「1」フォルダーを作る。
- Terapadで「文字/改行コード指定保存」で、文字コードを「UTF-8N」にして、「1」フォルダーの中に「index.html」という名前で保存する。
- 以下のコードをコピー&ペーストして上書き保存する。
- index.htmlをFireFoxで開く。
- CSSの「/* 枠を描く */」の左に「border: solid 1px;」を記入して上書きし、FireFoxのページを更新する。 (表のそれぞれの項目に枠が表示される)
- CSSの「/* 枠をくっつける */」の左に「border-collapse: collapse;」を記入して上書きし、FireFoxのページを更新する。 (セルの間の隙間がなくなる)
- CSSの「/* 上下左右の余白 */」の左に「padding: 4px;」を記入して上書きし、FireFoxのページを更新する。 (表の項目の文字の上下左右に余白ができる)
- CSSの「/* 中央合わせにする */」の左に「text-align: center;」を記入して上書きし、FireFoxのページを更新する。 (表の「時刻」「天気」のデータ項目が中央合わせになる。ただし、「天気」は幅が狭いので見た目上は変わらない)
- CSSの「/* 右寄せにする */」の左に「text-align: right;」を記入して上書きし、FireFoxのページを更新する。 (表の「気温」「降水確率」のデータ項目が右寄せになる)
- CSSの「/* 背景を灰色にする */」の左に「background-color: #aaaaaa;」を記入して上書きし、FireFoxのページを更新する。 (表の「曇り」の2つのデータ項目の背景が灰色になる)
- CSSの「/* 2倍サイズ */」の左に「font-size: 2.0em;」、「/* 太字 */」の左に「font-weight: bold;」を記入して上書きし、FireFoxのページを更新する。 (最初の「青森市の天気」が大きい太字になる)
- CSSの「/* 左をあける */」の左に「margin-left: 10px;」を記入して上書きし、FireFoxのページを更新する。 (「青森市の天気」より下の部分が右にずれる)


<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <style type="text/css"> /* 画像 */ img { max-width: 100%; /* 最大幅をブラウザの幅にする */ } /* 見出し用 */ .header { /* 2倍サイズ */ /* 太字 */ } /* 本文用 */ div.main { /* 左をあける */ } /* 表全般の設定 */ table { /* 枠をくっつける */ } /* 表の見出し・項目 */ th, td { /* 枠を描く */ /* 上下左右の余白 */ } /* 中央あわせ項目 */ td.center { /* 中央合わせにする */ } /* 右寄せ項目 */ td.right { /* 右寄せにする */ } /* 灰色項目 */ td.gray { /* 背景を灰色にする */ } </style> <title>課題3. 表</title> </head> <body> <span class="header">青森市の天気</span> <div class="main"> 5/26の3時間天気 <table> <thead> <tr> <th>時刻</th> <th>天気</th> <th>気温(℃)</th> <th>降水確率(%)</th> </tr> </thead> <tbody> <tr> <td class="center">03</td> <td class="center">晴れ</td> <td class="right">14.8</td> <td class="right">0</td> </tr> <tr> <td class="center">06</td> <td class="center">晴れ</td> <td class="right">14.9</td> <td class="right">0</td> </tr> <tr> <td class="center">09</td> <td class="center">晴れ</td> <td class="right">19.3</td> <td class="right">0</td> </tr> <tr> <td class="center">12</td> <td class="center">晴れ</td> <td class="right">23.3</td> <td class="right">0</td> </tr> <tr> <td class="center">15</td> <td class="center">晴れ</td> <td class="right">20.4</td> <td class="right">0</td> </tr> <tr> <td class="center">18</td> <td class="center">晴れ</td> <td class="right">18.8</td> <td class="right">10</td> </tr> <tr> <td class="center">21</td> <td class="center gray">曇り</td> <td class="right">17.6</td> <td class="right">10</td> </tr> <tr> <td class="center">24</td> <td class="center gray">曇り</td> <td class="right">15.5</td> <td class="right">10</td> </tr> </tbody> </table> </div> </body> </html> |
3行目以降が表だが、この時点では枠線は表示されていない。
tableタグで囲んだ部分に表のデータを記述する。
見出し部分は theadタグ、データ項目部分は tbodyタグで囲む。
trタグで囲んだ部分に表の1行分のデータを記述する。
thタグかtdタグで囲んだ部分にセル (マス) 1つ分のデータを記述する。
(thタグは表の見出し専用、tdは通常のデータ専用。見出しは自動的に太字になる)
見出し部分は theadタグ、データ項目部分は tbodyタグで囲む。
trタグで囲んだ部分に表の1行分のデータを記述する。
thタグかtdタグで囲んだ部分にセル (マス) 1つ分のデータを記述する。
(thタグは表の見出し専用、tdは通常のデータ専用。見出しは自動的に太字になる)

前回の課題3-1のようなCSS側で「.bold」のようにドットをつけた書き方では、すべての項目に対しての設定が行われるのに対し、「th, td」のように書くとth(見出しのセル)とtd(データ項目のセル)に対して設定が行われる。
結果としてそれぞれのセルに枠が表示される。
「solid」は実線のこと。ほかにも dashed(破線)、dotted(点線)、double(二重線) などがある。
結果としてそれぞれのセルに枠が表示される。
「solid」は実線のこと。ほかにも dashed(破線)、dotted(点線)、double(二重線) などがある。

これは table、つまり表そのものに対する設定。プロパティ「border-collapse」に「collapse」を入れることで枠線がくっつく。

これは th と td に対する設定。プロパティ「padding」に数値を入れることで文字と上下左右の隙間の幅を設定している。
数値を「4px 10px」のように2つ書くと、上下は4px, 左右は10px開くようになる。
数値を「4px 10px 8px」のように3つ書くと、上は4px, 左右は10px、下は8px開くようになる。
数値を4つ書くと上、右、下、左の順に指定される。
数値を「4px 10px」のように2つ書くと、上下は4px, 左右は10px開くようになる。
数値を「4px 10px 8px」のように3つ書くと、上は4px, 左右は10px、下は8px開くようになる。
数値を4つ書くと上、右、下、左の順に指定される。

これは <td class="center">と</td>で囲んだデータ項目に対する設定。プロパティ「text-align」に「center」を入れることでセルの中の文字が中央に配置される。
(なにも設定しなければ td タグで囲んだデータ項目は左寄せになる)
(本文の方では中央合わせにしたいデータをあらかじめこの形で囲んである)
(なにも設定しなければ td タグで囲んだデータ項目は左寄せになる)
(本文の方では中央合わせにしたいデータをあらかじめこの形で囲んである)

これは <td class="right">と</td>で囲んだデータ項目に対する設定。プロパティ「text-align」に「right」を入れることでセルの中の文字が右寄せで配置される。
(本文の方では右寄せにしたいデータをあらかじめこの形で囲んである)
Webページに限らず、表の数値データは右寄せにして書くのが一般的。
(本文の方では右寄せにしたいデータをあらかじめこの形で囲んである)
Webページに限らず、表の数値データは右寄せにして書くのが一般的。

本文側では、これらの項目は<td class="center gray">と</td>で囲んである。
spanタグでも同様にしてまとめて適用できる。
例えば前回の課題2-1のようなCSSが記述されているなら、<span class="big red italic">と</span>で囲めば「大きい赤い斜めの文字」になる。
例えば前回の課題2-1のようなCSSが記述されているなら、<span class="big red italic">と</span>で囲めば「大きい赤い斜めの文字」になる。

ここでやっていることは表とは関係のない、普通の文字の表示のしかたについての設定。第2回の文字の変更と同じ。
見出し用の書式をこうして用意しておくと便利。
見出し用の書式をこうして用意しておくと便利。

本文側では、「5/26の3時間天気」とその下の表全体を<div class="main">と</div> (46行目と108行目) で囲んである。
こうすることで、見出しと本文の間に段差ができて見やすくなる。
自分のページを作るときも、このようにして本文をちょっと右にずらすとよい。
こうすることで、見出しと本文の間に段差ができて見やすくなる。
自分のページを作るときも、このようにして本文をちょっと右にずらすとよい。
FireFoxでの表示がこれと完全に同じになっていて、Ctrl+Uでソースを表示させてエラー (赤い点線のアンダーライン) がないことを確認したら課題3-1は完了。
