※テキストエディタ入力例のとなりに、実際にブラウザでどのように表示されるかの画像を付け足しました。（8/15日更新）
●順不同リスト（ul要素）
項目を順不同で並列的に列挙するタイプのリスト。ul要素でリスト全体を囲み、項目それぞれをli要素でマークアップ。
例）<h2>材料</h2><ul>
<li>薄力粉 50グラム</li>
<li>ベーキングパウダー 小さじ4分の1</li>
<li>砂糖 30グラム</li>
<li>無塩バター 50グラム</li>
<li>卵 1個</li>
<li>チョコレート 10グラム</li>
<li>チョコチップ 30グラム</li>
</ul>
料理を作るための材料は順不同なので、ul要素で。実務的には、ナビゲーションなど並列的なリンクリストもul要素でマークアップするのが一般的。
●順序リスト（ol要素）
項目を順序や順番として定義するタイプのリスト。ol要素でリスト全体を囲み、項目をそれぞれli要素でマークアップ。
例）<h2>下準備</h2>
<ol>
<li>薄力粉とベーキングパウダーを合わせ3回くらいふるいにかける。</li>
<li>バターと卵は室温に戻しておく。</li>
<li>オーブンを180度に加熱し、温めておく。</li>
<li>チョコレートを刻んで耐熱容器にいれ、電子レンジで数秒加熱する。</li>
</ol>
料理をつくる手順は「順序」を示す必要があるので、ol要素でマークアップ。他にも、売り上げランキングなど順位を示す場合にも利用。
ブラウザではli要素の先頭に「1.」「2.」「3.」と番号がふられる。
●定義リスト（dl要素）
「用語」と「説明」で構成するタイプのリストを定義リストという。dl要素で全体を囲み、用語をdt要素で、説明をdd要素でマークアップ。
例）<h2>用語集</h2>
<dl>
<dt>薄力粉</dt>
<dd>タンパク質・グルテンが最も少ない小麦粉。粘りが弱く、菓子作りによく
使われます。</dd>
<dt>ベーキングパウダー</dt>
<dd>ふくらし粉のこと。生地をふっくらと膨らませるためにつかいます。</dd>
<dt>無塩バター</dt>
<dd>食塩を添加してないバターのこと。通常のバターは食塩が添加されているので注意しましょう。</dd>
</dl>
実務的には、新着情報リスト（「日付」と「内容」）、商品リスト（「商品写真」と「説明」）、役員リスト（「役職名」と「名前」）、会話リスト（「発言者」と「発言内容」）などに応用して利用。
●表（table要素）
ある内容を表として定義するために利用。単なるテキストの羅列よりも、一覧表としてまとめたほうが見やすくわかりやすいコンテンツもあるので、そういう場合に利用。
例）<h2>材料</h2>
<table summary="材料の一覧表です。">
<tr>
<th>材料名</th><th>分量</th>
</tr>
<tr>
<td>薄力粉</td><td>50グラム</td>
</tr>
<tr>
<td>ベーキングパウダー</td><td>小さじ4分の1</td>
</tr>
<tr><td>砂糖</td><td>30グラム</td>
</tr>
<tr>
<td>無塩バター</td><td>50グラム</td>
</tr>
<tr>
<td>卵</td><td>1個</td>
</tr>
<tr>
<td>チョコレート</td><td>10グラム</td>
</tr>
<tr>
<td>チョコチップ</td><td>30グラム</td>
</tr>
</table>
マークアップにおける用語法として、表の中のひとつひとつの項目を「セル（cell）」、横方向のセルの並びを「行（row）」、縦方向のセルの並びを「列（column）」と表現する。
table要素で全体を囲み、tr要素で行を定義し、ヘッダセル（見出しセル）であるth要素や、データセル（通常のセル）であるtd要素を含める。
caption要素でキャプション（表のタイトル）をつけることもできる。さらに、列グループを定義するcolgroup要素とcol要素、行グループを定義するthead要素、tfoot要素、tbody要素を利用することで、表をさらに詳細に構造化することができる。
例）<table summary="材料の一覧表です。">
<caption>材料</caption>
<col span="1" id="material-name" />
<col span="1" id="material-volume" />
<thead>
<tr>
<th scope="col">材料名</th><th scope="col">分量</th>
</tr>
</thead>
<tbody>
<tr>
<td>薄力粉</td><td>50グラム</td>
</tr>
<tr>
<td>ベーキングパウダー</td><td>小さじ4分の1</td>
</tr>
<tr>
<td>砂糖</td><td>30グラム</td></tr>
<tr>
<td>無塩バター</td><td>50グラム</td>
</tr>
<tr>
<td>卵</td><td>1個</td>
</tr>
<tr>
<td>チョコレート</td><td>10グラム</td>
</tr>
<tr>
<td>チョコチップ</td><td>30グラム</td>
</tr>
</tbody>
</table>
ちょっと最後のやつはあんまりわからなかった。。。実際になにか作成していって何度も入力したりして使ってみないとなかなかわからないのかもしれない。
今日はここまで。
0 件のコメント:
コメントを投稿