スッキリかんたんスタイルシート～リスト

トップ＞スッキリかんたんスタイルシート

WinIE
5.0	5.5	6.0

WinNS
4.x	6.x	7.x

WinOpera
6.0	7.x	8.0

winFirefox
1.x

MacSafari
1.x	2.0

MacNs
4.x	6.x	7.x

MacOpera
6.0	7.5	8.0

MacFirefox
1.x

【下記CSSのブラウザ対応】　バージョンがグレーで表示されているブラウザは対応していません。赤表示は一部対応です。

list-style-type　リストのマーク指定

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>list-style-type　リストのマーク指定</title>
<style type="text/css">
<!--
body {font-size:14px;}
a:link {color:#0080C0;text-decoration:none;}
a:hover {color:#ff0000;}
a:visited {color:#0080C0;text-decoration:none;}
.none {list-style-type:none;}
.disc {list-style-type:disc;}
.circle {list-style-type:circle;}
.square {list-style-type:square;}
.decimal {list-style-type:decimal;}
.lower-roman {list-style-type:lower-roman;}
.upper-roman {list-style-type:upper-roman;}
-->
</style>
</head>
<body>
<ul class="none">
<li><a href="aaa.htm" >iTunes</a></li>
<li><a href="aaa.htm" >一太郎2006</a><</li>
<li><a href="aaa.htm" >Adobeのライセンス製品が１つから購入可能に
「LicenseOnline Adobe製品ストア」</a></li>
</ul>
<ul class="disc">
<li><a href="aaa.htm" >人気有名ECサイトがたくさん！LinkShare（リンクシェア）</a></li>
<li><a href="aaa.htm" >NEC「得選街」</a></li>
<li><a href="aaa.htm" >速い、快適！NTTのフレッツシリーズはACTOS Memberで！</a></li>
</ul>
<ul class="circle">
<li><a href="aaa.htm" >ＮＴＴ西日本で安心インターネット</a></li>
<li><a href="aaa.htm" >パソコン専門店PCDEPOT WEB本店</a></li>
<li><a href="aaa.htm" >VAIO Style</a></li>
</ul>
<ul class="square">
<li><a href="aaa.htm" >ＵＳＥＮ光ファイバ初期費用０円キャンペーン！</a></li>
<li><a href="aaa.htm" >アット・ニフティストア</a></li>
<li><a href="aaa.htm" >ウイルスバスター2006　インターネット セキュリティ</a></li>
</ul>
<ul class="decimal">
<li><a href="aaa.htm" >エプソンOAサプライ</a></li>
<li><a href="aaa.htm" >日本の直販パソコンをリードする、エプソン</a></li>
<li><a href="aaa.htm" >サムスンダイレクト</a></li>
</ul>
<ul class="lower-roman">
<li><a href="aaa.htm" >【Sony】固定IP付光“bit-drive”</a></li>
<li><a href="aaa.htm" >ソースネクスト・ドットコム</a></li>
<li><a href="aaa.htm" >パソコン工房</a></li>
</ul>
<ul class="upper-roman">
<li><a href="aaa.htm" >クロネコヤマトのブックサービス</a></li>
<li><a href="aaa.htm" >マウスコンピューター</a></li>
<li><a href="aaa.htm" >マカフィー・ストア</a></li>
</ul>
</body>
</html>

WinIE
5.0	5.5	6.0

WinNS
4.x	6.x	7.x

WinOpera
6.0	7.x	8.0

winFirefox
1.x

MacSafari
1.x	2.0

MacNs
4.x	6.x	7.x

MacOpera
6.0	7.5	8.0

MacFirefox
1.x

【下記CSSのブラウザ対応】　バージョンがグレーで表示されているブラウザは対応していません。赤表示は一部対応です。

list-style-image　リストマークに画像を指定する

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

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>list-style-image　リストマークに画像を指定する。</title>
<style type="text/css">
<!--
body {font-size:14px;}
a:link {color:#0080C0;text-decoration:none;}
a:hover {color:#ff0000;}
a:visited {color:#0080C0;text-decoration:none;}
#list1 {width:480px;
	background-color:#E6EFF2;}
ul {list-style-image:url("image001.gif");
	line-height:1.5em;
	color:#333333;}
h3 {color:#ffffff;
	background-color:#61AFB6;}
h3, li {padding:5px 10px;}
-->
</style>
</head>
<body>
<div id="list1">
<h3>リストのマークに画像を指定する</h3>
<ul>
<li><a Href="aaa.htm">■ネクストウェブ■</a></li>
<li><a Href="bbb.htm">サバン</a></li>
<li><a Href="ccc.htm">●今日のおすすめ●　会社名.co.jp／会社名.com【無料】で登録！</a></li>
</ul>
</div>
</body>
</html>

list-style-position　リストの配置を指定する

【outside】*************************************

リストの配置を指定する
プロパティは，list-style-position
値にはinsideとoutsideがあります。ここでは，outsideを指定しています。テキストはリストの外側に配置されます。

【inside】*************************************

リストの配置を指定する
プロパティは，list-style-position
値にはinsideとoutsideがあります。ここでは，insideを指定しています。長い文章では，テキストはリストマークを回り込んで配置されます。

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>list-style-position　リストの配置を指定する</title>
<style type="text/css">
<!--
body {font-size:14px;}
#list3 {width:500px;
      padding:10px;
	background-color:#F3FBDD;}
ul#list3a {list-style-position:outside;}
ul#list3b {list-style-position:inside;}
-->
</style>
</head>
<body>
<div id="list3">
【outside】<FONT COLOR="#408080">*************************************</FONT>
<ul id="list3a">
<li>リストの配置を指定する</li>
<li>プロパティは，list-style-position</li>
<li>値にはinsideとoutsideがあります。ここでは，outsideを指定しています。
テキストはリストの外側に配置されます。</li>
</ul>
<BR><BR>
【inside】<FONT COLOR="#408080">*************************************</FONT>
<ul id="list3b">
<li>リストの配置を指定する</li>
<li>プロパティは，list-style-position</li>
<li>値にはinsideとoutsideがあります。ここでは，insideを指定しています。
長い文章では，テキストはリストマークを回り込んで配置されます。</li>
</ul>
</div>
</body>
</html>

Web2.0は，XMLで！