＜dd＞がインデントされない原因を修正。ついでに定義リストのデザインあれこれ

項目の説明などに定義リストを使うと、自動で改行やインデントをしてくれるので便利です。

定義リストとは、「<dl>、<dt>、<dd>」を使って、用語とその説明を箇条書きに表記します。

<dl>でリスト全体を囲み、<dt>に用語を記述、<dd>で用語の説明をする感じです。

実際に、このブログで使ってみると、なぜかインデントされませんでした。理由は、テーマに利用しているSTINGER5のCSSにあったようです。

今回はCSSの修正を行うと共に、定義リストのデザインをいくつかやってみます。

STINGER5で定義リストがインデントされない理由

<dd>タグは、デフォルトだとインデントされます。

しかし、STINGER5の場合、全称セレクタを使ったリセットで、marginを0pxにしているためインデントされません。

全称セレクタとは、「*」を使って全要素を示すセレクタです。全要素に適用されるので、ブラウザごとに違うスタイルをリセットする時に使われます。

下記は、STINGER5のstyle.cssで全称セレクタを使用している箇所です。

要するにインデントさせるためには、左にマージンを取ってやればいい訳です。

定義リストのデザイン

STINGER5で記事部分は、<div class=”post”>で囲まれています。

記事内の定義リストのデザインは、複数必要ないので、postクラスの子孫要素として、定義リストの要素を指定して、CSSを記述する事にします。

.post dl { }と記述すると、postクラスを指定したブロック内のdl要素に対してだけ適用されます。

また、定義リストを複数パターン用意する場合は、dl.simple{ }などと記述すればいいでしょう。

基本的にはこんな感じで行います。

• <dt>はfont-weightで太字にする。
• <dd>のインデントはmargin-leftで左側にスペースを空ける。
• <dd>は見やすいようにpadding-bottomで間隔を空ける。

シンプルな定義リスト

.post dl { 
}
.post dt { 
     font-weight: bold; 
}
.post dd { 
     margin-left: 30px; 
     padding-bottom: 10px;
}

表示例

左にボーダーを付ける

.post dl { 
}
.post dt { 
     font-weight: bold; 
     border-left: 5px solid #2bbbff;
}
.post dd { 
     margin-left: 30px; 
     padding-bottom: 10px;
}

表示例

左にスクエアを付ける

擬似要素を使って左にスクエアを付けています。

.post dl { 
}
.post dt { 
     position: relative;
     font-weight: bold; 
}

.post dt:before {
     position: absolute;
     top: 6px;
     left: -10px;
     width: 8px;
     height: 8px;
     border: 2px solid #2bbbff;
     content: "";
}
.post dd { 
     margin-left: 30px; 
     padding-bottom: 10px;
}

表示例

まとめ

HTMLタグの表示がデフォルトと違う場合は、CSSリセットの可能性が高いです。

この際だから、ブログにあったデザインにCSSを書き加えるのも面白いと思います。