(補足&使い方)
箇条書き(通し番号なし)のタグは、
<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:#背景色">文字 |
<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> |