作成ネット収入HP「あくせすポイント」
トップ >  ホームページ作成 > これだけは譲れないタグ! > LIタグの使い方

L I タグの使い方

L I タグを使おう

リストを表すのが L I タグです

複数の項目を縦に並べるのがliタグです。リストとして使います。

このliタグは、実は子供のタグです。単体では使えません。
親タグを使い分けることでマークのリストや、ナンバリングのリストなど、
使用の幅が広がります。

■ ULタグの使い方

リストの中では、一番オーソドックスなタグです。

typeを指定すると、diskは●  circleは○  squareは■ がつきます。
typeを省略すると、頭には●が表示されます。

<ul type="disk か circle か square">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
   ・
   ・
</ul>

表示例

  • リスト1
  • リスト2
  • リスト3
■ OLタグの使い方1

リストの文頭マークを選ぶことができます。

type指定では、タイプを変える事で文頭のマークが変わります。
たとえばタイプをAとすると、文頭にはABCDE・・・が付きます。
同様に aならabcde I ではTUVWX。そして iは@ABCDが文頭に付きます。

typeを省略するか、を指定すると英数字が表示されます。

<ol type="A か a か I か i か 1">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
   ・
   ・
</ol>

表示例

  1. リスト1
  2. リスト2
  3. リスト3
■ OLタグの使い方2

olタグの文頭を番号にする場合、開始番号を1以外で始めたり、途中の番号をスキップすることができます。
下は、5で始める例と、途中を飛ばした例です。

<!-- 5で始める -->
<ol start="5">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>


<!-- 途中を飛ばす -->
<ol>
<li>リスト1</li>
<li>リスト2</li>
<li value="10">リスト3</li>
<li>リスト4</li>
</ol>

表示例1

  1. リスト1
  2. リスト2
  3. リスト3

表示例2

  1. リスト1
  2. リスト2
  3. リスト3
  4. リスト4

1口メモ
説明では、liの最後を<li>で閉じています。
HTMLではリストの最後を閉じなくても機能はするんです。
でも、今後の展望のために閉じる癖をつけておきます。

<>

Copyright(C)AccessPoint by Tukioyaji ページトップ
メールする