資料の一覧へ

箇条書きの指定にCSSを利用する

記号を画像に指定した例

記号を画像にする（使用した画像…　ball.png）

大きな画像を記号として使うこともできますが、画像の大きさの分だけ行間が大きくなります。
また、画像の横幅が大きい場合、画像表示が切れてしまう場合があります。

大きな画像を使用した例

画像を切らずに表示するため、余白を150ピクセル余分にとっています。

CSSとタグの記述例

<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>箇条書きをCSSで指定</title>

<STYLE type="text/css">
<!--
ul {
list-style-image: url(ball.png);
}
-->
</STYLE>

 　←CSSの指定開始
　←CSSが無効である場合に、指示を読み込ませないようにするための指定−開始
　←ulタグへのCSS指定開始
　←記号に使用する画像の指定
　←ulタグへのCSS指定終了
　←CSSが無効である場合に、指示を読み込ませないようにするための指定−閉じ
　←CSSの指定終了
</head>

<body>

<ul>
<li>html<br>Hyper Text Markup Language
<li>css<br>Cascading Style Sheets
</ul>

</body>