超初心者でも簡単!あなたもできるHP作成!− Make easily  
|| トップページ || HTML || Style Sheet || リファレンス || Web素材 || Contact Us || サイトマップ || 初めての方 || 

黒丸 白丸 黒四角
数字 大文字のアルファベット 小文字のアルファベット
大文字のローマ数字 小文字のローマ数字 リストの種類を個別に変更する
開始番号の変更 途中で番号を変更する  

リスト

このリファレンスの見方については「リファレンスの見方」をお読みください。
リスト言うのは
  • りんご
  • みかん
  • いちご
このような表示をリストと言います。

リストの種類には大きく「マーク付リスト」と「番号付リスト」があります。

マーク付リスト

【黒丸(標準)】
  • りんご
  • みかん
  • いちご
【HTMLタグ】

<ul>
<li>りんご</li>
<li>みかん</li>
<li>いちご</li>
</ul>

【白丸】
  • りんご
  • みかん
  • いちご
【HTMLタグ】

<ul type="circle">
<li>りんご</li>
<li>みかん</li>
<li>いちご</li>
</ul>

【スタイルシート インライン】

<ul style="list-style-type: circle;">
<li>りんご</li>
<li>みかん</li>
<li>いちご</li>
</ul>

【スタイルシートヘッダ、外部ファイル】

ul {
list-style-type: circle;
}


<ul>
<li>りんご</li>
<li>みかん</li>
<li>いちご</li>
</ul>

【黒四角】
  • りんご
  • みかん
  • いちご
【HTMLタグ】

<ul type="square">
<li>りんご</li>
<li>みかん</li>
<li>いちご</li>
</ul>

【スタイルシート インライン】

<ul style="list-style-type: square;">
<li>りんご</li>
<li>みかん</li>
<li>いちご</li>
</ul>

【スタイルシートヘッダ、外部ファイル】

ul {
list-style-type: square;
}


<ul>
<li>りんご</li>
<li>みかん</li>
<li>いちご</li>
</ul>

番号付リスト

【数字(基本のマーク)】
  1. りんご
  2. みかん
  3. いちご
【HTMLタグ】

<ol>
<li>りんご</li>
<li>みかん</li>
<li>いちご</li>
</ol>

【大文字のアルファベット】
  1. りんご
  2. みかん
  3. いちご
【HTMLタグ】

<ol type="A">
<li>りんご</li>
<li>みかん</li>
<li>いちご</li>
</ol>

【スタイルシート インライン】

<ol style="list-style-type: upper-alpha;">
<li>りんご</li>
<li>みかん</li>
<li>いちご</li>
</ol>

【スタイルシートヘッダ、外部ファイル】

ol {
list-style-type: upper-alpha;
}


<ol>
<li>りんご</li>
<li>みかん</li>
<li>いちご</li>
</ol>

【小文字のアルファベット】
  1. りんご
  2. みかん
  3. いちご
【HTMLタグ】

<ol type="a">
<li>りんご</li>
<li>みかん</li>
<li>いちご</li>
</ol>

【スタイルシート インライン】

<ol style="list-style-type: lower-alpha;">
<li>りんご</li>
<li>みかん</li>
<li>いちご</li>
</ol>

【スタイルシートヘッダ、外部ファイル】

ol {
list-style-type: lower-alpha;
}


<ol>
<li>りんご</li>
<li>みかん</li>
<li>いちご</li>
</ol>

【大文字のローマ数字】
  1. りんご
  2. みかん
  3. いちご
【HTMLタグ】

<ol type="I">
<li>りんご</li>
<li>みかん</li>
<li>いちご</li>
</ol>

【スタイルシート インライン】

<ol style="list-style-type: upper-roman;">
<li>りんご</li>
<li>みかん</li>
<li>いちご</li>
</ol>

【スタイルシートヘッダ、外部ファイル】

ol {
list-style-type: upper-roman;
}


<ol>
<li>りんご</li>
<li>みかん</li>
<li>いちご</li>
</ol>

小文字のローマ数字
  1. りんご
  2. みかん
  3. いちご
【HTMLタグ】

<ol type="i">
<li>りんご</li>
<li>みかん</li>
<li>いちご</li>
</ol>

【スタイルシート インライン】

<ol style="list-style-type: lower-roman;">
<li>りんご</li>
<li>みかん</li>
<li>いちご</li>
</ol>

【スタイルシートヘッダ、外部ファイル】

ol {
list-style-type: lower-roman;
}


<ol>
<li>りんご</li>
<li>みかん</li>
<li>いちご</li>
</ol>

リストの種類を個別に変更する

【個別に変更する】
  1. りんご
  2. みかん
  3. いちご
  4. パイナップル
  5. キウイ
<ol>
<li>りんご</li>
<li type="A">みかん</li>
<li type="a">いちご</li>
<li type="I">パイナップル</li>
<li type="i">キウイ</li>
</ol>

開始番号の変更

開始番号を変える場合は「start="数字"」を使います。
【10から開始する場合】
  1. りんご
  2. みかん
  3. いちご
【HTMLタグ】

<ol start="10">
<li>りんご</li>
<li>みかん</li>
<li>いちご</li>
</ol>

【アルファベットの10番目から開始する場合】
  1. りんご
  2. みかん
  3. いちご
【HTMLタグ】

<ol type="A" start="10">
<li>りんご</li>
<li>みかん</li>
<li>いちご</li>
</ol>

途中で番号を変更する

途中で番号を変更する場合は「value="数字"」を使います。
「value="数字"」を挿入したところから、番号が変わります。
【途中から番号を変更する場合】
  1. りんご
  2. みかん
  3. いちご
  4. パイナップル
  5. キウイ
<ol>
<li>りんご</li>
<li>みかん</li>
<li value="8">いちご</li>
<li>パイナップル</li>
<li>キウイ</li>
</ol>
▲このページのトップに戻るTop