schooターミナルwebデザイナー２
HTML入門入れ子で使うタグ
講師：田中昌子先生
- メニューをリストタグで作る（１５分）
- 定義リストを作る（１０分）
- 表組みを作る（１５分）
- 質疑応答（２０分）
メニューをリストタグで作る
ほとんどulタグが使われている
色々なナビがリンクされているサイト
↓↓↓
クロームの要素を検証でタグを見てみる
パンくずリストについて
グローバルナビとは別にサイトに必要不可欠
schooの授業のリストなどもulタグが使われている
Unorderd Listの略 順不同でいい場合
Orderd Listの略 番号が必要な場合
インデントをつけると階層がわかり易い
ルールがある
やってはいけないこと
ulの中にli以外の<p>などをおいてはいけない
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ol>
<li></li>
<li></li>
<li>
<ol>
<li>tbody</li>
<li>tyead</li>
<li>tfooter</li>
</ol>
</li>
</ol>
</body>
</html>
定義リストについて
dlの中に、dtとddのセットをいれる
dtに定義したものをddの中に書く。
dtで定義するものは何個あってもいい。
ddは何個あってもいい
（
<dl>
<dt>夏のフルーツ</dt>
<dd>すいか<dd>
<dt>秋のフルーツ</dt>
<dd>梨</dd>
<dd>ぶどう</dd>
<dd>柿</dd>
</dl>
<dt>に対して<dd>はインデントしない方がいい
HTML５からdtnというタグが増えた
表組みを作る
<table>テーブル
<tr>ティーアール行
<th>ティーエイチ 見出し
<td>ティーディー テーブルデータ
<thead>ティーヘッド 見出しのまとまり
<tbody>ティーボディー テーブルデータのまとまり、大きな表の時に使用
<tfooter>ティー打った テーブルのあとがき 大きな表の時にしよう
colspan属性 コルスパン セルを横方向にマージ
rowspan属性 ロウスパン セルを縦方向にマージ
ドリームウィーバーなどで簡単にやってしまいがちだけど
覚えるまでは、手で入力していこう
見出しの塊がたくさんある時は、<thead>を使う
<table>
<tr>
<th>／</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
</tr>
<tbody>
<tr>
<th>１</th>
<td>国語</td>
<td>国語</td>
<td>国語</td>
<td>国語</td>
<td>国語</td>
</tr>
<tr>
<th>２</th>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
</tr>
<tr>
<th>３</th>
<td>社会</td>
<td>社会</td>
<td>社会</td>
<td>社会</td>
<td>社会</td>
</tr>
</tbody>
<tfooter>
<tr>
<td colspan="6">
※カリキュラムサイトをご覧ください
</td>
</tr>
</tfooter>
</table>
<dt>を<dd>で定義する
新着情報などでも使われる 日付はこれ カテゴリはこれなどと定義されている
htmlコーダー htmlとcssの特化
マークアップエンジニア ほぼほぼ、javascript インタラクションをつくっている
大手などは、ぱっきりと 役割がわかれる
デベロッパーツールでは、勝手にtbodyなどがつくことがあるこれは、Chromeの仕様
rowspanとcolspanがわからなくなる
DWなどでやってると一生覚えられないので
書いてみたりして、集中してやってみよう
コーダーは手打ちがあたりまえ？
変換候補が出ない状態で覚えて
エメットで１０倍速の爆速で書くのがコーダー
すごいコーダーは、手が覚えている
