※ここの解説は、後になるほど省略されている場合がありますのでできるだけ順番に読んでください。
■ 9.水平線や箇条書き
■ 水平線
ページ内の区切りとして水平線があります。
水平線のタグは次のように記述します。
<HR>
すると次のような水平線が表示されます。
平面的な水平線にする場合は、次のように記述します。
<HR noshade>
すると次のような水平線が表示されます。
横幅を指定する場合はwidth属性を、太さを指定する場合はsize属性で、色指定はスタイル属性のcolor句で次のように指示します。
<HR width="300" size="8" style="color:red">
HTML4.01に準拠した記述であればスタイル属性を使用し、次のように記述するようにしてください。
<hr style="width: 300px; height: 8px; color: red;">
詳しくは「HTMLの解説」−「14.スタイル属性」、「15.スタイルシート」をご参照下さい。
<hr style="width: 300px; height: 8px; color: red;">
詳しくは「HTMLの解説」−「14.スタイル属性」、「15.スタイルシート」をご参照下さい。
width属性は、％で指定することもできます。
<HR width="70%" size="6>
こちらも同様に、次のように記述します。
<hr style="width: 70%; height: 6px;">
詳しくは「HTMLの解説」−「14.スタイル属性」、「15.スタイルシート」をご参照下さい。
<hr style="width: 70%; height: 6px;">
詳しくは「HTMLの解説」−「14.スタイル属性」、「15.スタイルシート」をご参照下さい。
また、align属性を使用しますと、次のように水平線の位置を指定することができます。
<HR width="300" align="left">
<HR width="300" align="center">
<HR width="300" align="right">
同様に、スタイル属性なら次のように記述します。
<hr style="width: 300px; text-align: left;"> <hr style="width: 300px; text-align: center;"> <hr style="width: 300px; text-align: right;">
詳しくは「HTMLの解説」−「14.スタイル属性」、「15.スタイルシート」をご参照下さい。
<hr style="width: 300px; text-align: left;"> <hr style="width: 300px; text-align: center;"> <hr style="width: 300px; text-align: right;">
詳しくは「HTMLの解説」−「14.スタイル属性」、「15.スタイルシート」をご参照下さい。
■ 箇条書き
箇条書きを記述する方法は何種類かありますのでそれぞれのサンプルを記述しておきます。
| <記述方法> | <表示サンプル> |
|---|---|
| <dl> <dt>【太陽系】</dt> <dd>水星</dd> <dd>金星</dd> <dd>地球</dd> </dl> |
|
| 【太陽系】 <ul> <li>水星</li> <li>金星</li> <li>地球</li> </ul> |
【太陽系】
|
| 【太陽系】 <ul style="list-style-type: square;"> <li>水星</li> <li>金星</li> <li>地球</li> </ul> |
【太陽系】
|
| 【太陽系】 <ul style="list-style-type: circle;"> <li>水星</li> <li>金星</li> <li>地球</li> </ul> |
【太陽系】
|
| 【太陽系】 <ol> <li>水星</li> <li>金星</li> <li>地球</li> </ol> |
【太陽系】
|
| 【太陽系】 <ol> <li style="list-style-type: lower-alpha;">水星</li> <li style="list-style-type: lower-alpha;">金星</li> <li style="list-style-type: lower-alpha;">地球</li> </ol> |
【太陽系】
|
| 【太陽系】 <ol> <li style="list-style-type: upper-alpha;">水星</li> <li style="list-style-type: upper-alpha;">金星</li> <li style="list-style-type: upper-alpha;">地球</li> </ol> |
【太陽系】
|
| 【太陽系】 <ol> <li style="list-style-type: lower-roman;">水星</li> <li style="list-style-type: lower-roman;">金星</li> <li style="list-style-type: lower-roman;">地球</li> </ol> |
【太陽系】
|
| 【太陽系】 <ol> <li style="list-style-type: upper-roman;">水星</li> <li style="list-style-type: upper-roman;">金星</li> <li style="list-style-type: upper-roman;">地球</li> </ol> |
【太陽系】
|
|
【太陽系】
<ol start="11">
<li>水星</li>
<li>金星</li>
<li value="21">地球</li>
<li>火星</li>
</ol>
（開始番号を指定し、途中で番号を変更） |
【太陽系】
|
|
【太陽系】
<ol style="list-style-type: lower-roman;" start="3">
<li>水星</li>
<li>金星</li>
<li value="10">地球</li>
<li>火星</li>
</ol>
（開始番号を指定し、途中で番号を変更） |
【太陽系】
|
HTML4.01では「LI」タグの「start」属性、「value」属性は共に非推奨となっています。