CSSで複数行のdtとddを横並びにする方法【初心者向け】

CSSで複数行のdtとddを横並びにする方法について解説します。

dt要素とdd要素を改行させないcompact属性ががHTML5から廃止されたので、CSSで調整する必要があります。

そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

 

 

dtとddを横並びにする方法

<dl><dt><dd>を使う「定義リスト」の記述方法は、

<dl>
<dt>タイトル</dt>
<dd>内容<dd>
<dt>タイトル</dt>
<dd>内容<dd>
</dl>

というように、タイトルと内容を連続して書くことになります。そのため、【タイトル】と【内容】を横並びにしたいとき、テーブルのような書き方ができなかったり、floatさせても、clearfixを書く場所がなかったりと、少し困ることがあると思います。

そんなとき、横並びにする方法の一つ、「float: left;」と「margin-left」を使うと、実現することができます。

<dt>にfloat: left; を与えてフロートさせ、そこで高さを失った<dt>の分だけmargin-leftを与えるというやり方になります。

このやり方であれば、内容が複数行になっても、体裁が崩れることなく表示することができます。

 

実際に書いてみよう

まず、Webサイトの更新情報をコーディングすることを想定して、HTMLを書いてみましょう。

そして、<dt>にfloat:left、<dd>にmargin-left（ここでは80pxくらいがちょうど良さそうです。）をCSSに書いてみると、

HTML

<dl>
  <dt>9月20日</dt>
  <dd>xxが追加されました。<br>
  複数行でも崩れません。</dd>
  
  <dt>9月20日</dt>
  <dd>xxが追加されました。</dd>

  <dt>9月18日</dt>
  <dd>Webサイトをリニューアルしました。</dd>
<dl>

 

CSS

dt{
  float: left;
}

dd{
  margin-left: 80px;
}

横並びが実現しました。

 

この記事を監修してくれた方 和田 祥子（わださちこ） フリーランスのWebデザイナー7年目です。Ruby勉強中。 テニスと音楽とビールが好きです。

 

TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。