課題3 表

課題3-1

  1. Terapadを起動する。
  2. 「表示」→「オプション」でタブの幅を4文字分にし、タブと空白文字を表示する設定に変更する。


  3. デスクトップに「課題3」フォルダーを作り、さらにその中に「1」フォルダーを作る。
  4. Terapadで「文字/改行コード指定保存」で、文字コードを「UTF-8N」にして、「1」フォルダーの中に「index.html」という名前で保存する。

  5. 以下のコードをコピー&ペーストして上書き保存する。
  6. <!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>

  7. index.htmlをFireFoxで開く。
  8. 3行目以降が表だが、この時点では枠線は表示されていない。
    tableタグで囲んだ部分に表のデータを記述する。
    見出し部分は theadタグ、データ項目部分は tbodyタグで囲む。
    trタグで囲んだ部分に表の1行分のデータを記述する。
    thタグかtdタグで囲んだ部分にセル (マス) 1つ分のデータを記述する。
    (thタグは表の見出し専用、tdは通常のデータ専用。見出しは自動的に太字になる)


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


  11. CSSの「/* 枠をくっつける */」の左に「border-collapse: collapse;」を記入して上書きし、FireFoxのページを更新する。
  12. (セルの間の隙間がなくなる)
    これは table、つまり表そのものに対する設定。プロパティ「border-collapse」に「collapse」を入れることで枠線がくっつく。


  13. CSSの「/* 上下左右の余白 */」の左に「padding: 4px;」を記入して上書きし、FireFoxのページを更新する。
  14. (表の項目の文字の上下左右に余白ができる)
    これは th と td に対する設定。プロパティ「padding」に数値を入れることで文字と上下左右の隙間の幅を設定している。
    数値を「4px 10px」のように2つ書くと、上下は4px, 左右は10px開くようになる。
    数値を「4px 10px 8px」のように3つ書くと、上は4px, 左右は10px、下は8px開くようになる。
    数値を4つ書くと上、右、下、左の順に指定される。


  15. CSSの「/* 中央合わせにする */」の左に「text-align: center;」を記入して上書きし、FireFoxのページを更新する。
  16. (表の「時刻」「天気」のデータ項目が中央合わせになる。ただし、「天気」は幅が狭いので見た目上は変わらない)
    これは <td class="center">と</td>で囲んだデータ項目に対する設定。プロパティ「text-align」に「center」を入れることでセルの中の文字が中央に配置される。
    (なにも設定しなければ td タグで囲んだデータ項目は左寄せになる)
    (本文の方では中央合わせにしたいデータをあらかじめこの形で囲んである)


  17. CSSの「/* 右寄せにする */」の左に「text-align: right;」を記入して上書きし、FireFoxのページを更新する。
  18. (表の「気温」「降水確率」のデータ項目が右寄せになる)
    これは <td class="right">と</td>で囲んだデータ項目に対する設定。プロパティ「text-align」に「right」を入れることでセルの中の文字が右寄せで配置される。
    (本文の方では右寄せにしたいデータをあらかじめこの形で囲んである)
    Webページに限らず、表の数値データは右寄せにして書くのが一般的。


  19. CSSの「/* 背景を灰色にする */」の左に「background-color: #aaaaaa;」を記入して上書きし、FireFoxのページを更新する。
  20. (表の「曇り」の2つのデータ項目の背景が灰色になる)
    本文側では、これらの項目は<td class="center gray">と</td>で囲んである。
    spanタグでも同様にしてまとめて適用できる。
    例えば前回の課題2-1のようなCSSが記述されているなら、<span class="big red italic">と</span>で囲めば「大きい赤い斜めの文字」になる。


  21. CSSの「/* 2倍サイズ */」の左に「font-size: 2.0em;」、「/* 太字 */」の左に「font-weight: bold;」を記入して上書きし、FireFoxのページを更新する。
  22. (最初の「青森市の天気」が大きい太字になる)
    ここでやっていることは表とは関係のない、普通の文字の表示のしかたについての設定。第2回の文字の変更と同じ。
    見出し用の書式をこうして用意しておくと便利。


  23. CSSの「/* 左をあける */」の左に「margin-left: 10px;」を記入して上書きし、FireFoxのページを更新する。
  24. (「青森市の天気」より下の部分が右にずれる)
    本文側では、「5/26の3時間天気」とその下の表全体を<div class="main">と</div> (46行目と108行目) で囲んである。
    こうすることで、見出しと本文の間に段差ができて見やすくなる。
    自分のページを作るときも、このようにして本文をちょっと右にずらすとよい。

    FireFoxでの表示がこれと完全に同じになっていて、Ctrl+Uでソースを表示させてエラー (赤い点線のアンダーライン) がないことを確認したら課題3-1は完了。

課題3-2

  1. 課題3-1の結果表示用のFireFoxのタブ、TeraPadを閉じる。
  2. 「課題3」フォルダの中に「2」フォルダを作る。
  3. 「2」フォルダの中にindex.htmlを作る (新しく作ってもよいし、課題3-1で作ったものをコピーしてもよい)。
  4. そのindex.htmlを編集し、オリジナルのページを作る。

課題の条件
注意 (この課題限定ではなく、Webページ全般について)
以下に例を挙げるが、これらはあくまで参考用。全く同じものはNG。

例1
(新しいテクニックを使っている場所 : 31行目, 36行目, 効果はコメント文に書いてある通り)



例2
(新しいテクニックを使っている場所 : 28~30行目, 34行目, 効果はコメント文に書いてある通り)



例3
(新しいテクニックを使っている場所 : 50~54行目, 59行目)
(「colspan」に2を入れると、そのセルが横2マス分の扱いになる)
(「rowspan」に3を入れると、そのセルが縦3マス分の扱いになる)

提出

inserted by FC2 system