ホームページ作成 - ホームページ作り - リストのマークを変更する（画像にする）

ホームページ作成ＴＯＰ > リスト > リストのマークを変更する（画像にする）

リストのマークを変更する（画像にする）

リストの『マーク』を、画像に変更する方法です。

通常のリストに表示されるマークには、という感じのマーク使用されます。その様なマーク画像での様に表示する事で、ページ作成時のデザイン上の問題を解決してくれます。

リスト自体の指定方法list-style:url(画像)と、リストの背景画像background-image:url(画像)として表示する方法の２通りがあります。

背景画像background-image:url(画像)として表示した方が、表示場所など細かな指定が出来ますので、背景画像の方法が良いと思われます。

各指定方法の全体は、リストのマークを変更する（全体）に一覧がありますので参照願います。

sample

（１）list-style:url(画像)で指定

項目１行目
項目２行目
項目３行目

（２）background-image:url(画像)で指定し、表示位置も微調整

項目１行目
項目２行目
項目３行目

ＨＴＭＬ　

リストのマークを、画像にするにはスタイルシートを使用します。

ホームページ作成ＴＯＰ > リスト > リストのマークを変更する（画像にする） > このページのＴＯＰ　▲

スタイルシート　list-style:url(画像)

スタイルシートにてリストのマークを画像に変更するには、項目を表す<li>にlist-style:url(画像)を設定する事で、その項目のマークが変更されます。

この方法を使用する場合でも問題点としては、画像と文字との関係の位置調整が出来ない事です。

調整が必要な場合には、下記のbackground-image:url(画像)の方法を使用して調整して下さい。

スタイルシートの場合の種類は下記の様になります。

表示	種類	書き方
	画像	`list-style:url(画像)`

同じ画像を使用する場合にはurl(画像)の画像も同一します。

要素に直接書く

書き方は


<ul>
<li style="list-style:url(画像１)">項目１行目</li>
<li style="list-style:url(画像２)">項目２行目</li>
<li style="list-style:url(画像３)">項目３行目</li>
</ul>

ホームページ作成ＴＯＰ > リスト > リストのマークを変更する（画像にする） > このページのＴＯＰ　▲

headに書く

書き方は


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">

 <style type="text/css">
 <!--

        .sample1   { list-style:url(画像１);}
        .sample2   { list-style:url(画像２);}
        .sample3   { list-style:url(画像３);}

 -->
 </style>
 </head>
 <body>

        <ul>
        <li class="sample1">項目１行目</li>
        <li class="sample2">項目２行目</li>
        <li class="sample3">項目３行目</li>
        </ul>

 </body>
</html>

こうなります

ホームページ作成ＴＯＰ > リスト > リストのマークを変更する（画像にする） > このページのＴＯＰ　▲

スタイルシート　background-image:url(画像)

スタイルシートにてリストのマークを画像に変更するには、まずlist-style:none;でリストマークを消します。

その後、項目を表す<li>にbackground-image:url(画像)を設定します。この際、背景画像は繰返さずに１個だけ表示する様にしましょう。

最後に、背景画像が見える様に、文字を下げ、画像の位置をbackground-position（背景画像の場所を指定する）にて微調整します。

・背景を設定した状態→

・位置を調整した状態→

背景画像の位置を微調整できるので、画像を使用したい場合にはスタイルシートで指定した方が良いと思われます。背景画像の場所を指定するに詳細があります。

同じ画像を使用する場合にはurl(画像)の画像も同一します。

要素に直接書く

書き方は


指定項目が多いので、head内↓に書きます

ホームページ作成ＴＯＰ > リスト > リストのマークを変更する（画像にする） > このページのＴＯＰ　▲

headに書く

書き方は


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">

 <style type="text/css">
 <!--

        ul         { list-style:none;}
        li         {
                    text-indent:1em;
                    background-repeat:no-repeat;
                    background-position:left center;
                   }
        .sample1   { background-image:url(画像１);}
        .sample2   { background-image:url(画像２);}
        .sample3   { background-image:url(画像３);}

 -->
 </style>
 </head>
 <body>

        <ul>
        <li class="sample1">項目１行目</li>
        <li class="sample2">項目２行目</li>
        <li class="sample3">項目３行目</li>
        </ul>

 </body>
</html>

こうなります