リスト（ul）タグ

リストの基本骨格は以下の通りです。

<!-- HTML -->
<ul>
<li></li>
<li></li>
</ul>

ulをolに変えると番号付きリストになります。

<!-- HTML -->
<ol>
<li></li>
<li></li>
</ol>

デフォルトのリストマーカーは黒丸ですが、list-style-typeを使って他のデザインに変える事ができます。

/* CSS */
ul {
	list-style-type:none; /* なし */
	list-style-type:circle; /* 白色 */
	list-style-type:square; /* 正方形 */
	list-style-type:decimal; /* 数字 */
	}

また、list-style-image:url(画像)にて、マーカーに画像を指定することもできます。

/* CSS */
li {
	list-style-image:url(abc.jpg); /* abc.jpgを指定 */
	}

ただし、list-style-imageで指定した画像はうまく中央配置されないことがあるので、一度noneにして消してからbackgroundで指定したほうがいいです。

/* CSS */
ul {
	list-style-type:none; 
	}
li {
	background:url(abc.jpg) left center no-repeat; /* abc.jpgを背景に指定 */
	}

サンプル（index.htmlとstyle.css）を一部修正・追記します。（マーカー画像は）

<!-- HTML -->
<h3>りんごの種類</h3>
<ul>
	<li><a href="apple/apple1.6.php">ふじのページへ</a></li>
	<li>ゴールデンデリシャス</li>
</ul>

/* CSS */
ul {
	width:580px;
	text-align:left;
	margin:auto;
	list-style-type:none; 
	}
li {
	padding-left:20px;
	background:url(../gif/point.gif) left center no-repeat;
	}

ここまでの、サンプル。

コメントor補足情報orご指摘あればをお願いします。

<< 前のページ
次のページ >>