list-style-type箇条書き

スポンサーリンク
list-style-type箇条書き list-style-type: none
  • ○○○○○
  • ○○○○○
  • ○○○○○
list-style-type: lower-roman
  1. ○○○○○
  2. ○○○○○
  3. ○○○○○
list-style-type: upper-roman
  1. ○○○○○
  2. ○○○○○
  3. ○○○○○
list-style-type: disc
  • ○○○○○
  • ○○○○○
  • ○○○○○
list-style-type: circle
  • ○○○○○
  • ○○○○○
  • ○○○○○
list-style-type箇条書き list-style-type: circle
  • ○○○○○
  • ○○○○○
  • ○○○○○
list-style-type: square
  • ○○○○○
  • ○○○○○
  • ○○○○○
list-style-type: decimal
  1. ○○○○○
  2. ○○○○○
  3. ○○○○○
list-style-type: lower-alpha
  1. ○○○○○
  2. ○○○○○
  3. ○○○○○

list-style-type: upper-alpha

  1. ○○○○○
  2. ○○○○○
  3. ○○○○○

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>list-style-type箇条書き</title>
<style>
b {font:Verdana, Geneva, sans-serif x-large; 
border-bottom: solid 2px red;}
</style>

<b>list-style-type: none</b> 
<ul style="list-style-type: none">
<li>○○○○○</li>
<li>○○○○○</li>
<li>○○○○○</li>
</ul>

<b>list-style-type: lower-roman</b>
<ol style="list-style-type: lower-roman">
  <li>○○○○○</li>
  <li>○○○○○</li>
  <li>○○○○○</li>
</ol>

<b>list-style-type: upper-roman</b> 
<ol style="list-style-type: upper-roman">
<li>○○○○○</li>
<li>○○○○○</li>
<li>○○○○○</li>
</ol>

<b>list-style-type: disc</b> 
<ul style="list-style-type: disc">
<li>○○○○○</li>
<li>○○○○○</li>
<li>○○○○○</li>
</ul>

<b>list-style-type: circle</b> 
<ul style="list-style-type: circle">
<li>○○○○○</li>
<li>○○○○○</li>
<li>○○○○○</li>
</ul>

<b>list-style-type: square</b> 
<ul style="list-style-type: square">
<li>○○○○○</li>
<li>○○○○○</li>
<li>○○○○○</li>
</ul>

<b>list-style-type: decimal</b> 
<ol style="list-style-type: decimal">
<li>○○○○○</li>
<li>○○○○○</li>
<li>○○○○○</li>
</ol>

<b>list-style-type: lower-alpha</b> 
<ol style="list-style-type: lower-alpha">
<li>○○○○○</li>
<li>○○○○○</li>
<li>○○○○○</li>
</ol>

<b>list-style-type: upper-alpha</b> 
<ol style="list-style-type: upper-alpha">
<li>○○○○○</li>
<li>○○○○○</li>
<li>○○○○○</li>
</ol>
</body>
</html>

コメント