HTML文書は、テキスト内容を"見出し要素" "段落要素" "リスト要素" "リンク要素（ハイパーリンク）"などの"要素"とする考え方を基に、それぞれの要素をタグで囲む（マークアップにより書き表す）文書構造になっています。
■ブロックレベル要素とは・・・？
ひとつのブロック（まとまり）から構成される要素の名称です。
ブロックレベル要素の前後は、要素特性により、段落または改行されます。
■ブロックレベル要素群（abc順）
<address> <blockquote> <center> <div> <dl>
<fieldset> <form> <h1～h6> <hr> <noframes> <noscript>
<ol> <p> <pre> <table> <ul>
▼
★ マーク付きリスト <ul>タグ ♠ ul は 「Unorderd list」の略
★ 番号付きリスト <ol>タグ ♣ ol は 「Ordered list」の略
●●● <ul>タグ、<ol>タグ内の<li>タグは「 List Item 」の略
"マーク付きリスト"を表示するときは、<ul>要素を使います。
番号付きリスト<ol>タグは後述。
- <ul要素>～</ul要素>の中に、リスト項目の<li>タグを記述します。<li>は「 List Item 」の略。
- <ul>タグと<li>タグは、必ずセットで使用します。
- <li>> タグは終了タグ</li>省略可。
▼
|←←←←←←←←←← 要 素 →→→→→→→→→→|
↓要素名 ↓要素内容 ↓要素内容
<ul><li>サクラふぶき</li>・・<li>梅もどき</li></ul>
↑リスト項目 ↑リスト項目
<ul>タグで挟まれたリスト項目は、項目ごとに黒丸（デフォルト）が付き、要素特性により、上下に一行分の空白が挿入され、字下げ（インデント）になります。
リスト項目の順番に重要性がないリストは非序列リストと呼ばれています。
例：当サイトのPRコメント"内のフレーズを拾い、リストを作成してみます。
▼
HTMLのイロハも知らず、ウェブ素材提供サイト様の
テンプレートをDLしては改造、破壊を繰り返し、
修復不能は日常茶飯事・・・。 心機一転!! 万年初心者脱却紀行。
▼
■ソース表示
<ul>
<li>改造</li>
<li>破壊</li>
<li>修復不能</li>
</ul>
▼
リスト項目のマーク（デフォルト＝黒丸）は、<ul>タグに[type属性を記述することにより、白丸や四角のマークに変更が可能です。
[type属性]の指定値は、
- ・・・黒丸＝"disc"
- ・・・白丸＝"circle"
- ・・・四角＝"square"
の３種類が指定できます。
但し、[ul要素とol要素のtype属性]は、スタイルシートの設定を推奨しています。
<li type="circle"> ・・・>> {list-style-type: circle; }
<li type="disc"> ・・・>> {list-style-type: disc; }
<li type="square"> ・・・>> {list-style-type: square; }
▼
■インラインスタイルによる代替記述のソース表示
白丸＝"circle"の場合
<ul style="list-style-type: circle;">
<li>改造</li>
<li>破壊</li>
<li>修復不能</li>
</ul>
四角＝"square"の場合
<ul style="list-style-type: square;">
<li>改造</li>
<li>破壊</li>
<li>修復不能</li>
</ul>
リスト項目ごとにマークを変えた場合
<ul>
<li style="list-style-type: disc;">改造</li>
<li style="list-style-type: circle;">破壊</li>
<li style="list-style-type: square;">修復不能</li>
</ul>
▼
"番号付きリスト"を表示することもできます。
- <ul>タグに変えて<ol>タグを使います。
- <ol要素>～</ol要素>の中にリスト項目の<li>タグを記述します。
- <ol>タグと<li>タグは必ずセットで使用します。
リスト項目の順番を重要視するリストは、序列リストと呼ばれています。
▼
■ソース表示
<ol>
<li>改造</li>
<li>破壊</li>
<li>修復不能</li>
</ol>
リスト項目の数字（デフォルト＝アラビア数字）は、<ol>タグに[type属性]を記述することにより、英字順などに変更が可能です。
[tpe属性]の指定値は、
- 1＝"アラビア数字の123・・・"
- a＝"小文字のabc・・・"
- A＝"大文字のABC・・・"
- ⅰ＝"ローマ数字の小文字ⅰⅱⅲ・・・"（機種依存文字）
- Ⅰ＝"ローマ数字の大文字ⅠⅡⅢ・・・"（機種依存文字）
の５種類ですが、機種依存文字は、WinとMac間の互換性がありません。
リスト項目の<li>タグに[type属性]を指定すると、デフォルトのアラビア数字を "a "や "A" 等のマークに変更することができます。
但し、[ul要素とol要素のtype属性]はスタイルシートの設定を推奨しています。
<li type="1"> ・・・>> {list-style-type: decimal;}
<li type="a"> ・・・>> {list-style-type: lower-alpha;}
<li type="A"> ・・・>> {list-style-type: upper-alpha;}
<li type="i"> ・・・>> {list-style-type: lower-roman;}
<li type="I"> ・・・>> {list-style-type: upper-roman;}
▼
- 改造
- 破壊
- 修復不能
- 改造
- 破壊
- 修復不能
- 改造
- 破壊
- 修復不能
■ソース表示
値＝"a"の場合
<ol style="list-style-type: lower-alpha;">
<li>改造</li>
<li>破壊</li>
<li>修復不能</li>
</ol>
値＝"A"の場合
<ol style="list-style-type: upper-alpha;">
<li>改造</li>
<li>破壊</li>
<li>修復不能</li>
</ol>
リスト項目ごとにマークを変えた場合
<ol>
<li style="list-style-type: decimal;">改造</li>
<li style="list-style-type: lower-alpha;">破壊</li>
<li style="list-style-type: upper-alpha;">修復不能</li>
</ol>
◆応用１：リストの中にリスト
<li要素>～</li要素>の中に<li要素>～</li要素>を配置
◆応用２：応用１＋リストの開始番号を変更
・・・[start属性] と [value属性]
番号付きリスト<ol>タグの開始番号を変更
・・・ol要素＋start属性と"開始番号"
リスト項目<li>タグの開始番号を変更
・・・li 要素＋value属性と"開始番号"
[start属性とvalue属性]もまた、スタイルシートの設定を推奨していますが、代替が存在しないようです。・・・（矛盾？摩訶不思議？）
▼
- 素材テンプレートの使われ方
- 改造
- 破壊
- 修復不能
- 今後の指針
- 千の未知も一歩から
- 万年初心者からの脱却
- 記憶は当てにならない
■ソース表示
<ol>
<li>素材テンプレートの使われ方
<ol style="list-style-type: lower-alpha;">
<li>改造</li>
<li>破壊</li>
<li>修復不能</li>
</ol>
</li>
</ol>
<ol start="2">
<li>今後の指針
<ol>
<li value="1">千の未知も一歩から</li>
<li value="3">万年初心者からの脱却</li>
<li value="5">記憶は当てにならない</li>
</ol>
</li>
</ol>
▼
◆定義リスト <dl>タグ （dt ddタグを包括）
dl は 「definition list」の略
dt は 「definition term」の略
dd は 「definition description」の略
<dt>タグに定義したい用語を記述し、用語の説明を<dd>タグに記述します。
例えば
■ソース表示
<dl>
<dt>ダチョウ倶楽部</dt>
<dd>肥後克広</dd>
<dd>寺門ジモン</dd>
<dd>上島竜兵</dd>
</dl>
▼
定義リストをコンパクトな表示になるように指定・・・<dl compact>
<dl>タグに[compact属性]を記述してもブラウザIE・ネスケ共に正しく表示されません。（後述の参考文献 Web Frontier 様参照）
---
[dl要素のcompact属性]ですが、これまた、スタイルシートの設定を推奨していますが、CSSの代替が存在しません。
例えば、<dt>タグにインラインスタイルの代替記述をした場合
■インラインスタイルによる代替記述のソース表示
<dl>
<dt style="float:left;clear:left;width:60px;">リング名</dt>
<dd>ミル・マスカラス<dd>
<dt style="float:left;clear:left;width:60px;">愛称</dt>
<dd>千の顔を持つ男</dd>
</dl>
|
