liタグはよく利用しますがデザインによっては行頭のマーク「・」が邪魔になることがあります。
このマークはCSSで簡単に削除することができます。
HTML側
|
1 2 3 4 5 |
<ul class="mark-del"> <li>マークのみ削除</li> <li>マークのみ削除</li> <li>マークのみ削除</li> </ul> |
「ul」にクラス名を付けておきます。
「li」ではなく「ul」であることに注意です。
CSS側（list-style:none）
|
1 2 3 |
ul.mark-del { list-style:none; } |
「list-style」という属性に「none」を設定します。
この1行だけでliタグの行頭「・」が削除されます。
注意点としては行頭の「・」は削除されましたが空白の領域が残っています。
これは「padding-left」を「0px」にすることで解決できます。
CSS側（行頭「・」と空白を削除する）
|
1 2 3 4 |
ul.mark-padding-del { list-style:none; padding-left:0px; } |
簡単ですね！
サンプルも作りました。
