|
| いまさらHTML,CSS講座トップ > HTMLテンプレート インデックスページ > リスト テンプレート |
|
|
本稿では、行頭記号を画像で表示させたリストを作成します。
|
| ■ リスト テンプレート |
 表 示 |
|
|
|
 ソース 例 |
|
<ul style="list-style-image: url(arrow/red_right.png)">
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
</ul>
|
|
| カスタマイズ |
|
- メニュー1
- メニュー2
- メニュー3
- メニュー4
- メニュー5
|
|
| ソース 例 |
|
<ul style="list-style-image: url(arrow/red_right.png)">
<li>メニュー1</li>
<li style="list-style-image: url(arrow/blue_right.png)">メニュー2</li>
<li style="list-style-image: url(arrow/green_right.png)">メニュー3</li>
<li style="list-style-image: url(icon/new002.gif)">メニュー4</li>
<li style="list-style-image: url(icon/upn002.gif)">メニュー5</li>
</ul>
|
|
| ■ 解説 |
|
| 画像→こちらから |
リストの行頭記号を画像にするには、list-style-image プロパティを使用します。
各行の行頭記号に違う画像を用いる場合は、li 要素に直接指定します。
|
| スタイルシートの記述が長くなりましたので、head要素に記述するか、外部スタイルシートで指定すると、HTMLの記述がすっきりします。 |
| スタイルシート 記述例 |
■head要素
<style type="text/css">
<!--
li.blue{
list-style-image: url(arrow/blue_right.png)
}
-->
</style>
|
■body要素内(li要素のみ抜粋)
<li class="blue">メニュー2</li>
|
|
|
|
|
|
|
|
