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

初心者向けにCSSで複数行のdtとddを横並びにする方法について解説しています。dl・dt・ddタグは定義リストと呼ばれる要素で用語の後に説明が続く形で使います。今回はdtやddタグを横並びにする方法について学びます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

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

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

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

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

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

CSSで複数行のdtとddを横並びにする方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

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では初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間で習得することが可能です。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。