「tableとlistについて」の編集履歴（バックアップ）一覧はこちら
tableとlistについて - (2015/05/09 (土) 19:59:57) の１つ前との変更点
追加された行は緑色になります。
削除された行は赤色になります。
tableとlistについて説明します。
まず、一番最初に持っておく簡単なイメージは
table⇒表を作成するための要素
list⇒箇条書きなどをつくるための要素
まずは、より分かりやすい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････････････行頭記号との間隔を指定する
リストについてはここまでにします。
続いては表制作に使う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)
tableとlistについて説明します。
まず、一番最初に持っておく簡単なイメージは
table⇒表を作成するための要素
list⇒箇条書きなどをつくるための要素
まずは、より分かりやすい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････････････行頭記号との間隔を指定する
リストについてはここまでにします。
続いては表制作に使う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)
