リスト表示

｜HTML｜CSS｜サイトマップ｜ホーム｜



順序のないリストを表示

html/cssソースコード 

<p>●順序のないリストを表示（黒丸）</p>
<ul>
  <li>東京</li>
  <li>名古屋</li>
  <li>大阪</li>
</ul>
<p>●順序のないリストを表示（黒四角）</p>
<ul style="list-style-type: square">
  <li>東京</li>
  <li>名古屋</li>
  <li>大阪</li>
</ul>
<p>●順序のないリストを表示（白丸）</p>
<ul style="list-style-type: circle">
  <li>東京</li>
  <li>名古屋</li>
  <li>大阪</li>
</ul>
<p>●マーカー画像を指定する</p>
<ul style="list-style-image: url('tama3_2.gif');">
  <li>東京</li>
  <li>名古屋</li>
  <li>大阪</li>
</ul>
<p>●定義リスト表示</P>
<dl>
  <dt>用語１</dt>
    <dd>用語１の説明１</dd>
    <dd>用語１の説明２</dd>
  <dt>用語２</dt>
    <dd>用語２の説明１</dd>
    <dd>用語２の説明２</dd>
</dl>
　
表示例

●順序のないリストを表示（黒丸）

  • 東京
  • 名古屋
  • 大阪

●順序のないリストを表示（黒四角）

  • 東京
  • 名古屋
  • 大阪

●順序のないリストを表示（白丸）

  • 東京
  • 名古屋
  • 大阪

●マーカー画像を指定する

  • 東京
  • 名古屋
  • 大阪

●定義リスト表示

用語１
用語１の説明１
用語１の説明２
用語２
用語２の説明１
用語２の説明２

順序のあるリストを表示

html/cssソースコード 
<p>●マーカー文字の種類を指定する（小文字のローマ数字）</p>
<ol style="list-style-type: lower-roman">
  <li>東京</li>
  <li>名古屋</li>
  <li>大阪</li>
</ol>
<p>●マーカー文字の種類を指定する（大文字のローマ数字）</p>
<ol style="list-style-type: upper-roman">
  <li>東京</li>
  <li>名古屋</li>
  <li>大阪</li>
</ol>
<p>●マーカー文字の種類を指定する（小文字のギリシャ文字）</p>
<ol style="list-style-type: lower-greek">
  <li>東京</li>
  <li>名古屋</li>
  <li>大阪</li>
</ol>
<p>●マーカー文字の種類を指定する（算用数字）</p>
<ol style="list-style-type: decimal">
  <li>東京</li>
  <li>名古屋</li>
  <li>大阪</li>
</ol>
<p>●マーカー文字の種類を指定する（小文字のアルファベット）</p>
<ol style="list-style-type: lower-alpha">
  <li>東京</li>
  <li>名古屋</li>
  <li>大阪</li>
</ol>
<p>●マーカー文字の種類を指定する（大文字のアルファベット）</p>
<ol style="list-style-type: upper-alpha">
  <li>東京</li>
  <li>名古屋</li>
  <li>大阪</li>
</ol>
<p>●マーカー文字の種類を指定する（漢数字）</p>
<ol style="list-style-type:cjk-ideographic">
  <li>東京</li>
  <li>名古屋</li>
  <li>大阪</li>
</ol>
<p>●マーカー文字の種類を指定する（ひらがなのあいうえお順）</p>
<ol style="list-style-type:hiragana">
  <li>東京</li>
  <li>名古屋</li>
  <li>大阪</li>
</ol>
<p>●マーカー文字の種類を指定する（カタカナのアイウエオ順）</p>
<ol style="list-style-type: katakana">
  <li>東京</li>
  <li>名古屋</li>
  <li>大阪</li>
</ol>
<p>●マーカー文字の種類を指定する（黒丸数字）</p>
<ol style="list-style-type:filled-circled-decimal">
  <li>東京</li>
  <li>名古屋</li>
  <li>大阪</li>
</ol>
　
表示例

●マーカー文字の種類を指定する（小文字のローマ数字）

  1. 東京
  2. 名古屋
  3. 大阪

●マーカー文字の種類を指定する（大文字のローマ数字）

  1. 東京
  2. 名古屋
  3. 大阪

●マーカー文字の種類を指定する（小文字のギリシャ文字）

  1. 東京
  2. 名古屋
  3. 大阪

●マーカー文字の種類を指定する（算用数字）

  1. 東京
  2. 名古屋
  3. 大阪

●マーカー文字の種類を指定する（小文字のアルファベット）

  1. 東京
  2. 名古屋
  3. 大阪

●マーカー文字の種類を指定する（大文字のアルファベット）

  1. 東京
  2. 名古屋
  3. 大阪

●マーカー文字の種類を指定する（漢数字）

  1. 東京
  2. 名古屋
  3. 大阪

●マーカー文字の種類を指定する（ひらがなのあいうえお順）

  1. 東京
  2. 名古屋
  3. 大阪

●マーカー文字の種類を指定する（カタカナのアイウエオ順）

  1. 東京
  2. 名古屋
  3. 大阪

●マーカー文字の種類を指定する（黒丸数字）

  1. 東京
  2. 名古屋
  3. 大阪

その他のリストを表示

html/cssソースコード 
<p>●マーカーの表示位置を指定する（領域の外側に表示）</p>
<ul style="list-style-position: outside">
  <li>東京</li>
  <li>名古屋</li>
  <li>大阪</li>
</ul>
<p>●マーカーの表示位置を指定する（領域の内側に表示）</p>
<ul style="list-style-position: inside">
  <li>東京</li>
  <li>名古屋</li>
  <li>大阪</li>
</ul>
<p>●リストマーカーとリスト内容の間隔を指定する（marker-offset指定）</p>
<ul style="marker-offset:2em;">
  <li>東京</li>
  <li>名古屋</li>
  <li>大阪</li>
</ul>
<p>●リストマーカーとリスト内容の間隔を指定する（padding-left指定）</p>
<style>
.pad li{padding-left:2em;}
.mgn {margin-left:2em;}
</style>
<ul class="pad">
  <li style="padding-left:2em;">東京</li>
  <li style="padding-left:2em;">名古屋</li>
  <li style="padding-left:2em;">大阪</li>
</ul>
<p>●リストマーカーとリスト内容の間隔を指定する（margin-left指定）</p>
<ul class="mgn">
  <li>東京</li>
  <li>名古屋</li>
  <li>大阪</li>
</ul>
　
表示例

●マーカーの表示位置を指定する（領域の外側に表示）

  • 東京
  • 名古屋
  • 大阪

●マーカーの表示位置を指定する（領域の内側に表示）

  • 東京
  • 名古屋
  • 大阪

●リストマーカーとリスト内容の間隔を指定する（marker-offset指定）

  • 東京
  • 名古屋
  • 大阪

●リストマーカーとリスト内容の間隔を指定する（padding-left指定）

  • 東京
  • 名古屋
  • 大阪

●リストマーカーとリスト内容の間隔を指定する（margin-left指定）

  • 東京
  • 名古屋
  • 大阪

list-style-type一覧

none 表示しない
disc 黒丸(●)
circle 白丸(○)
square 黒四角(■)
box 白四角(□)
check チェックマーク(✓)
diamond ダイヤモンドマーク(◆)
dash ダッシュ(—)
decimal 数字(1, 2, 3...)
decimal-leading-zero 0付き数字(01, 02, 03...)
cjk-ideographic 漢数字(一, 二, 三...)
upper-roman 大文字ローマ数字(I, II, III...)
lower-roman 小文字ローマ数字(i, ii, iii...)
upper-alpha 大文字アルファベット(A, B, C...)
lower-alpha 小文字アルファベット(a, b, c...)
upper-latin 大文字ラテン文字(A, B, C...)
lower-latin 小文字ラテン文字(a, b, c...)
upper-greek 大文字ギリシャ文字(Α, Β, Γ...)
lower-greek 小文字ギリシャ文字(α, β, γ...)
hiragana ひらがな(あ, い, う...)
katakana カタカナ(ア, イ, ウ...)
hiragana-iroha ひらがな-いろは(い, ろ, は...)
katakana-iroha カタカナ-イロハ(イ, ロ, ハ...)
japanese-formal 日本-公式(壱, 弐, 参...)
japanese-informal 日本-非公式(一, 二, 三...)
simp-chinese-formal 簡体字中国語-公式(壹, 贰, 叁...)
simp-chinese-informal 簡体字中国語-非公式(一, 二, 三...)
trad-chinese-formal 繁体字中国語-公式(壹, 貳, 參...)
trad-chinese-informal 繁体字中国語-非公式(一, 二, 三...)
korean-hangul-formal 韓国ハングル-公式(영, 일, 삼...)
korean-hanja-formal 韓国漢字-公式(一, 二, 三...)
korean-hanja-informal 韓国漢字-非公式(壹, 貳, 參...) (
circled-decimal 丸数字(①, ②, ③...) (
dotted-decimal ドット付き数字(⒈, ⒉, ⒊...)
double-circled-decimal 二重丸数字(⓵, ⓶, ⓷...)
filled-circled-decimal 黒丸数字(❶, ❷, ❸...)
parenthesized-decimal 括弧付き数字(⑴, ⑵, ⑶...)
ethiopic-numeric エチオピア数字(፩, ፪, ፫...)
hebrew ヘブライ数字(א, ב, ג...)
armenian アルメニア数字(Ա, Բ, Գ...)
georgian グルジア数字(ა, ბ, გ...)

｜HTML｜CSS｜サイトマップ｜ホーム｜