ＨＴＭＬ ３日目
★タグを入れ子にする時はインデントを使ってわかりやすくする
TeraPad先頭の行番号をドラッグすると、選択した行全体を編集できる
その状態で「Tab」をクリックすると「インデント」ができるので便利
Tabで移動する距離は下記のように設定できる。（2くらいがオススメ）
「2」インデントされる
第３章：リストの定義
番号なしリストを定義する
番号なしリストはul要素とli要素を組み合わせて作成する
<ul>
<li>ホーム</li>
<li>講座の紹介</li>
<li>学校案内</li>
<li>お問い合わせ</li>
</ul>- ホーム
- 講座の紹介
- 学校案内
- お問い合わせ
ul要素：番号なしリスト枠
語源：unordered list
ulの子要素はliのみ
li要素：リスト項目
語源：list item（リスト項目）
番号付きリストを定義する
番号付きリストはol要素とli要素を組み合わせて作成する
<ol>
<li>Webデザイン科</li>
<li>Webプログラミング科</li>
<li>オフィスマスター科</li>
</ol>
- Webデザイン科
- Webプログラミング科
- オフィスマスター科
ol要素：番号付きリスト枠
語源：orderd list
olの子要素はliのみ
li要素：リスト項目
語源：list item（リスト項目）
開始番号を変更する属性：ol要素にstart属性
<ol start="5">
<li>Webデザイン科</li>
<li>Webプログラミング科</li>
<li>オフィスマスター科</li>
</ol>- Webデザイン科
- Webプログラミング科
- オフィスマスター科
連番を変更する属性：li要素にvalue属性
<ol start="5">
<li>Webデザイン科</li>
<li value="10">Webプログラミング科</li>
<li>オフィスマスター科</li>
</ol> 5. Webデザイン科
10. Webプログラミング科
11. オフィスマスター科
定義リストを定義する
お知らせやお問い合わせフォーム等によく使用される
dl要素：定義リスト枠
語源：definition list,description list（定義リスト）
dl要素の直下にはdt要素、dd要素のみ入れ子にできる
dt要素：定義リストタイトル
語源：definition title（定義タイトル）description term（定義項目名）
dt要素の直下にブロックレベル要素を入れ子にできない
「タイトル」なので「見出し要素（h2等）」は文法エラーで記述できない
dd要素：定義リスト説明
語源：definition description（定義項目の説明）
<dl>
<dt>JR総武線 東中野駅</dt>
<dd>東口を出て左に30秒ほど歩きます</dd>
<dt>地下鉄大江戸線 東中野駅</dt>
<dd>A1出口をでて右へ30秒ほど歩きます</dd>
</dl>
JR総武線 東中野駅
東口を出て左に30秒ほど歩きます
地下鉄大江戸線 東中野駅
A1出口をでて右へ30秒ほど歩きます
第４章：テーブルの定義
テーブルを定義する
table要素：テーブル枠
語源：table（表組）
tr要素：テーブル行
語源：table row（行）
th要素：見出しセル
語源：table header cell（見出しセル）
中央揃えになる
後々デザインする時に目印になるため、きちんと「見出し：th」を定義する
td要素：通常セル
語源：table data cell（データセル、通常セル）
左揃えになる
テーブル作成の手順
1.tableタグで表組の枠を作る
<body>
<table>
</table>
</body>2.trタグで行を作る
<body>
<table>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
</body>3.１行目のtr要素内にthタグで見出しセルを作る
<body>
<table>
<tr><th>セル1</th><th>セル2</th><th>セル3</th><th>セル4</th></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
</body>4.２行目以降のtr要素内にtdタグで通常セルを作る
<body>
<table>
<tr><th>セル1</th><th>セル2</th><th>セル3</th><th>セル4</th></tr>
<tr><td>セル5</td><td>セル6</td><td>セル7</td><td>セル8</td></tr>
<tr><td>セル9</td><td>セル10</td><td>セル11</td><td>セル12</td></tr>
<tr><td>セル13</td><td>セル14</td><td>セル15</td><td>セル16</td></tr>
</table>
</body>5.table開始タグにborder属性を記述して枠線を表示させる
<body>
<table border="1">
<tr><th>セル1</th><th>セル2</th><th>セル3</th><th>セル4</th></tr>
<tr><td>セル5</td><td>セル6</td><td>セル7</td><td>セル8</td></tr>
<tr><td>セル9</td><td>セル10</td><td>セル11</td><td>セル12</td></tr>
<tr><td>セル13</td><td>セル14</td><td>セル15</td><td>セル16</td></tr>
</table>
</body>※「border」はHTMLではエラーが出るため、通常はCSSで設定をする
テーブルの行や列を連結する
セル連結用属性
列を連結する属性：th要素td要素にcolspan属性
- 列を連結する属性
- th要素もしくはtd要素を記述
- まとめる列数を数値で指定
行を連結する属性：th要素td要素にrowspan属性
- 行を連結する属性
- th要素もしくはtd要素を記述
- まとめる行数を数値で指定
●元のテーブル
<table border="1">
<tr>
<th>セル１</th><th>セル２</th><th>セル３</th><th>セル４</th>
</tr>
<tr>
<td rowspan="3">セル５</td><td>セル６</td><td>セル７</td><td>セル８</td>
</tr>
1.「セル２」～「セル４」の３列を連結させる
<table border="1">
<tr>
<th>セル１</th><th colspan="3">セル２</th><th>セル３</th><th>セル４</th>
</tr>
<tr>
<td rowspan="3">セル５</td><td>セル６</td><td>セル７</td><td>セル８</td>
</tr>
2.不要になった「セル３」「セル４」のth要素を削除する
<table border="1">
<tr>
<th>セル１</th><th colspan="3">セル２</th><th>セル３</th><th>セル４</th>
</tr>
<tr>
<td rowspan="3">セル５</td><td>セル６</td><td>セル７</td><td>セル８</td>
</tr>
3.「セル５」のtd開始タグにrowspan属性を記述して縦３列を連結させる
<table border="1">
<tr>
<th>セル１</th><th colspan="3">セル２</th>
</tr>
<tr>
<td rowspan="3">セル５</td><td>セル６</td><td>セル７</td><td>セル８</td>
</tr>
右に押し出される
4.不要になった「セル９」「セル13」のtd要素を削除する
<table border="1">
<tr>
<th>セル１</th><th colspan="3">セル２</th>
</tr>
<tr>
<td rowspan="3">セル５</td><td>セル６</td><td>セル７</td><td>セル８</td>
</tr>
<tr>
<td>セル９</td><td>セル10</td><td>セル11</td><td>セル12</td>
</tr>
<tr>
<td>セル13</td><td>セル14</td><td>セル15</td><td>セル16</td>
</tr>
</table>