Warning: Trying to access array offset on value of type bool in /home/yotigory/codingmania.net/public_html/wp-content/plugins/search-everything/config.php on line 29
listの先頭に画像マークをつける。 - CodingMania

2011/3/6

listの先頭に画像マークをつける。

CSSで箇条書きの先頭に画像を指定して表示します。

reset.cssでli {list-style: none;}を指定して元々のリストマークを消しています
その後、CSSの背景画像を指定しています。

HTMl

<div class="mod_List001">
<ul>
<li>文章が入ります。</li>
<li>文章が入ります。<br />改行します。</li>
<li>文章が入ります。</li>
<li>文章が続きます。文章が続きます。文章が続きます。文章が続きます。文章が続きます。文章が続きます。文章が続きます。文章が続きます。文章が続きます。文章が続きます。文章が続きます。文章が続きます。文章が続きます。文章が続きます。文章が続きます。文章が続きます。文章が続きます。文章が続きます。文章が続きます。文章が続きます。文章が続きます。文章が続きます。</li>
<li>文章が入ります。</li>
</ul>
<!-- mod_List001_end --></div>

CSS

.mod_List001 ul li{
	/* リストマーカー画像切れ防止。最低高さを確保 */
	min-height:6px;
	height:auto!important;
	height:6px;
	margin:0 0 0.5em 0;
	padding:0 0 0 15px;
	background:transparent url('listmaker.gif') no-repeat left 0.4em scroll;
}