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

リストのタグ


だいぶ分かってきたわ。

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

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

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

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


リストのタグの応用

上記で勉強したリストのタグでは、テキストの前に黒丸マークが付きますが、 この他にも白丸、四角マークを付けることが出来ます。
リストのタグ
  <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の記述
A子の好きな果物リスト
<ul>
<li>みかん
<li type=circle>桃
<li type=square>ピオーネ
</ul>
ホームページの表示例
A子の好きな果物リスト
  • みかん
  • ピオーネ
[追記]
<ul><li></li></ul>のタグは、lynxでは「黒丸マーク」では無く「*」 だそうです。lynxマシンを利用していないので、確認は出来ませんが、情報を下さった方、ありがとうございます。


 目次へ 

前のページへ

次のページへ