13−1.箇条書きの作成(通し番号なし)

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

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

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


コピーボタンを押してコピー貼り付けで文字の部分を変えて使ってね!
(1)ul(全体を指定)
指定なし(小さい黒丸)<ul>(2)</ul>
小さい白丸<ul type="circle">(2)</ul>
小さい四角<ul type="square">(2)</ul>
文字の色を変える(小さい黒丸)<ul style="color:#文字色">(2)</ul>
文字の色を変える(小さい白丸)<ul type="circle" style="color:#文字色">(2)</ul>
文字の色を変える(小さい四角)<ul type="square" style="color:#文字色">(2)</ul>
文字の大きさを変える(小さい黒丸)<ul style="font-size:大きさ">(2)</ul>
文字の大きさを変える(小さい白丸)<ul type="circle" style="font-size:大きさ">(2)</ul>
文字の大きさを変える(小さい四角)<ul type="square" style="font-size:大きさ">(2)</ul>
背景色を変える(小さい黒丸)<ul style="background-color:#背景色">(2)</ul>
背景色を変える(小さい白丸)<ul type="circle" style="background-color:#背景色">(2)</ul>
背景色を変える(小さい四角)<ul type="square" style="background-color:#背景色">(2)</ul>
まとめて変える(小さい黒丸)<ul style="color:#文字色;font-size:大きさ;background-color:#背景色">(2)</ul>
まとめて変える(小さい白丸)<ul type="circle" style="color:#文字色;font-size:大きさ;background-color:#背景色">(2)</ul>
まとめて変える(小さい四角)<ul type="square" style="color:#文字色;font-size:大きさ;background-color:#背景色">(2)</ul>
(2)li(個別を指定)
指定なし(全体で指定したのと同じになります)<li>文字
小さい黒丸<li type="disc">文字
小さい白丸<li type="circle">文字
小さい四角<li type="square">文字
記号なし(余白)<li style="list-style-type:none">文字
普通の数字<li style="list-style-type:decimal">文字
ローマ数字(大文字)<li style="list-style-type:upper-roman">文字
ローマ数字(小文字)<li style="list-style-type:lower-roman">文字
アルファベット(大文字)<li style="list-style-type:upper-alpha">文字
アルファベット(小文字)<li style="list-style-type:lower-alpha">文字
文字の色を変える(指定なし)<li style="color:#文字色">文字
文字の色を変える(小さい黒丸)<li type="disc" style="color:#文字色">文字
文字の色を変える(小さい白丸)<li type="circle" style="color:#文字色">文字
文字の色を変える(小さい四角)<li type="square" style="color:#文字色">文字
文字の色を変える(記号なし)<li style="list-style-type:none;color:#文字色">文字
文字の色を変える(普通の数字)<li style="list-style-type:decimal;color:#文字色">文字
文字の色を変える(ローマ数字大文字)<li style="list-style-type:upper-roman;color:#文字色">文字
文字の色を変える(ローマ数字小文字)<li style="list-style-type:lower-roman;color:#文字色">文字
文字の色を変える(アルファベット大文字)<li style="list-style-type:upper-alpha;color:#文字色">文字
文字の色を変える(アルファベット小文字)<li style="list-style-type:lower-alpha;color:#文字色">文字
文字の大きさを変える(指定なし)<li style="font-size:大きさ">文字
文字の大きさを変える(小さい黒丸)<li type="disc" style="font-size:大きさ">文字
文字の大きさを変える(小さい白丸)<li type="circle" style="font-size:大きさ">文字
文字の大きさを変える(小さい四角)<li type="square" style="font-size:大きさ">文字
文字の大きさを変える(記号なし)<li style="list-style-type:none;font-size:大きさ">文字
文字の大きさを変える(普通の数字)<li style="list-style-type:decimal;font-size:大きさ">文字
文字の大きさを変える(ローマ数字大文字)<li style="list-style-type:upper-roman;font-size:大きさ">文字
文字の大きさを変える(ローマ数字小文字)<li style="list-style-type:lower-roman;font-size:大きさ">文字
文字の大きさを変える(アルファベット大文字)<li style="list-style-type:upper-alpha;font-size:大きさ">文字
文字の大きさを変える(アルファベット小文字)<li style="list-style-type:lower-alpha;font-size:大きさ">文字
背景色を変える(指定なし)<li style="background-color:#背景色">文字
背景色を変える(小さい黒丸)<li type="disc" style="background-color:#背景色">文字
背景色を変える(小さい白丸)<li type="circle" style="background-color:#背景色">文字
背景色を変える(小さい四角)<li type="square" style="background-color:#背景色">文字
背景色を変える(記号なし)<li style="list-style-type:none;background-color:#背景色">文字
背景色を変える(普通の数字)<li style="list-style-type:decimal;background-color:#背景色">文字
背景色を変える(ローマ数字大文字)<li style="list-style-type:upper-roman;background-color:#背景色">文字
背景色を変える(ローマ数字小文字)<li style="list-style-type:lower-roman;background-color:#背景色">文字
背景色を変える(アルファベット大文字)<li style="list-style-type:upper-alpha;background-color:#背景色">文字
背景色を変える(アルファベット小文字)<li style="list-style-type:lower-alpha;background-color:#背景色">文字

(使用例:10個の文字(文章)を「小さい白丸」で箇条書きする)

<ul type="circle">
<li>指定なし
<li type="disc">小さい黒丸
<li>指定なし
<li style="list-style-type:decimal">普通の数字
<li style="list-style-type:upper-roman">ローマ数字(大文字)
<li style="list-style-type:decimal;font-size:10">文字の大きさを変える(普通の数字)
<li type="square" style="background-color:#ffc4c1;color:0000ff">小さい四角の応用(背景色と文字色をまとめて変える) ←上の説明文を参考に、がんばって試してみてね。
<li style="list-style-type:upper-alpha">アルファベット(大文字)
<li>指定なし
<li style="list-style-type:decimal;color:#0000ff">文字の色を変える(普通の数字)
</ul>



HTMLタグに戻る