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

だるかぶ

サンダルでスーパーカブ乗りの『だるかぶ』です！
ご訪問ありがとうございます。ゆっくりしていってね。（本ページは広告を含みます。）

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

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>

実際の動作サンプル

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

雑感

• データが二列以下の時は、table タグじゃなくて dl タグでコーディングした方が良いのかな？

• あまりボーダーで囲みすぎるとテーブルと区別がつかなくなるので注意しないと…。

現場からは以上です。それでは、またッ！！！

だるかぶ

最後までお読みいただきありがとうございます！ スキ・コメント・シェア・フォローなどで応援いただけると『だるかぶ』のやる気がアップします！

記事内容の修正について 記載している内容は記事執筆時の情報です。 できるだけ最新情報を掲載するようにしていますが、情報が間違っている場合は「コメント」でご指摘いただけるとありがたいです。