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

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

li{background:url(画像);}でリストマークを背景画像にすることが出来ます。
ulタグはul{list-style-type:none;}でリストマークを無しに設定しておきます。

【ブラウザ表示】

  • HTML
  • CSS

ソース

<ul class="marknashi">
<li class="kabegami1">HTML</li>
<li class="kabegami1">CSS</li>
</ul>

外部ファイル

ul.marknashi{list-style-type:none;}
li.kabegami1{background:url(../image/ichigo.gif);}


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

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

■ その他の項目

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

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

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

HOME

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