tableで組むほどの内容でないときは定義リストで事足りる。
HTML
- リンゴ
- 皮が赤い種類が多いが、黄緑色や黄色の種類もある。
- みかん
- こたつのお供。食べすぎると手が黄色くなる。
- バナナ
- 昔は高級品だったらしい。
- キウイ
- 毛がフサフサしている。
- ぶどう
- 種ごと食べるとヘソから芽が出てくるらしい。
CSS
dl {
margin: 20px;
padding: 10px;
border: 1px solid #000;
}
dt {
padding: 5px;
border: 1px solid #f00;
/* dtとdlを横並びにする */
float: left;
/* 行ごとにmarginを取るときは、dtとddの両方にmargin-bottomが必要 */
margin-bottom: 5px;
}
dd {
padding: 5px;
border: 1px solid #00f;
/* 行ごとにmarginを取るときは、dtとddの両方にmargin-bottomが必要 */
margin-bottom: 5px;
}