- Visual Studio Codeを起動する。
- 「File」→「Preferences」→「Settings」で設定メニューを出し、「render whitespace」で検索して設定を「all」に変える。
- デスクトップに「課題3」フォルダーを作る。
- Visual Studio Codeで「File」→「Open Folder」で「課題3」フォルダーを開く。
- 「課題3」フォルダーの中に「1」「2」フォルダーを作る。
- 「1」フォルダーの中に「index.html」というファイルを作る。
- 以下のコードをコピー＆ペーストして上書き保存する。
- index.htmlをFireFoxで開く。
「時刻」以降が表だが、この時点では枠線は表示されていない。tableタグで囲んだ部分に表のデータを記述する。
見出し部分は theadタグ、データ項目部分は tbodyタグで囲む。
trタグで囲んだ部分に表の1行分のデータを記述する。
thタグかtdタグで囲んだ部分にセル (マス) 1つ分のデータを記述する。
(thタグは表の見出し専用、tdは通常のデータ専用。見出しは自動的に太字になる)
- CSSの部分に以下のものを追加し、ブラウザを更新する。
このように「青森市の天気」以外の部分が以前より右に20ピクセル右にずれていればOK。
「margin」は要素の外側の隙間の設定。ここで「margin-left」つまり左側の隙間を20ピクセルにすることで、これを設定した部分が右に20ピクセルずれる。本文側では、あらかじめ「青森市の天気」以外の部分を <div class="jisage"> と </div> で囲んである。
- CSSの部分に以下のものを追加し、ブラウザを更新する。
(22行目は「border: 1px solid black;」と書けば「black」の前の黒い四角は自動的に表示される)
このように表のそれぞれのセル (マス) の周りに枠が表示されればOK。
CSS側で「.futoji」のように先頭にドットをつけた書き方では、すべての項目に対しての設定が行われるのに対し、「th, td」のように書くとth (見出しのセル) とtd (データ項目のセル) に対して設定が行われる。
結果としてそれぞれのセルに枠が表示される。
「solid」は実線のこと。ほかにも dashed(破線)、dotted(点線)、double(二重線) などがある。
- CSSの部分に以下のものを追加し、ブラウザを更新する。
このようにセルのあいだの隙間がなくなればOK。
これは table、つまり表そのものに対する設定。プロパティ「border-collapse」に「collapse」を入れることで枠線がくっつく。
- CSSの「th, td」に対する設定の部分に以下のものを追加し、ブラウザを更新する。
このようにセルの文字の上下左右の余白が広がっていればOK。
結果として変更前より表が大きくなっているはず。
プロパティ「padding」に数値を入れることで文字と上下左右の隙間の幅を設定している。
数値を「4px 10px」のように2つ書くと、上下は4px, 左右は10px開くようになる。
数値を「4px 10px 8px」のように3つ書くと、上は4px, 左右は10px、下は8px開くようになる。
数値を4つ書くと上、右、下、左の順に指定される。
- 本文とCSSの部分に以下のものを追加し、ブラウザを更新する。
「時刻」「天気」の下の部分が中央合わせ、「天気」「降水確率」の下の部分が右寄せになっていればOK。
FireFoxでの表示がこれと完全に同じになっていて、Ctrl+Uでソースを表示させてエラー (赤い点線のアンダーライン) がないことを確認したら課題3-1は完了。
30～32行目は <td class="center">と</td>で囲んだデータ項目、34～36行目は <td class="right">と</td>で囲んだデータ項目に対する設定。
プロパティ「text-align」に「center」「right」を入れるとセルの中の文字が中央合わせ、右寄せになる。
(なにも設定しなければ td タグで囲んだデータ項目は左寄せになる)本文の方でこう書くことで1, 2列目のデータが「center」、3, 4列目のデータが「right」の設定が適用される。
Webページに限らず、表の数値データは右寄せにして書くのが一般的。
- 06～24時の情報を追加する (情報自体は適当なものでもよい)。
「03」の行の分のコードをすぐ下にコピー＆ペーストして情報だけ書き換えれば楽。
ただし、コピー元の書き方が間違っているとあとで修正が大変なので、13番目のステップの結果がちゃんとできているかの確認は慎重に。
<!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">
.big {
font-size: 2.0em;
}
.futoji {
font-weight: bold;
}
</style>
<title>課題3-1. 表</title>
</head>
<body>
<span class="big futoji">青森市の天気</span>
<div class="jisage">
11/2の3時間天気
<table>
<thead>
<tr>
<th>時刻</th>
<th>天気</th>
<th>気温(℃)</th>
<th>降水確率(%)</th>
</tr>
</thead>
<tbody>
<tr>
<td>03</td>
<td>小雨</td>
<td>11.5</td>
<td>30</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
