簡単な方法

実際の様子です。スマートフォンを縦横にしたり、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;
}