DL,DT,DD を見栄え良くするCSSサンプル

DL,DT,DD を見栄え良くするCSS

通常のDL,DT,DD

あ行: あいうえお
か行・さ行: かきくけこ; さしすせそ

<dl>
<dt>あ行</dt>
<dd>あいうえお</dd>
<dt>か行・さ行</dt>
<dd>かきくけこ</dd>
<dd>さしすせそ</dd>
</dl>

DDにのみ背景色

あ行: あいうえお
か行・さ行: かきくけこ; さしすせそ

サンプルソースを表示

dl.sample4 dd {
	margin-left:5px;
	padding:5px;
	background-color:#ddeeff;
}

<dl>
<dt>あ行</dt>
<dd>あいうえお</dd>
<dt>か行・さ行</dt>
<dd>かきくけこ</dd>
<dd>さしすせそ</dd>
</dl>

DTとDDを横並びに2

あ行: あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお
か行・さ行: かきくけこ; さしすせそ

サンプルソースを表示

dl.sample {
	border-bottom:1px solid #ccc;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
	background-color:#ddeeff;
	margint:5px;
}
dl.sample dt {
	float:left;
	clear: left;
	width:100px;
	font-weight:bold;
	background-color:#ddeeff;
	border-top:1px solid #ccc;
	padding:5px;
}
dl.sample dd {
	background-color:#ffffff;
	border-top:1px solid #ccc;
	margin-left:110px;  
	padding:5px;
}

<dl class="sample">
<dt>あ行</dt>
<dd>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</dd>
<dt>か行・さ行</dt>
<dd>かきくけこ</dd>
<dd>さしすせそ</dd>
</dl>

+グラデューションや影付き

あ行: あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお
か行・さ行: かきくけこ; さしすせそ
た行: たちつてと

サンプルソースを表示

dl.sample2 {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #c3e1ff), color-stop(1.00, #ddeeff));
	background: -webkit-linear-gradient(#c3e1ff, #ddeeff);
	background: -moz-linear-gradient(#c3e1ff, #ddeeff);
	background: -o-linear-gradient(#c3e1ff, #ddeeff);
	background: -ms-linear-gradient(#c3e1ff, #ddeeff);
	background: linear-gradient(#c3e1ff, #ddeeff);
	border-radius:10px;
	box-shadow:0px 0px 5px 1px #ddeeff;
}
dl.sample2 dt {
	float:left;
	clear: left;
	width:100px;
	font-weight:bold;
	padding:5px;
	text-shadow:0px 0px 3px #999;
	border-top:1px solid #ccc;

}
dl.sample2 dd {
	margin-left: 110px;  
	padding:5px;
	border-top:1px solid #ccc;
	font-size:smaller;
}
dl.sample2 dt:first-child
{
	border:none;
}
dl.sample2 dt:first-child + dd
{
	border:none;
}

<dl class="sample2">
<dt>あ行</dt>
<dd>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</dd>
<dt>か行・さ行</dt>
<dd>かきくけこ</dd>
<dd>さしすせそ</dd>
<dt>た行</dt>
<dd>たちつてと</dd>
</dl>

グラフ

グラフA: 8月1日 47%; 8月2日 23%
グラフB: 8月1日 47%; 8月2日 80%

サンプルソースを表示

dl.chart dt {
	text-align:left;
	font-weight:bold;
	color:navy;
	padding:5px;
}
dl.chart dd {
	background-color:#ddeeff;
	margin:5px 5px 5px 15px;
	padding:5px 5px 5px 15px;
	border-radius:5px;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #efe457), color-stop(1.00, #feae31));
	background: -webkit-linear-gradient(#efe457, #feae31);
	background: -moz-linear-gradient(#efe457, #feae31);
	background: -o-linear-gradient(#efe457, #feae31);
	background: -ms-linear-gradient(#efe457, #feae31);
	background: linear-gradient(#efe457, #feae31);
}

<dl class="chart">
<dt>グラフA</dt>
<dd style="width:47%;"><div style="padding-right:5px;">8月1日 47%</div></dd>
<dd style="width:23%;"><div style="padding-right:5px;">8月2日 23%</div></dd>
<dt>グラフB</dt>
<dd style="width:47%;"><div style="padding-right:5px;">8月1日 47%</div></dd>
<dd style="width:80%;"><div style="padding-right:5px;">8月2日 80%</div></dd>
</dl>