下記の記事でもご紹介したように、dtリストというのは「キーワード」とその「意味・説明」などを記載したいときに使うタグです。
でも、dtは初期設定では下記のようにdtタグとddタグとの間に改行が入ってしまいます。
ボタンで表示を切り替えてご覧ください。
See the Pen dt_side by kenichi (@ken81) on CodePen.
HTML
<dl> <dt>キーワード１</dt><dd>説明文、説明文、説明文。</dd> <dt>キーワード２</dt><dd>説明文、説明文、説明文。</dd> <dt>キーワード３</dt><dd>説明文、説明文、説明文。</dd> </dl>
でも、場合によってはキーワードの部分と説明文を改行させずに横に配置したいときってありますよね。始めはそういう場合は、テーブル使わないとダメだと思っていましたが、スタイルシートで簡単にできることが分かったのでご紹介します。
dtタグddタグをヨコに並べる方法
See the Pen dt_side02 by kenichi (@ken81) on CodePen.
CSS
dt{
float: left;
}
dd{
padding-left: 5em;
}
dl{
clear: both;
}
やり方はシンプルです。dtタグに対してfloat: left;を効かせてddタグを横に並べるだけです。ただし、このままだとdtタグとddタグの間隔が詰まってしまうので、ddタグにpadding-leftを使って余白を空けます。このときのpadding-leftは、dtタグとの距離ではなく、親要素の左端との距離なので気をつけて下さい。
dl{clear: both;}は、効かせたfloatを解除するためのおまじないです。実際、この例の場合、これを効かせなくても問題はなかったのですが、clearしておかないと気持ちが悪いので入れておきました。
dtタグddタグをヨコに並べて横線を入れる方法
See the Pen
dt_side03 by kenichi (@ken81)
on CodePen.
CSS
dl{
line-height: 2.5em;
clear: both;
margin-bottom: 2em;
position: relative;
}
dt{
float: left;
padding-left: .5em;
}
dd{
padding-left: 7em;
position: relative;
}
dd:before,
dd:last-child:after{
content: "";
position: absolute;
width: calc(100% + 5em);
border-top: 1px solid #DDD;
left: -5em;
}
dd:last-child:after{
bottom: 0;
}
dd + dd:before{
border-top: none;
}
今度は、dtタグとddタグのセットごとに境界線を入れてみました。普通にborderを入れようとするとデザインが崩れてしまうので、疑似要素を使って表示させています。
dtタグddタグをヨコに並べてdtタグに背景色を入れる方法
See the Pen
dt_side04 by kenichi (@ken81)
on CodePen.
CSS
dl{
line-height: 2.5em;
clear: both;
margin-bottom: 2em;
position: relative;
}
dl:before{
content: "";
width: 7em;
height: 100%;
background: #C2E5FC;
position: absolute;
top: 0;
z-index: -1;
}
dt{
float: left;
padding-left: .5em;
}
dd{
padding-left: 7em;
position: relative;
}
dd:before,
dd:last-child:after{
content: "";
position: absolute;
width: calc(100% + 5em);
border-top: 1px solid #FFF;
left: -5em;
}
dd:last-child:after{
bottom: 0;
}
dd + dd:before{
border-top: none;
}
今度は、dt要素に背景色を入れました。実際には、dt要素にはこのようにキレイに背景を入れることができないので、dl要素に擬似要素を追加して、それを下に重ねています。
以上がdlリストのdtタグ・ddタグをヨコに並べる方法でした。floatプロパティについて詳しく知りたい方は下記の記事もご参照ください。
