https://idea-hack.com/blog/46671/
以外と知らない?定義リストでの正しい改行の挿入方法

以外と知らない?定義リストでの正しい改行の挿入方法

アプリ制作の中で定義リストの改行について考える機会があったので、正しい方法を書き残しました。

コーディングをしていく中で、時折改行の仕方に悩まされることがあります。特に、定義リストを使っている時に、改行を意識せずにはいられません。単に名前と値の組をいくつか表示したいだけの場合でも定義リストを使い、正しいマークアップ構造を目指す人も多いでしょう。

例えば、定義リストタグを利用して、次の様なマークアップをするとします。

HTML
<div class="sample-1">
<dl>
<dt>名前: </dt>
<dd>KAZUKI KIKUCHI</dd>
<dt>メールアドレス: </dt>
<dd>example.example.com</dd>
<dt>住所:</dt>
<dd>銀河系どこか</dd>
</dl>
</div>
Output
名前:
KAZUKI KIKUCHI
メールアドレス:
example.example.com
住所:
銀河系どこか

すると、こんな表示になるはずです。

これはマークアップ的には正解ですが、デザインとしては正解ではありません。

<dt><dd>はブロック要素なので、どうしても改行されてしまいます。そこで、いくつか解決策を検討してみましょう

解決策

<br>タグを利用する

最も簡単な解決方法としては、<dd>の後に<br>を挿入することが考えられます。マークアップ構造なんてどうでも良いという場合に使うことがあると思います。また、メディアサイトの編集部の方で、マークアップ構造を理解していない人が良く用いる傾向です。

マークアップは次の通りです。

HTML
<div class="sample-2">
<dl>
<dt>名前: </dt>
<dd>KAZUKI KIKUCHI</dd><br>
<dt>メールアドレス: </dt>
<dd>example.example.com</dd><br>
<dt>住所:</dt>
<dd>銀河系どこか</dd><br>
</dl>
</div>
CSS
.sample-2 dt, .sample-2 dd {
display: inline;
}
Output
名前:
KAZUKI KIKUCHI

メールアドレス:
example.example.com

住所:
銀河系どこか

<br>タグを書いたうえで、display: inlineを適用することでこの表示になります。

<br>を使わずユニコードを使う

最適な解決策としては、CSSの改行コードとなるユニコードA<dd>の 疑似要素として適用して、<br>の代わりとすることです。

HTML
<div class="sample-3">
<dl>
<dt>名前: </dt>
<dd>KAZUKI KIKUCHI</dd>
<dt>メールアドレス: </dt>
<dd>example.example.com</dd>
<dt>住所:</dt>
<dd>銀河系どこか</dd>
</dl>
</div>
CSS
.sample-3 dt, .sample-3 dd {
display: inline;
}
.sample-3 dt {
margin: 0;
font-weight: bold;
}
.sample-3 dd:after {
content: "A";
}
Output
名前:
KAZUKI KIKUCHI
メールアドレス:
example.example.com
住所:
銀河系どこか

ただし、この状態では全て1行で表示されてしまいます。

これは、デフォルトでは疑似要素に対して改行が適用されるようになっていないためです。

そのため、white-space: pre; を加えてあげます。

HTML
<div class="sample-4">
<dl>
<dt>名前: </dt>
<dd>KAZUKI KIKUCHI</dd>
<dt>メールアドレス: </dt>
<dd>example.example.com</dd>
<dt>住所:</dt>
<dd>銀河系どこか</dd>
</dl>
</div>
CSS
.sample-4 dt, .sample-4 dd {
display: inline;
}
.sample-4 dt {
margin: 0;
font-weight: bold;
}
.sample-4 dd:after {
content: "A";
white-space: pre;
}
Output
名前:
KAZUKI KIKUCHI
メールアドレス:
example.example.com
住所:
銀河系どこか

応用編

1行の定義リストの改行はこれでうまく行きますが、複数行になると違う状況が起こります。

HTML
<div class="sample-5">
<dl>
<dt>名前: </dt>
<dd>KAZUKI KIKUCHI</dd>
<dt>メールアドレス: </dt>
<dd>example.example.com</dd>
<dd>example2.example.com</dd>
<dt>住所:</dt>
<dd>銀河系どこか</dd>
</dl>
</div>
CSS
.sample-5 dt, .sample-5 dd {
display: inline;
}
.sample-5 dt {
margin: 0;
font-weight: bold;
}
.sample-5 dd:after {
content: "A";
white-space: pre;
}
Output
名前:
KAZUKI KIKUCHI
メールアドレス:
example.example.com
example2.example.com
住所:
銀河系どこか

<dd>を2行続けて書くと、表示がおかしくなります。先ほどのコードでは全ての<dd>に改行コードが適用されるため、必要ないところにも改行が適用されます。

そのため、CSSコードをさらに改良します。具体的には、2つ目以降の<dt>の前に改行を加え、2つ目以降の<dd>の前に’,’を加えます。

HTML
<div class="sample-6">
<dl>
<dt>名前: </dt>
<dd>KAZUKI KIKUCHI</dd>
<dt>メールアドレス: </dt>
<dd>example.example.com</dd>
<dd>example2.example.com</dd>
<dt>住所:</dt>
<dd>銀河系どこか</dd>
</dl>
</div>
CSS
.sample-6 dt, .sample-6 dd {
display: inline;
}
.sample-6 dt {
margin: 0;
font-weight: bold;
}
.sample-6 dd + dt::before {
content: "A";
white-space: pre;
}

.sample-6 dd + dd::before {
content:  ", ";
white-space: pre;
}
Output
名前:
KAZUKI KIKUCHI
メールアドレス:
example.example.com
example2.example.com
住所:
銀河系どこか

こうすることで、<br>を使わずに汎用的な定義リストを使用することが出来ます。