定義リストを横並びにする
例えばニュースリリースなどには、定義リスト（dl要素）がよく使われます。その際、日付と記事が横並びになったものもよく見受けられます。
定義リストを横並びにするには、｢float:left;｣を利用して回り込みをさせます。また、汎用性の高い横並び定義リストを作成するために、spanタグやdivタグを併用します。
基本となる（X)HTMLコード、CSSコードは以下のとおりです。
尚、｢* html｣ハックを使用しているのは、hasLayoutをtrueにして｢-3pxずれてしまう｣というIE6のバグを回避するためです。
(X)HTMLコード
<dl class="list">
<dt><span>2008-05-14</span></dt>
<dd>
<div>
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん<br />
</div>
</dd>
<dt><span>2008-05-14</span></dt>
<dd>
<div>
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん<br />
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん<br />
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん<br />
</div>
</dd>
</dl>CSSコード
* html body dl.list dd div{
display:inline-block;
}
dl.list dt {
float:left;
width:10em;
}
dl.list dd {
margin-left:0;
padding-left:10em;
}折角ですので、デザインもいくつか紹介します。
テーブルの枠組みタイプ
それぞれの要素を線で囲んでテーブルみたいに見せてみましょう。
- 2008-05-14
-
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
- 2008-05-14
-
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
CSSコード
* html body dl.list dd div{
display:inline-block;
}
dl.list {
border:1px solid #999;
border-top:0;
background:#f1f1f1;
}
dl.list dt {
float:left;
width:10em;
border-top:1px solid #999;
padding-top:10px;
padding-left:10px;
padding-bottom:0;
padding-right:0;
}
dl.list dd {
margin-left:10em;
padding:10px;
border-top:1px solid #999;
border-left:1px solid #999;
background:#ffefff;
}横線タイプ
dt部分（左側）とdd部分（右側）が横線でつながったように見せてみましょう。
- 2008-05-14
-
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
- 2008-05-14
-
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
CSSコード
* html body dl.list dd div{
display:inline-block;
}
dl.list {
border-bottom:1px solid #999;
}
dl.list dt {
float:left;
width:10em;
border-top:1px solid #999;
padding-top:10px;
padding-bottom:0;
padding-right:0;
}
dl.list dd {
margin-left:10em;
padding-top:10px;
padding-bottom:10px;
padding-right:10px;
border-top:1px solid #999;
}日付にワンポイントタイプ（１）
dt部分（左側）の日付にアクセントを加えてみましょう。
- 2008-05-14
-
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
- 2008-05-14
-
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
CSSコード
* html body dl.list dd div{
display:inline-block;
}
dl.list {
border-bottom:1px solid #999;
}
dl.list dt {
float:left;
width:10em;
border-top:1px solid #999;
padding-top:10px;
padding-bottom:0;
padding-right:0;
}
dl.list dd {
margin-left:10em;
padding-top:10px;
padding-bottom:10px;
padding-right:10px;
border-top:1px solid #999;
}日付にワンポイントタイプ（２）
dt部分（左側）の日付にアクセントを加えてみましょう。
- 2008-05-14
-
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
- 2008-05-14
-
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
CSSコード
* html body dl.list dd div{
display:inline-block;
}
dl.list dt {
float:left;
width:10em;
padding-top:10px;
padding-bottom:0;
padding-right:0;
}
dl.list dt span{
position:relative;
border-bottom:3px double #bf0f0b;
}
dl.list dd {
margin-left:10em;
padding-top:10px;
padding-bottom:10px;
padding-right:10px;
}IE6において、高さが指定された要素内にあるインライン要素にpaddingやborderが指定されているとき親要素をはみ出している部分が消えてしまう、という現象が起きるので｢position:relative;｣を指定してバグを回避します。
インライン要素に指定したパディングやボーダーの上下が消える - [IE(Win)] ぺんたん info
参考URL
この記事は以下のコラムを要約しました。
