「tableとlistについて」の編集履歴（バックアップ）一覧に戻る

tableとlistについて - (2015/05/10 (日) 21:38:49) のソース

#contents

*リスト(ol,ul,li)と定義型リスト（dl,dd,dt）とtableとの違い
tableとlistについて説明します。
まず、一番最初に持っておく簡単なイメージは
 table⇒表を作成するための要素
 ulやol⇒箇条書きなどをつくるための要素
 dl⇒定義された用語などを説明する要素

**リスト(ol,ul,li)の使い方
まずは、より分かりやすいlistについて簡単にみていきたいと思います。~
listはナビゲーションを作る時に必ず使用しなければならない訳ではないのですが、ナビゲーションなどをより見やすくしてくれる効果があります。~
最も基本的な形のlist制作には<ol><ul><li>の三つの要素を使用します。ul(「unordered list=順序づけられていないリスト」の略)は箇条書きタイプのリスト、ol(ordered list=順序づけられたリスト)は番号のついたリストを表します。それぞれ英語を覚えておけば途中でこんがらがることはないでしょう。~
li要素には実際の項目に書き入れる内容を記述します。
下に例をあげます。
 <ul>
 <li>材料リスト</li>
 <li>お買い物リスト</li>
 <li>電話番号リスト</li>
 </ul>

 <ol>
 <li>ジャガイモを切る</li>
 <li>鍋にじゃがいもを入れる</li>
 <li>鍋に塩を入れる</li>
 </ol>

これらは以下のように表示されます。
#image(center,width=300px,ulとolの違い.png)

またCSS3にて以下のプロパティを使用し、行頭記号に工夫を凝らす事が可能です。

 list-style･････････････････行頭記号に関する指定をまとめて行う
 list-style-image･･････････行頭記号に画像を指定する
 list-style-type･･･････････行頭記号の種類を指定する
 list-style-position････････行頭記号の表示位置を指定する
 marker-offset････････････行頭記号との間隔を指定する

リストについてはここまでにします。

**定義型リスト（dl,dd,dt）の使い方
先ほどのリストはメニューなどの箇条書きの際に使われるものです。今度は定義型リストと呼ばれるもので、「定義する用語（dt要素）」と「その用語に対する説明（dd要素）」であらわされます。主に、更新情報やQ&Aなどに使われたりしています。更新情報は日付、タイトルといった属性を持ちます。その際に、「日付は、こんなタイトル」というようなニュアンスをした書き方が必要になります。（例：2015年1月1日　　&u(){新年あけましておめでとうございます}）ddタグには2015年1月1日、dtタグには新年あけましておめでとうございますを入れます。
 
+更新情報系（１）
:2015-01-02|新情報のお知らせです。
:2015-01-01|サイトオープンしました。
+更新情報系（２）
:2015-01-04|A君|「春の花」写真を投稿しました。
:2015-01-03|B君|「ジェットコースター」写真を投稿しました。
:2015-01-02|A君|「夏の海」写真を投稿しました。
:2015-01-01|D君|「冬の雨」写真を投稿しました。

 <dl>
 <dt>2015-01-02</dt>
 <dd>新情報のお知らせです。</dd>
 <dt>2015-01-01</dt>
 <dd>サイトオープンしました。</dd>
 </dl>
や
 <dl>
 <dt>2015-01-04</dt>
 <dd>A君</dd>
 <dd>「春の花」写真を投稿しました。</dd>
 <dt>2015-01-03</dt>
 <dd>B君</dd>
 <dd>「ジェットコースター」写真を投稿しました。</dd>
 （略）
 </dl>

**表(table)の使い方
続いては表制作に使うtableについて解説していきます。~
tableはHTML5の中でもとても難しい分野の一つです。~
tableの記述には３つの要素、th(table header=テーブルの見出し),tr(table row=テーブルの横一列のグループ),td(table data=th以外のセルの事)を使用します。実際にはthは太文字で強調されて表示されます。~
以下に最も単純なテーブルのコードを記述してみます。
 <table border="1">
 <tr><th>ここは題名</th><td>ここはデータ</td></tr>
 <tr><th>ここは題名２</th><td>ここはデータ２</td></tr>
 </table>
といった具合です。これは以下ように表示されます。
#image(center,width=300px,簡単なテーブル.png)
ここではそれぞれのセルが独立した形で表示されてしまいます。~
それを一本の線で表すにはCSS3の出番です。~
 table {
       border-collapse: collapse;
 }
と記述してみてください。
 border-collapseはcollapseとseparateを選べます。
 それぞれセルをくっつけて表示するか、離して表示させるか、という意味になっています。
collapseを指定した時、tableは以下のように表示されます。
#image(center,width=300px, 結合したテーブル.png)

ここまでがおおよそ最も基本的な形のテーブル作成です。