ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >CSS一覧 >リスト

リストマークを画像にする

ul{list-style-image:url(画像);}でリストマークを画像に指定することが出来ます。

この指定はolタグにも有効です。

{list-style-image:none;}と指定すると リストマークに画像は指定しないことになります。(デフォルト)

【ブラウザ表示】

  • HTML
  • CSS

ソース

<ul class="sample3">
<li>HTML</li>
<li>CSS</li>
</ul>

外部ファイル

ul.sample3{list-style-image:url(../image/ball3.gif);}


<body>〜</body>に直接記入する場合

<ul style="list-style-image:url(../image/ball3.gif);">
<li>HTML</li>
<li>CSS</li>
</ul>

■ 一つのリスト項目のマークのみ個別の画像を指定する

li{list-style-image:url(画像);}で一つのリスト項目の マークのみ個別の画像を指定することが出来ます。

【ブラウザ表示】

  1. ここはolタグの画像が適用
  2. ここだけliタグの画像が適用
  3. ここはolタグの画像が適用

ソース

<ol class="olyou">
<li>ここはolタグの画像が適用</li>
<li class="tandoku">ここだけliタグの画像が適用</li>
<li>ここはolタグの画像が適用</li>
</ol>

外部ファイル

ol.olyou{list-style-image:url(../image/ufo.gif);}
li.tandoku{list-style-image:url(../image/ball3.gif);}


<body>〜</body>に直接記入する場合

<ol style="list-style-image:url(../image/ufo.gif);">
<li>ここはolタグの画像が適用</li>
<li style="list-style-image:url(../image/ball3.gif);">
ここだけliタグの画像が適用
</li>
<li>ここはolタグの画像が適用</li>
</ol>

■ その他の項目

リストマークの種類を変える
リストマークの位置を指定する
リストマークを背景画像にする
リストマークを一括指定
余白、間隔を調整する
リストを並べる

スタイルシート一覧のページに戻る

CSS一覧
テキスト
イメージ
テーブル
ボックス
リンク
リスト
水平線
フォーム
フレーム
ページ全体

HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.