アイコンWeb制作実験

HTML/CSS/jQuery/Fabric.js を試した様子と結果です.

CSSを使いdlタグのdt(項目)とdd(説明)を横並びにする方法

イメージ

公開:

更新履歴で「日時と内容」、用語集で「用語と説明」などよく見かけると思います。

CSSを使い、HTMLのdlタグのdt(項目)とdd(説明)を横並びにする方法です。dd部分が長くて複数行になってもdtは高さが自動調節されます。

すでにあるHTMLは変更なく可能です。簡単な方法と、少し応用的な、複数dt/複数dd/div包みにも対応した方法も書いています。

簡単な方法

実際の様子です。スマートフォンを縦横にしたり、PCのウィンドウ幅を変えてみてください。

2020-03-13
記事「canvasでFabric.jsを使用して図形変更やユーザ操作を便利にする」を更新しました。
2020-04-04
記事「生年から年齢や入学卒業年や長寿祝いを計算する」をアップしました。
2020-05-04
記事「簡単!HTMLの共通部分を別ファイルにして多数ページで共通化」をアップしました。

HTMLのdlの基本的書き方と、横並びにするCSSです。HTMLは、すでにあればそのままで変更の必要はありません

<dl>
  <dt>項目</dt>
  <dd>内容内容内容内容内容</dd>
  <dt>項目</dt>
  <dd>内容内容内容内容内容</dd>
</dl>
dl dt { float: left; }
dl dd { margin-left: 120px; }

dtの内容に応じてmargin-leftの幅をお好みで変えてください。

少し応用

先ずはこちらを。

項目1
項目2
項目3
複数の定義語に対する一つの定義説明が認められています。実際はmarginやborder、あるいは奇数偶数行で色分けするといいでしょう。
項目4
dd1:一つの定義語に対し、複数の定義内容をあてることが認められています。
dd2:複数の定義語に対し、複数の定義内容をあてることも認められています。
項目5
名前と値のグループをdiv要素で包むことが認められています。スタイルを設定するために役立ちます。
項目6
単なる字下げの目的でdl要素を使用するのは誤りです。
<dl>
  <dt>項目1</dt>
  <dt>項目2</dt>
  <dt>項目3</dt>
  <dd>複数の定義語に対する一つの定義説明が認められています。実際はmarginやborder、あるいは奇数偶数行で色分けするといいでしょう。</dd>

  <dt>項目4</dt>
  <dd>dd1:一つの定義語に対し、複数の定義内容をあてることが認められています。</dd>
  <dd>dd2:複数の定義語に対し、複数の定義内容をあてることも認められています。</dd>

  <div>
    <dt>項目5</dt>
    <dd>名前と値のグループをdiv要素で包むことが認められています。スタイルを設定するために役立ちます。</dd>
  </div>

  <dt>項目6</dt>
  <dd>単なる字下げの目的でdl要素を使用するのは誤りです。</dd>
</dl>

このように、dlは仕様上、下記が認められています。

  1. 複数のdtに対し、一つのdd
  2. 一つのdtに対し、複数のdd
  3. dtとddのグループをdivで包む

「a.複数のdtに対し、一つのdd」のみは clear が必要でした。a.がなくb.c.は前述の簡単なCSSで大丈夫でした。

dl dt	{
  float: left;
  clear: left;		//複数dtに必用
}

dl dd	{
  margin-left: 120px;
}

dl dd::after	{	//複数dtに必用
  content: "";
  display: block;
  clear: left;
}

dl > div	{
  color: blue;
}