リストタグ ホームページ作成支援サイト ウェブライズで素材をゲット
ウェブ ライズ
ウェブ デザイン
サイトマップ
HOME >> HTML >> リストタグ
コンテンツ

リストタグ


記号のリストタグ

箇条書き表示しSEO対策としても重要視されるのがリストタグで、記号の場合は<ul>タグを使用します。<li>から</li>の間に、それぞれの強調したい語句や文章を入力します。
下記の例は、リスト項目が3つまでなので、これを増やしたいときは、<li>から</li>をリスト項目3以降に追加してください。
<ul>
<li>リストその1</li>
<li>リストその2</li>
<li>リストその3</li>
</ul>

・ リストその1
・ リストその2
・ リストその3

記号の変更

各項目の頭につく記号を変更することが可能で、点のdisc(デフォルト)、円のcircle、四角形のsquareの3つがあります。
type属性にこれらを入力するのですが、下記のように<ul>タグにこれを入れた場合はすべての項目に共通してその記号が使われます。一方、<li>タグに入れた場合は、それぞれの項目ごとに記号を変更できます。
なお、スタイルシートを使用すれば、他の記号や自分で作った画像を使用できます。
<ul type="disc">
<li>リストその1</li>
<li>リストその2</li>
<li>リストその3</li>
</ul>

・ リストその1
・ リストその2
・ リストその3

数字のリストタグ

箇条書きの頭に数字を振りたいときは、<ol>タグを使います。
なお、項目を増やすときは、記号のリストタグと同じです。
<ol>
<li>リストその1</li>
<li>リストその2</li>
<li>リストその3</li>
</ol>

1. リストその1
2. リストその2
3. リストその3

数字の変更

各項目の頭につく数字を変更することが可能で、1(デフォルト)、aAiI があります。
type属性にこれらを入力するのですが、下記のように<ul>タグにこれを入れた場合はすべての項目に共通してその記号が使われます。一方、<li>タグに入れた場合は、それぞれの項目ごとに記号を変更できます。
<ul type="a">
<li>リストその1</li>
<li>リストその2</li>
<li>リストその3</li>
</ul>

a. リストその1
b. リストその2
c. リストその3

開始番号を変更する

通常は1から順番に数字が振られていきますが、これを変更することが可能です。変更するには<ul>タグにstart属性を使用し、下記の赤字の数字を開始したい番号にします。
<ul start="10">
<li>リストその1</li>
<li>リストその2</li>
<li>リストその3</li>
</ul>

10. リストその1
11. リストその2
12. リストその3

途中で番号を変更する

途中で番号を変更するには、<li>タグにvalue属性を入れ、変更したい数字を入力します。
<ul>
<li>リストその1</li>
<li value="5" >リストその2</li>
<li>リストその3</li>
</ul>

1. リストその1
5. リストその2
6. リストその3
▲トップへ戻る