[ CSS ] dl をスタイリングする CSS のサンプル

HTML の dl で書かれているコードをスタイリングする CSS のサンプルをいろいろ覚え書き。

この記事の目次非表示

CSS サンプル 1
- サンプルコード
- 実際の動作サンプル
CSS サンプル 2
- サンプルコード
- 実際の動作サンプル
雑感

CSS サンプル 1

Vicuna のデモページで使われていた dl のスタイルが格好良かったので真似させてもらった。ココで使われている class 名の dl.data って良いなぁ。

サンプルコード

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>dl のサンプル</title>
<style type="text/css">
<!--
body { font-size: 12px; font-family: Arial, Helvetica, sans-serif;
}
dl { padding: 0; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc;
}
dl dt { margin: 0; padding: 0.5em 0 0.1em 1em; border-top: 1px solid #ccc; width: 8em; float: left; color: #333;
}
dl dd { margin: 0 0 0 8em; padding: 0.5em 1em; border-left: 1px solid #ccc; border-top: 1px solid #ccc; color: #666;
}
-->
</style>
</head>
<body>
<dl>
<dt>タイトル</dt>
<dd>説明文一行目</dd>
<dd>説明文二行目</dd>
<dt>タイトル</dt>
<dd>説明文一行目</dd>
<dt>タイトル</dt>
<dd>説明文一行目</dd>
<dt>タイトル</dt>
<dd>説明文一行目</dd>
<dt>タイトル</dt>
<dd>説明文一行目</dd>
<dt>タイトル</dt>
<dd>説明文一行目</dd>
</dl>
</body>
</html>

実際の動作サンプル

https://codepen.io/darucub/pen/QwNwoVZ

CSS サンプル 2

トップページの新着・更新情報などに使いたい。

サンプルコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>dl のサンプル</title>
<style type="text/css">
<!--
body { font-family: Arial, Helvetica, sans-serif; font-size: 12px;
}
#news {
}
#news dt { float:left; width: 6em; line-height: 1.5em; margin: 0 0 1.5em 0;
}
#news dd { line-height: 1.5em; margin: 0 0 1.5em 6em;
}
-->
</style>
</head>
<body>
<div> <dl> <dt>2008-03-11</dt> <dd><a href="#">ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</a></dd> <dt>2008-03-11</dt> <dd><a href="#">ああああああああああああああああああああああああああああああ</a></dd> <dt>2008-03-11</dt> <dd><a href="#">ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</a></dd> <dt>2008-03-11</dt> <dd><a href="#">ああああああああああああああああああああああああああああああ</a></dd> <dt>2008-03-11</dt> <dd><a href="#">ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</a></dd> <dt>2008-03-11</dt> <dd><a href="#">ああああああああああああああああああああああああああああああ</a></dd> <dt>2008-03-11</dt> <dd><a href="#">ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</a></dd> <dt>2008-03-11</dt> <dd><a href="#">ああああああああああああああああああああああああああああああ</a></dd> <dt>2008-03-11</dt> <dd><a href="#">ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</a></dd> <dt>2008-03-11</dt> <dd><a href="#">ああああああああああああああああああああああああああああああ</a></dd> </dl>
</div>
</body>
</html>