CSSレイアウト リスト tmpr - mnk375 @ ウィキ

①リスト表示　（div使用の場合）
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
■XHTML
<div class="clearfix jp-btm10">
  <div class="jp-leftbox" style="width: 330px;">
    <img src="newkolig_point01.png" alt="ひんやり快適 接触冷感素材使用" width="82" height="82" class="jp-imgleft">
    <div style="margin-left: 95px;">
      <h3>1.接触冷感素材使用</h3>
      <p>接触冷感性に優れた素材を使用することにより高いクーリング効果があります。</p>
    </div>
  </div>
  <div class="jp-rightbox" style="width: 330px;">
    <img src="newkolig_point02.png" alt="湿気を吸収・放出 優れた吸水速乾性" width="82" height="82" class="jp-imgleft">
    <div style="margin-left: 95px;">
      <h3>2.優れた吸水速乾性</h3>
      <p>特殊機能ポリエステルを使用しているので、汗をすばやく吸い取り拡散し、速く乾きます。</p>
    </div>
  </div>
</div>
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
.jp-btm10 {
margin-bottom: 10px;
}
 
/*●ボックスをフロートさせる（親要素でclearfix（haslayoutをtrueにしてある。zoom:100%;））*/
#mainbody .jp-leftbox {
float: left;
}
 
#mainbody .jp-rightbox {
float: right;
}
 
/*●画像をフロートさせる*/
#mainbody .jp-imgleft {
float: left;
margin: 0 20px 10px 0;
}
 
/*●divに直接、画像幅のmarginを入れるスタイルを書き込む（<div style="margin-left: 95px;">〜）*/
 
 
②リストタグ使用の場合（ul li dl dt dd)
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
■XHTML
 
<div class="clearfix" id="zero_g_100_dt03">
<ul class="clearfix">
    <li id="zero_g_100_img03_01">
<dl><dt><img alt="バイブレーション機能" src="images/zero_g_100/dt03_01.gif"></dt>
 	<dd>肩部と脚部の箇所のバイブレーション機能は、3段階で強弱のレベルを選べます。<br>
    またタイマー付きで10分、20分、30分の選択可能。<br>
    <span class="small">※ Zero-G 100 にはこちらの機能はついておりません</span></dd></dl>
</li>
    <li id="zero_g_100_img03_02">
<dl><dt><img alt="理想の姿勢Zero-Gポジション機能" src="images/zero_g_100/dt03_02.gif"></dt> 						<dd>ボタン1 つで、体に圧力がかからず無重力のような状態を実現する「Zero-G（ゼロ グラビティ）」ポジションにリクライニング。</dd></dl></li>
</ul>
<ul class="clearfix">
    <li id="zero_g_100_img03_03"><dl><dt><img alt="背・脚２モーターで角度調節も自在" src="images/zero_g_100/dt03_03.gif"></dt> 						<dd>リモコンのボタンを押すだけの簡単な操作で無段階に調節可能です。お好みの姿勢にぴったりとフィットします。</dd></dl></li>
    <li id="zero_g_100_img03_04"><dl><dt><img alt="後ろにスライド移動するバックスライド" src="images/zero_g_100/dt03_04.gif"></dt> 						<dd>リクライニング時にフレーム全体が後ろにスライドするため、フラット時と頭の位置が変わりません。そのため、サイドテーブルなどもフラット時と変わらず利用できます。<br>
    <span class="small">※Zero-G 400 KD にはこちらの機能はついておりません。</span></dd></dl></li>
</ul>
</div>
 
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
/*外枠でclearfix（親要素でclearfix（haslayoutをtrueにしてある。zoom:100%;）） */
#zero_g_100_contents_area #zero_g_100_dt03 {
width: 720px;
padding-left: 20px;
}
 
#zero_g_100_contents_area ol, #zero_g_100_contents_area ul {
list-style: none;
}
 
/* li要素で背景画像に点線画像を表示*/
#zero_g_100_contents_area #zero_g_100_dt03 li {
background: url("../images/zero_g_100/bg_line_dotted.gif") left bottom repeat-x;
width: 340px;
float: left;
margin-right: 20px;
margin-bottom: 20px;
}
 
/* dl要素で背景画像にイメージ画像を表示*/
#zero_g_100_contents_area #zero_g_100_dt03 li#zero_g_100_img03_01 dl {
background: url("../images/zero_g_100/img03_01.jpg") right top no-repeat;
}
 
/* dt要素で見出し画像を配置*/
#zero_g_100_contents_area #zero_g_100_dt03 li dl dt {
margin-bottom: 6px;
}
 
/* dd要素で詳細説明テキストを配置*/
#zero_g_100_contents_area #zero_g_100_dt03 li dl dd {
color: #666;
padding-right: 70px;
line-height: 1.6;
}