| マーカー付きリストを作る |
<ul><li>
<ul type=""><li type=""> |
|
■マーカー付きリストを作る |
<ul>タグでマーカー付きリストを作ります。リスト項目は、<ul>タグ内に配置する<li>タグで指定します。 |
一般的なブラウザでは、リストの上下は１行分のスペースを空けて改行が行われ、左側はインデント表示になります。 |
|
<ul><li>はじめに</li>
<li>１．概 要</li>
<li>２．詳 細</li></ul> |
＊ <ul>タグで囲まれた部分に、<li>タグを使って「表示するリスト項目」を記述します。
<li>タグは、終了タグ（</li>）を省くこともできます。 |
|
■マーカーを変更する |
<ul>タグ、または<li>タグに type="" を追加すると、リストのマーカーを変更できます。 |
|
|
| ☆リスト全体のマーカーを変更する場合 |
|
☆項目ごとにマーカーを変更する場合 |
| |
<ul type="circle">
<li>はじめに
<li>１．概 要
<li>２．詳 細</ul> |
<ul>
<li type="disc">はじめに
<li type="circle">１．概 要
<li type="square">２．詳 細</ul> |
|
|
| type="" |
disc | 黒丸（初期値） |
| circle | 白丸 |
| square | 四角 |
|
 この属性は、HTML4.01では非推奨とされています。詳細は、「非推奨タグと非推奨属性」のページをご覧下さい。  |
 この指定内容は、スタイルシートで代替えできます。 |
|
| ★ 使用例とブラウザでの表示 |
|
| 使 用 例 |
|
ブラウザの表示 |
|---|
| |
| ☆標準のマーカー
<ul><li>はじめに</li>
<li>１．概 要</li>
<li>２．詳 細</li></ul> |
☆標準のマーカー |
| |
| ☆リスト全体のマーカーを変更
<ul type="circle">
<li>はじめに
<li>１．概 要
<li>２．詳 細</ul>
|
☆リスト全体のマーカーを変更
** リスト終了 ** |
| |
| ☆項目ごとにマーカーを変更
<ul><li type="disc">はじめに
<li type="circle">１．概 要
<li type="square">２．詳 細</ul> |
☆項目ごとにマーカーを変更 |
|
☆ type属性は、HTML4.01では非推奨とされています。 |
|
|
☆ このページは、<ul>タグにスタイルシートを設定しているため、上下に１行分のスペースが空きません。左側のインデント幅も変更しています。 |
|
| ** <ul><ol> を入れ子にした事例 のページもご覧下さい。** |
|
| 関連するページ |
CSS スタイルシート ：マーカーの種類を指定する
CSS スタイルシート：マーカーの設定をまとめて行う
CSS スタイルシート：マーカーを背景画像で表示する |
Utilety Page (参考) ：「非推奨タグと非推奨属性」へ |
|
| 番号付きリストを作る |
<ol><li>
<ol type=""><li type=""> |
|
■番号付きリストを作る |
<ol>タグで番号付きリストを作ります。リスト項目は、<ol>タグ内に配置する<li>タグで指定します。 |
一般的なブラウザでは、リストの上下は１行分のスペースを空けて改行が行われ、左側はインデント表示になります。 |
|
<ol><li>エンジニア</li>
<li>サブエンジニア</li>
<li>アシスタント</li></ol> |
＊ <ol>タグで囲まれた部分に、<li>タグを使って「表示するリスト項目」を記述します。
<li>タグは、終了タグ（</li>）を省くこともできます。 |
|
■番号の種類を変更する |
<ol>タグ、または<li>タグに type="" を追加すると、番号の種類を変更できます。 |
|
|
| ☆リスト全体の番号を変更する場合 |
|
☆項目ごとに変更したい場合 |
| |
<ol type="A">
<li>エンジニア
<li>サブエンジニア
<li>アシスタント</ol> |
<ol>
<li type="a">エンジニア
<li type="I">サブエンジニア
<li type="i">アシスタント</ol> |
|
|
| type="" |
1 | アラビア数字（初期値） |
| A | アルファベット（大文字） |
| a | アルファベット（小文字） |
| I | ローマ数字（大文字） |
| i | ローマ数字（小文字） |
|
この属性は、HTML4.01では非推奨とされています。詳細は、「非推奨タグと非推奨属性」のページをご覧下さい。 |
この指定内容は、スタイルシートで代替えできます。 |
|
| ★ 使用例とブラウザでの表示 |
|
| 使 用 例 |
|
ブラウザの表示 |
|---|
| |
| ☆標準の番号
<ol><li>エンジニア</li>
<li>サブエンジニア</li>
<li>アシスタント</li></ol> |
☆標準の番号- エンジニア
- サブエンジニア
- アシスタント
|
| |
| ☆リスト全体の番号を変更
<ol type="A">
<li>エンジニア
<li>サブエンジニア
<li>アシスタント</ol>
|
☆リスト全体の番号を変更- エンジニア
- サブエンジニア
- アシスタント
|
| |
| ☆項目ごとに番号を変更
<ol><li type="a">エンジニア
<li type="I">サブエンジニア
<li type="i">アシスタント</ol> |
☆項目ごとに番号を変更- エンジニア
- サブエンジニア
- アシスタント
|
|
☆ type属性は、HTML4.01では非推奨とされています。 |
|
|
☆ このページは、<ol>タグにスタイルシートを設定しているため、上下に１行分のスペースが空きません。左側のインデント幅も変更しています。 |
|
| ** <ul><ol> を入れ子にした事例 のページもご覧下さい。** |
|
| 関連するページ |
CSS スタイルシート：マーカーの種類を指定する
CSS スタイルシート：マーカーの設定をまとめて行う |
| Utilety Page (参考)：「非推奨タグと非推奨属性」へ |
|
| 開始番号を変更する |
<ol start=""><li>
<ol><li value=""> |
|
■開始番号を変更する |
<ol>タグに start="" を追加すると、開始番号を変更できます。 |
|
|
| ☆番号の種類：標準 |
|
☆番号の種類を指定 |
| |
<ol start="4">
<li>秋 田
<li>山 形</ol> |
<ol start="4" type="A">
<li>秋 田
<li>山 形</ol> |
|
|
|
この属性は、HTML4.01では非推奨とされています。詳細は、「非推奨タグと非推奨属性」のページをご覧下さい。 |
|
■途中で番号を変更する |
<li>タグに value="" を追加すると、リストの番号を途中で変更できます。 |
|
|
| ☆番号の種類：標準 |
|
☆番号の種類を指定 |
| |
<ol>
<li>北海道
<li>2〜3 略
<li value="4">秋 田
<li>山 形</ol> |
<ol type="a">
<li>北海道
<li>b〜c 略
<li value="4">秋 田
<li>山 形</ol> |
|
|
|
この属性は、HTML4.01では非推奨とされています。詳細は、「非推奨タグと非推奨属性」のページをご覧下さい。 |
|
| ★ 使用例とブラウザでの表示 |
|
| 使 用 例 |
|
ブラウザの表示 |
|---|
| |
■開始番号を変更
☆番号の種類：標準
<ol start=4>
<li>秋 田
<li>山 形</ol>
|
☆番号の種類：標準
- 秋 田
- 山 形
|
| |
| ☆番号の種類を指定
<ol start=4 type=A>
<li>秋 田
<li>山 形</ol>
|
☆番号の種類を指定
- 秋 田
- 山 形
|
|
☆ start属性、type属性は、HTML4.01では非推奨とされています。 |
|
■途中で番号を変更
☆番号の種類：標準
<ol><li>北海道
<li>2〜3 略
<li value=4>秋 田
<li>山 形</ol>
** リスト終了 ** |
|
☆番号の種類：標準
- 北海道
- 2〜3 略
- 秋 田
- 山 形
|
| |
| ☆番号の種類を指定
<ol type=a>
<li>北海道
<li>b〜c 略
<li value=4>秋 田
<li>山 形</ol>
|
☆番号の種類を指定
- 北海道
- b〜c 略
- 秋 田
- 山 形
|
|
☆ value属性、type属性は、HTML4.01では非推奨とされています。 |
|
|
☆ このページは、<ol>タグにスタイルシートを設定しているため、上下に１行分のスペースが空きません。左側のインデント幅も変更しています。 |
|
| ** <ul><ol> を入れ子にした事例 のページもご覧下さい。** |
|
| 関連するページ |
| Utilety Page (参考)：「非推奨タグと非推奨属性」へ |
|
| 定義型リストを作る |
<dl><dt><dd>
<dl compact><dt><dd> |
|
■定義型リストを作る |
定義型のリストを作るタグです。<dl>タグで囲んだ部分に､<dt>タグと<dd>タグを使用して指定します｡ |
ブラウザでは、用語部分（<dt>〜</dt>）と説明部分（<dd>〜</dd>）の間に改行が入り、説明部分の左側はインデント表示になります。 |
|
<dl><dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
<dt>WWW</dt>
<dd>World Wide Web</dd>
</dl> |
＊ <dt>タグで囲んだ部分に定義する用語を記述し、<dd>タグで囲んだ部分にその説明を記述します。<dt>タグと<dd>タグの各終了タグ（</dt></dd>）は、省くこともできます。 |
|
■改行を入れずに定義型リストを作る |
定義型リストでは、用語部分（ <dt>〜</dt>）と説明部分（ <dd>〜</dd>）の間に改行が入ります。<dl>タグに compact属性を追加すると、改行しない定義型リストを作れます。 |
※ compact属性に対応しているブラウザでも、用語（<dt>〜</dt>）が長い場合は改行が入ります。 |
|
<dl compact>
<dt>CSS
<dd>Cascading Style Sheets
<dt>CGI
<dd>Common Gateway Interface
</dl> |
この属性は、HTML4.01では非推奨とされています。詳細は、「非推奨タグと非推奨属性」のページをご覧下さい。 |
 この属性は、Internet Exp. のみが対応しているようです。 |
|
| ★ 使用例とブラウザでの表示 |
|
| 使 用 例 |
|
ブラウザの表示 |
|---|
| |
| ☆定義型リスト：標準
<dl><dt>ANA
<dd>全日本空輸
<dt>JAL
<dd>日本航空</dl> |
- ANA
- 全日本空輸
- JAL
- 日本航空
|
| |
| ☆ compact を指定
<dl compact>
<dt>ANA
<dd>全日本空輸
<dt>JAL
<dd>日本航空</dl> |
- ANA
- 全日本空輸
- JAL
- 日本航空
|
|
☆ compact属性は、Internet Exp. の独自拡張機能です。
Firefox や Opera では、対応していません。
☆ compact属性は、HTML4.01では非推奨とされています。 |
|
|
|
| 関連するページ |
| CSS スタイルシート：定義型リストのインデント幅を指定する |
| Utilety Page (参考)：「非推奨タグと非推奨属性」へ |
|
