リスト tag を使ってみよう
リスト 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. リスト1
  2. リスト2
  3. リスト3
  1. <ol style="list-style:lower-roman">
  2. <ol style="list-style:upper-roman">
  3. <ol style="list-style:lower-alpha">
  4. <ol style="list-style:upper-alpha">

top close home(geo) home(goo)
<dl>
	<dt>項目</dt>
	<dd>説明...........</dd>

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

winIEと他ブラウザでのリストの位置 画像で確認
1
  1. 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>
			

2
  1. list-style:none;border:green solid 1px;
  2. margin-top:0px; を追加
  3. 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>
			

3
  1. list-style:none;border:green solid 1px;
  2. margin-top:0px;padding-left:0px; を追加
  3. 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>
			

4
  1. list-style:none;border:green solid 1px;
  2. margin-top:0px;padding-left:0px;margin-left:0px; を追加
  3. 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>
			

5
  1. list-style:none;border:green solid 1px;
  2. margin-top:0px;padding-left:0px;margin-left:0px;margin-bottom:0px; を追加
  3. オペラは赤枠と緑枠の下の隙間が無いので他のブラウザも無しに
下記オペラの部分参照
<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>
			

赤字部分を追加でほぼ同じに
リストタグのブラウザ表示の違い
下記のソ−スを各ブラウザで表示させたもの
windows
下記を[Ctrl]+[A]で全選択して、コピーできます
mac
下記を +[A]で全選択して、コピーできます
mac safari
mac netscape
mac internet explorer
win netscape
win mozilla
win firefox
win opera
win internet explorer