https://hmaster.net/


HTMLタグと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>

このエントリーをはてなブックマークに追加 Instagram

■ その他の項目

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

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