初級　第２話 『リストのタグ』の巻
リストのタグ


だいぶ分かってきたわ。

 今回は、リストのタグの勉強です。このタグは、箇条書などのレイアウトを行うのに便利な タグなので、是非覚えておきましょう。

リストのタグ 
<ul>
 <li>〜〜</li>
 <li>〜〜</li>
 <li>〜〜</li>
</ul>
 </li>は省略出来ます。
【 解説 】
まず<ul>は、「リストのタグ」という宣言みたいなもので、 テキストは<li>の後に入力していきます。箇条書にしたいテキストを<li>内容</li>というように、<li></li>で囲めばOKです。</li>は省略可能なので、箇条書きにしたい文章の頭に<li>と付けるだけでも出来ます。
<li>を使うとテキストの頭には、スペースが挿入され黒丸マークが付きます。
それぞれのテキストは、自動的に改行されるので<br>を使用する必要は ありません。リストの終了タグは</ul>です。
＝＝＝例　ノーマルタイプ＝＝＝
Ａ子の好きな果物リスト
みかん、桃、ピオーネ、スイカ、

上記の文章を<ul><li>〜</ul>のタグを使って構成してみると 下記のようになり、見栄えも変わってきます。文字の多いホームページなどはこのタグを 使って編集すると良いかもしれません。（</li>は省略可能なので、下記の例では、</li>を省略して作成しています。</li>がなくても同じように表示されます。）

＝＝＝例　タグを利用した場合＝＝＝
HTMLの記述
Ａ子の好きな果物リスト<br> 
<ul>
 <li>みかん
 <li>桃
 <li>ピオーネ
 <li>スイカ
</ul>
ホームページの表示例
Ａ子の好きな果物リスト
  • みかん
  • 桃
  • ピオーネ
  • スイカ

リストのタグの応用

上記で勉強したリストのタグでは、テキストの前に黒丸マークが付きますが、 この他にも白丸、四角マークを付けることが出来ます。
リストのタグ
  <ul>
   <li type=マーク指定>〜</li>
   <li type=マーク指定>〜</li>
  </ul>
　マークの指定
　　白丸=circle，四角=square
　</li>は省略出来ます。

【 解説 】
例えば、リストの前に白丸マークを付けたい場合は<liの後に半角のスペースを あけ、type=circleを入力すれば、出来上がりです。 (<ul><li type=circle>〜</li></ul>)
同様に四角マークの 場合は<ul><li type=square>〜</li></ul>とします。（</li>は省略可能なので、下記の例では、</li>を省略して作成しています。</li>がなくても同じように表示されます。）
＝＝＝例　タグを利用した場合＝＝＝
HTMLの記述
Ａ子の好きな果物リスト
<ul>
<li>みかん
<li type=circle>桃
<li type=square>ピオーネ
</ul>
ホームページの表示例
Ａ子の好きな果物リスト
  • みかん
  • 桃
  • ピオーネ
［追記］
<ul><li></li></ul>のタグは、lynxでは「黒丸マーク」では無く「*」 だそうです。lynxマシンを利用していないので、確認は出来ませんが、情報を下さった方、ありがとうございます。


　目次へ　
前のページへ
次のページへ