リスト tag を使ってみよう

<ul>
	<li>
		リスト1
	</li>

	<li>
		リスト2
	</li>

	<li>
		リスト3
	</li>
</ul>

記号付き

リスト1
リスト2
リスト3

<ul style="list-style:circle">
<ul style="list-style:square">
<ul style="list-style:url(画像アド)">
<ul style="list-style:none">

top close home(geo) home(goo)

<ol>
	<li>
		リスト1
	</li>

	<li>
		リスト2
	</li>

	<li>
		リスト3
	</li>
</ol>

番号付き

リスト1
リスト2
リスト3

<ol style="list-style:lower-roman">
<ol style="list-style:upper-roman">
<ol style="list-style:lower-alpha">
<ol style="list-style:upper-alpha">

top close home(geo) home(goo)

<dl>
	<dt>項目</dt>
	<dd>説明...........</dd>

	<dt>項目</dt>
	<dd>説明...........</dd>
</dl>

項目: 説明...........
項目: 説明...........

winIEと他ブラウザでのリストの位置画像で確認

list-style:none;border:green solid 1px;

IEでの表示

他ブラウザでの表示

<style type="text/css"><!--
ul   {
	list-style:none;
	border:green solid 1px;}
--></style>

<ul>
	<li>list-style:none;border:green solid 1px;</li>
</ul>

list-style:none;border:green solid 1px;
margin-top:0px; を追加
IEは赤枠と緑枠の上の隙間が無いので他のブラウザも無しに

IEでの表示

他ブラウザでの表示

<style type="text/css"><!--
ul   {
	list-style:none;
	border:green solid 1px;
	margin-top:0px;}
--></style>

<ul>
	<li>list-style:none;border:green solid 1px;</li>
	<li>margin-top:0px; を追加</li>
	<li>IEは赤枠と緑枠の上の隙間が無いので他のブラウザも無しに</li>
</ul>

list-style:none;border:green solid 1px;
margin-top:0px;padding-left:0px; を追加
IEは緑枠と文字の先頭部分に隙間が無いので他のブラウザも無しに

IEでの表示

他ブラウザでの表示

<style type="text/css"><!--
ul   {
	list-style:none;
	border:green solid 1px;
	margin-top:0px;
	padding-left:0px;}
--></style>

<ul>
	<li>list-style:none;border:green solid 1px;</li>
	<li>margin-top:0px;padding-left:0px; を追加</li>
	<li>IEは緑枠と文字の先頭部分に隙間が無いので他のブラウザも無しに</li>
</ul>

list-style:none;border:green solid 1px;
margin-top:0px;padding-left:0px;margin-left:0px; を追加
IEは赤枠と緑枠の左に隙間があるのでIEも隙間無しに

IEでの表示

他ブラウザでの表示

<style type="text/css"><!--
ul   {
	list-style:none;
	border:green solid 1px;
	margin-top:0px;
	padding-left:0px;
	margin-left:0px;}
--></style>

<ul>
	<li>list-style:none;border:green solid 1px;</li>
	<li>margin-top:0px;padding-left:0px;margin-left:0px; を追加</li>
	<li>IEは赤枠と緑枠の左に隙間があるのでIEも隙間無しに</li>
</ul>

list-style:none;border:green solid 1px;
margin-top:0px;padding-left:0px;margin-left:0px;margin-bottom:0px; を追加
オペラは赤枠と緑枠の下の隙間が無いので他のブラウザも無しに

下記オペラの部分参照

<style type="text/css"><!--
ul   {
	list-style:none;
	border:green solid 1px;
	margin-top:0px;
	padding-left:0px;
	margin-left:0px;
	margin-bottom:0px;}
--></style>

<ul>
	<li>list-style:none;border:green solid 1px;</li>
	<li>
margin-top:0px;padding-left:0px;margin-left:0px;margin-bottom:0px; を追加</li>
	<li>オペラは赤枠と緑枠の下の隙間が無いので他のブラウザも無しに</li>
</ul>

赤字部分を追加でほぼ同じに

リストタグのブラウザ表示の違い

デフォルトではブラウザによって表示が違う
style="margin-top:0px;padding-left:0px;margin-left:0px;margin-bottom:0px;"
これらを指定することによって同じ様な表示に

下記のソ－スを各ブラウザで表示させたもの
windows
下記を[Ctrl]+[A]で全選択して、コピーできます
mac
下記を

+[A]で全選択して、コピーできます

<style type="text/css"><!--
ul     {
	border:green solid 1px;}

.body  {
	border:blue solid 1px;
	margin:10px;
	padding:10px;}

.waku  {
	border:red solid 1px;}
--></style>

<div class="body">

	<div class="waku">
		<ul>
			<li>リストタグのブラウザ表示の違い</li>
			<li>スタイルシート無し</li>
		</ul>
	</div>

	<div style="height:1em;"></div>

	<div class="waku">
		<ul style="margin-top:0px;">
			<li>リストタグのブラウザ表示の違い</li>
			<li>style="margin-top:0px;"</li>
		</ul>
	</div>

	<div style="height:1em;"></div>

	<div class="waku">
		<ul style="margin-top:0px;padding-left:0px;">
			<li>リストタグのブラウザ表示の違い</li>
			<li>style="margin-top:0px;padding-left:0px;"</li>
		</ul>
	</div>

	<div style="height:1em;"></div>

	<div class="waku">
		<ul style="margin-top:0px;padding-left:0px;margin-left:0px;">
			<li>リストタグのブラウザ表示の違い</li>
			<li>style="margin-top:0px;padding-left:0px;margin-left:0px;"</li>
		</ul>
	</div>

	<div style="height:1em;"></div>

	<div class="waku">
		<ul style="margin-top:0px;padding-left:0px;margin-left:0px;margin-bottom:0px;">
			<li>リストタグのブラウザ表示の違い</li>
			<li>style="margin-top:0px;padding-left:0px;margin-left:0px;margin-bottom:0px;"</li>
		</ul>
	</div>

</div>

mac safari

mac netscape

mac internet explorer

win netscape

win mozilla

win firefox

win opera

win internet explorer

top home(geo) home(goo) close