低価格・高品質・最速のHTMLコーディングはクロノドライブへ

dt要素やdd要素を横並びにする

dl内のdt要素やdd要素を横に並べる方法です。

HTML

1<dl class="sampleList">
2    <dt>dt要素です。</dt>
3    <dd>dd要素です。サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</dd>
4    <dt>dt要素です。</dt>
5    <dd>dd要素です。サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</dd>
6</dl>

CSS

01dl.sampleList {
02    overflow: hidden;
03    zoom: 1;
04}
05dl.sampleList dt {
06    width: 100px;
07    float: left;
08    clear: both;
09    font-weight: bold;
10}
11dl.sampleList dd {
12    padding: 0 0 5px 120px;
13}

サンプルページ

注意点として、dt要素に横幅を指定することと、dd要素にその横幅と同じ値のmargin-left、あるいはpadding-leftを指定することです。これを怠ると、表示が崩れてしまいます。

活用方法としては、日付入りの新着情報を入力する際のリストなどに使えます。以下にサンプルを掲載します。

HTML

1<dl class="sampleList02">
2    <dt>2010/01/01</dt>
3    <dd>新着情報です。</dd>
4    <dt>2010/01/01</dt>
5    <dd>新着情報です。</dd>
6</dl>

CSS

01dl.sampleList02 {
02    overflow: hidden;
03    zoom: 1;
04}
05dl.sampleList02 dt {
06    margin-bottom: 5px;
07    padding-bottom: 5px;
08    width: 100px;
09    float: left;
10    clear: both;
11    font-weight: bold;
12}
13dl.sampleList02 dd {
14    margin-bottom: 5px;
15    padding: 0 0 5px 120px;
16    border-bottom: 1px dotted #999;
17}

サンプルページ

dl要素で横並びのリストを作る際は活用してみてください。

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ