13−2.箇条書きの作成(通し番号あり)

(補足&使い方)
箇条書き(通し番号あり)のタグは、
<ol><li>文字(文章)<li>文字(文章)<li>文字(文章)・・・</ol>
の様な形で構成されています。(基本的に番号が、順番に付いていきます)

まず、「(1)ol(全体を指定)」から、全体の箇条書きのタイプを選びます。
次に、(1)のタグの(2)と書かれている所に「(2)li(個別を指定)」から、個別の箇条書きのタイプを選択して、(2)の文字を削って付け加え
箇条書きにしたい数だけ、「(2)li(個別を指定)」のタグを付け加えていけば、完成です。
もちろん、赤い文字の部分は、変えて下さいね。
タグの書き方のサンプルを見たい方は、一番下段にありますので、参考にしてみて下さいね。

style=”〜” の部分は、半角の「;」で区切ってまとめる事が出来ます。(説明は、見易さを考え、全角表示してあります)
(例)文字の大きさ(font−size:)と文字色(color:#)をまとめて設定する。
<ol style=”font−size:12;color:#ff0000”>
注意)まとめる時は、「”」や「;」や「:」を忘れない様に注意してね。

(注1)通常は、「1、2…」や「A、B…」と言う様に、最初から始まりますが、開始番号を半角数字で(IやAの場合も数字で)指定すると
好きな所(例えば、半角の「5」を指定した場合は、5かE)から、順番に番号を付けられます。
また、type="I"の「I」は、ローマ数字小文字なら「i」、アルファベット大文字なら「A」、小文字なら「a
算用数字(普通の数字)なら、「1」になります(全て半角です)。
文字色や、大きさ、背景色等を変更したい場合も、他の物を参考にして、「style"〜"」の部分を付け加えれば、変えられます。


コピーボタンを押してコピー貼り付けで文字の部分を変えて使ってね!
(1)ol(全体を指定)
指定なし(算用数字)<ol>(2)</ol>
ローマ数字(大文字)<ol type="I">(2)</ol>
ローマ数字(小文字)<ol type="i">(2)</ol>
アルファベット(大文字)<ol type="A">(2)</ol>
アルファベット(小文字)<ol type="a">(2)</ol>
文字色を変える(算用数字)<ol style="color:#文字色">(2)</ol>
文字色を変える(ローマ数字大文字)<ol type="I" style="color:#文字色">(2)</ol>
文字色を変える(ローマ数字小文字)<ol type="i" style="color:#文字色">(2)</ol>
文字色を変える(アルファベット大文字)<ol type="A" style="color:#文字色">(2)</ol>
文字色を変える(アルファベット小文字)<ol type="a" style="color:#文字色">(2)</ol>
文字の大きさを変える(算用数字)<ol style="font-size:大きさ">(2)</ol>
文字の大きさを変える(ローマ数字大文字)<ol type="I" style="font-size:大きさ">(2)</ol>
文字の大きさを変える(ローマ数字小文字)<ol type="i" style="font-size:大きさ">(2)</ol>
文字の大きさを変える(アルファベット大文字)<ol type="A" style="font-size:大きさ">(2)</ol>
文字の大きさを変える(アルファベット小文字)<ol type="a" style="font-size:大きさ">(2)</ol>
背景色を変える(算用数字)<ol style="background-color:#背景色">(2)</ol>
背景色を変える(ローマ数字大文字)<ol type="I" style="background-color:#背景色">(2)</ol>
背景色を変える(ローマ数字小文字)<ol type="i" style="background-color:#背景色">(2)</ol>
背景色を変える(アルファベット大文字)<ol type="A" style="background-color:#背景色">(2)</ol>
背景色を変える(アルファベット小文字)<ol type="a" style="background-color:#背景色">(2)</ol>
まとめて変える(算用数字)<ol style="color:#文字色;font-size:大きさ;background-color:#背景色">(2)</ol>
まとめて変える(ローマ数字大文字)<ol type="I" style="color:#文字色;font-size:大きさ;background-color:#背景色">(2)</ol>
まとめて変える(ローマ数字小文字)<ol type="i" style="color:#文字色;font-size:大きさ;background-color:#背景色">(2)</ol>
まとめて変える(アルファベット大文字)<ol type="A" style="color:#文字色;font-size:大きさ;background-color:#背景色">(2)</ol>
まとめて変える(アルファベット小文字)<ol type="a" style="color:#文字色;font-size:大きさ;background-color:#背景色">(2)</ol>
開始番号を指定(注1)<ol start="開始数字">(2)</ol>
開始番号を指定(ローマ数字大文字)(注1)<ol start="開始数字" type="I">(2)</ol>
開始番号を指定(ローマ数字大文字でまとめて変える)(注1)<ol start="開始数字" type="I" style="color:#文字色;font-size:大きさ;background-color:#背景色">(2)</ol>
(2)li(個別を指定)
指定なし(全体で指定したのと同じタイプになります)<li>文字
普通の数字<li type="1">文字
ローマ数字(大文字)<li type="I">文字
ローマ数字(小文字)<li type="i">文字
アルファベット(大文字)<li type="A">文字
アルファベット(小文字)<li type="a">文字
小さい黒丸<li style="list-style-type:disc">文字
小さい白丸<li style="list-style-type:circle">文字
小さい四角<li style="list-style-type:square">文字
記号なし(余白)<li style="list-style-type:none">文字
文字の色を変える(指定なし)<li style="color:#文字色">文字
文字の色を変える(普通の数字)<li type="1" style="color:#文字色">文字
文字の色を変える(ローマ数字大文字)<li type="I" style="color:#文字色">文字
文字の色を変える(ローマ数字小文字)<li type="i" style="color:#文字色">文字
文字の色を変える(アルファベット大文字)<li type="A" style="color:#文字色">文字
文字の色を変える(アルファベット小文字)<li type="a" style="color:#文字色">文字
文字の色を変える(小さい黒丸)<li style="list-style-type:disc;color:#文字色">文字
文字の色を変える(小さい白丸)<li style="list-style-type:circle;color:#文字色">文字
文字の色を変える(小さい四角)<li style="list-style-type:square;color:#文字色">文字
文字の色を変える(記号なし)<li style="list-style-type:none;color:#文字色">文字
文字の大きさを変える(指定なし)<li style="font-size:大きさ">文字
文字の大きさを変える(普通の数字)<li type="1" style="font-size:大きさ">文字
文字の大きさを変える(ローマ数字大文字)<li type="I" style="font-size:大きさ">文字
文字の大きさを変える(ローマ数字小文字)<li type="i" style="font-size:大きさ">文字
文字の大きさを変える(アルファベット大文字)<li type="A" style="font-size:大きさ">文字
文字の大きさを変える(アルファベット小文字)<li type="a" style="font-size:大きさ">文字
文字の大きさを変える(小さい黒丸)<li style="list-style-type:disc;font-size:大きさ">文字
文字の大きさを変える(小さい白丸)<li style="list-style-type:circle;font-size:大きさ">文字
文字の大きさを変える(小さい四角)<li style="list-style-type:square;font-size:大きさ">文字
文字の大きさを変える(記号なし)<li style="list-style-type:none;font-size:大きさ">文字
背景色を変える(指定なし)<li style="background-color:#背景色">文字
背景色を変える(普通の数字)<li type="1" style="background-color:#背景色">文字
背景色を変える(ローマ数字大文字)<li type="I" style="background-color:#背景色">文字
背景色を変える(ローマ数字小文字)<li type="i" style="background-color:#背景色">文字
背景色を変える(アルファベット大文字)<li type="A" style="background-color:#背景色">文字
背景色を変える(アルファベット小文字)<li type="A" style="background-color:#背景色">文字
背景色を変える(小さい黒丸)<li style="list-style-type:disc;background-color:#背景色">文字
背景色を変える(小さい白丸)<li style="list-style-type:circle;background-color:#背景色">文字
背景色を変える(小さい四角)<li style="list-style-type:square;background-color:#背景色">文字
背景色を変える(記号なし)<li style="list-style-type:none;background-color:#背景色">文字
途中から番号を指定(注1)<li value="開始数字">
途中から番号を指定(ローマ数字大文字)(注1)<li value="開始数字" type="I">
途中から番号を指定(ローマ数字大文字でまとめて変える)(注1)<li value="開始数字" type="I" style="color:#文字色;font-size:大きさ;background-color:#背景色">

(使用例:20個の文字(文章)を「アルファベット(大文字)」で箇条書きする)
  1. 指定なし
  2. 指定なし
  3. ローマ数字(小文字)
  4. 普通の数字
  5. 小さい黒丸
  6. 文字の色を変える(指定なし)
  7. 文字の大きさを変える(指定なし)
  8. 記号なし(余白)
  9. 普通の数字の応用(背景色と文字色をまとめて変える) ←上の説明文を参考に、がんばって試してみてね。
  10. 普通の数字
  11. 途中から番号を指定(普通の数字)
  12. 普通の数字
  13. 普通の数字
  14. 小さい四角
  15. 普通の数字
  16. 普通の数字
  17. 途中から番号を指定
  18. 指定なし
  19. 普通の数字
  20. 普通の数字

<ol type="A">
<li>指定なし
<li>指定なし
<li type="i">ローマ数字(小文字)
<li type="1">普通の数字
<li style="list-style-type:disc">小さい黒丸
<li style="color:#0000ff">文字の色を変える(指定なし)
<li style="font-size:10">文字の大きさを変える(指定なし)
<li style="list-style-type:none">記号なし(余白)
<li type="1" style="background-color:#ffc4c1;color:0000ff">普通の数字の応用(背景色と文字色をまとめて変える) ←上の説明文を参考に、がんばって試してみてね。
<li type="1">普通の数字
<li value="100" type="1">途中から番号を指定(普通の数字)
<li type="1">普通の数字
<li type="1">普通の数字
<li style="list-style-type:square">小さい四角
<li type="1">普通の数字
<li type="1">普通の数字
<li value="11">途中から番号を指定
<li>指定なし
<li type="1">普通の数字
<li type="1">普通の数字
</ol>



HTMLタグに戻る