今日は予告どおりリストのマークをいろいろと変えてみましょう(〃⌒▽⌒)
とは言いましても、今日変えるのは「順番の無いリスト」(UL)のマークです。
「順番があるリスト」(OL)のマークはまた明日紹介します(笑
ではまず基本形から・・・
例)
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
表示結果)
何も指定しなければ黒丸でマークが表示されるのでしたよね( ̄▽ ̄人)
ではこれをいろいろ変えてみましょう。
例)
<ul style="list-style:none;">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
表示結果)
例)
<ul style="list-style:disk;">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
表示結果)
例)
<ul style="list-style:circle;">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
表示結果)
例)
<ul style="list-style:square;">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
表示結果)
いかがですか?
「list-style」(そのままでしょ?)に「disk」を指定するとデフォルトのままですよね。
「none」を指定しますとマーク自体が消えてしまいます。
「circle」を指定しますと白丸になりますよね。
「square」を指定しますと黒四角になります(〃⌒▽⌒)
今のところ用意されているマークはこれだけですがいかがでしょう?
いろいろと応用できそうですよね( ̄▽ ̄人)
きっちり覚えておいていざというときに思い出せるようにしておいて下さい(〃⌒▽⌒)
ではまた明日ー(゚▽^*)ノ⌒☆