「tableとlistについて」の編集履歴（バックアップ）一覧はこちら

「tableとlistについて」(2015/05/21 (木) 22:34:54) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

#contents

*リスト(ol,ul,li)と定義型リスト（dl,dd,dt）とtableとの違い
ウェブページのコンテンツ部分がひとまとまりになるような部分（料理の材料、料理の作り方、更新情報、Q&A、データの集計）の話をします。
まず、一番最初に持っておく簡単なイメージは
 ulやol⇒箇条書きなどをつくるためのタグ（例：料理の材料や料理の作り方）
 dl⇒定義された用語などを説明するタグ（例：更新情報やQ&A）
 table⇒表を作成するためのタグ（例：データの集計、ウェブメールの受信メール一覧）

**リスト(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(){新年あけましておめでとうございます}）dtタグには2015年1月1日、ddタグには新年あけましておめでとうございますを入れます。
 
+更新情報系（１）
: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>

+Q&A系
dt dd dlを使ったQ&Aページの最も基本的な形は
 <dl>
    <dt>Q1</dt><dd>A ここに答え</dd>
    <dt>Q2</dt><dd>Aここに答え</dd>
 </dl>
という形です。
 Q1
 A ここに答え　


**表(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)

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

また、テーブルをCSSを利用して編集する場合には、勿論thのみを編集したい、背景の色を指定したい場合がでてきます。そのようなときは

 table tr th {}

という形で指定します。
少しtableの話から脇道にそれてしまうのですが、CSSで様々なタグを一括指定するときは
 #aaa, #sss, .eee {}
などのように間に,を入れていきます。

入れ子構造になっているある一つのタグを指定する場合はthの例のようにスペースであけていきます。
 どこどこの　どこどこにある　なになに
というイメージで指定できます。
また、複数あるthの中でもdクラスを指定されているthを指定したい場合、

 table tr th.d {}

という形になります。

#contents

*リスト(ol,ul,li)と定義型リスト（dl,dd,dt）とtableとの違い
ウェブページのコンテンツ部分がひとまとまりになるような部分（料理の材料、料理の作り方、更新情報、Q&A、データの集計）の話をします。
まず、一番最初に持っておく簡単なイメージは
 ulやol⇒箇条書きなどをつくるためのタグ（例：料理の材料や料理の作り方）
 dl⇒定義された用語などを説明するタグ（例：更新情報やQ&A）
 table⇒表を作成するためのタグ（例：データの集計、ウェブメールの受信メール一覧）

**リスト(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(){新年あけましておめでとうございます}）dtタグには2015年1月1日、ddタグには新年あけましておめでとうございますを入れます。
 
+更新情報系（１）
: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>

+Q&A系
dt dd dlを使ったQ&Aページの最も基本的な形は
 <dl>
    <dt>Q1</dt><dd>A ここに答え</dd>
    <dt>Q2</dt><dd>Aここに答え</dd>
 </dl>
という形です。
 Q1
 A ここに答え　


**表(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)