[CSS]dl要素を美しくデザインするスタイルシートのまとめ

Post on:2012年8月2日

実用的なものからちょっとトリッキーなものまで、dl要素を使った美しいデザインのスタイルシートを紹介します。

デモのキャプチャ

各コードは繰り返しになる箇所は省略しています。
※元サイトおよびデモでは全て記述されています。

サイトのキャプチャ

In Defence of the Definition List

HTML

<dl class="wrapper1">
  <dt>News Item 1</dt>
    <dd><div class="div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum orci eu purus viverra imperdiet. Cras scelerisque commodo dictum. Mauris sed libero non justo adipiscing tempor tincidunt eget eros. Praesent eu cursus enim. Donec dictum turpis sit amet dui sagittis dapibus.</div><div class="div2">read more ...</div></dd>
  <dt>News Item 2</dt>
	<dd><div class="div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum orci eu purus viverra imperdiet. Cras scelerisque commodo dictum. Mauris sed libero non justo adipiscing tempor tincidunt eget eros. Praesent eu cursus enim. Donec dictum turpis sit amet dui sagittis dapibus.</div><div class="div2">read more ...</div></dd>
  <dt>News Item 3</dt>
	<dd><div class="div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum orci eu purus viverra imperdiet. Cras scelerisque commodo dictum. Mauris sed libero non justo adipiscing tempor tincidunt eget eros. Praesent eu cursus enim. Donec dictum turpis sit amet dui sagittis dapibus.</div><div class="div2">read more ...</div></dd>
</dl>

CSS

  dl.wrapper1 {margin:0;padding:.5em;width:460px;background-color:#fff;font-size:1em;font-family:Georgia, "Times New Roman", Times, serif;}
  dt {margin:0;padding:.5em;font-weight:bold;background-color:#e0e0e0;}
  dd {margin:0;padding:0;padding-top:.5em;padding-bottom:.5em;}
  dd .div1 {padding-left:.5em;border-left:1px solid #333;font-size:.9em;clear:both;}
  dd .div2 {color:#900;font-size:.76em;margin-top:.5em;margin-bottom:.5em;clear:both;}
サイトのキャプチャ

In Defence of the Definition List

HTML

<div class="chartwrapper">
  <div class="charttitle">An simple chart showing browser views</div>
	<dl class="chart">
        <dt>Firefox</dt>
        <dd style="background:#ffcc00;width:47%;"><div style="padding-right:5px;">Sunday<br />47%</div></dd>
        <dd style="background:#ffcc00;width:23%;"><div style="padding-right:5px;">Monday<br />23%</div></dd>
        <dd style="background:#ffcc00;width:45%;"><div style="padding-right:5px;">Tuesday<br />45%</div></dd>
        <dd style="background:#ffcc00;width:23%;"><div style="padding-right:5px;">Wednesday<br />23%</div></dd>
        <dd style="background:#ffcc00;width:25%;"><div style="padding-right:5px;">Thursday<br />25%</div></dd>
        <dd style="background:#ffcc00;width:60%;"><div style="padding-right:5px;">Friday<br />60%</div></dd>
        <dd style="background:#ffcc00;width:10%;"><div style="padding-right:5px;">Saturday<br />10%</div></dd>
        <dt>IE</dt>
        <dd style="background:#ffcc00;width:13%;"><div style="padding-right:5px;">Sunday<br />13%</div></dd>
        <dd style="background:#ffcc00;width:47%;"><div style="padding-right:5px;">Monday<br />47%</div></dd>
        <dd style="background:#ffcc00;width:20%;"><div style="padding-right:5px;">Tuesday<br />20%</div></dd>
        <dd style="background:#ffcc00;width:27%;"><div style="padding-right:5px;">Wednesday<br />27%</div></dd>
        <dd style="background:#ffcc00;width:25%;"><div style="padding-right:5px;">Thursday<br />25%</div></dd>
        <dd style="background:#ffcc00;width:20%;"><div style="padding-right:5px;">Friday<br />20%</div></dd>
        <dd style="background:#ffcc00;width:30%;"><div style="padding-right:5px;">Saturday<br />30%</div></dd>
</div>

CSS

  dt {margin:0;padding:.5em;font-weight:bold;background-color:#e0e0e0;}
  .chartwrapper {width:480px;color:#000;margin-top:10px;margin-bottom:10px;font-size:.6em;clear:both;font-family:Arial, Helvetica, sans-serif;}
  .charttitle {font-size:1.2em;font-weight:bold;color:#ccc;clear:both;}
  dl.chart{margin:.6em;margin-left:0em;margin-right:0em;padding:.6em;padding-right:0em;padding-left:0em;width:480px;}
  dl.chart dd{margin:.6em;margin-left:0em;margin-right:0em;padding:.3em;padding-right:0em;padding-left:0em;text-align:right;}
  dl.chart dt{font-weight:bold;margin:.6em;margin-left:0em;margin-right:0em;padding:.3em;padding-right:0em;padding-left:1em;}
サイトのキャプチャ

Utilizing the Underused (But Semantically Awesome) Definition List

HTML

<dl>
	<dt>Track your expenses</dt>
	<dd class="chunk_divide">Divide bills easily by creating receipts and letting billshare do the math. Automatically keep a searchable history of all bills.</dd>

	<dt>RSS Feeds</dt>
	<dd class="chunk_rss">Keep track of new receipts are posted to your groups instantly by subscribing to the groups RSS feed.</dd>
</dl>

CSS

dt {
	font-weight: bold;
}
dd {
	background:none no-repeat left top;
	padding-left: 50px;
}
dd.catchPhrase1 {
	background-image:url('../img/paper_small.gif');
}
dd.catchPhrase2 {
	background-image:url('../img/stats.gif');
}
</style>
サイトのキャプチャ

Definition List displayed as a Glossary

CSS

/* 
 * overflow and width will enclose the floats across browsers
 */
dl {
  width:90%;
  margin:20px auto;
  overflow:hidden;
}
/*
 * DTs are floated to the left (in all browsers)
 * The margin is to make the vertical borders overlap
 */
dt {
  float:left;
  width:160px;
  clear:both; 
  padding:3px 20px 4px 0;
  padding-bottom:15px;
  margin-right:-1px;
  border-right:1px solid #999;
  position:relative;
}
/*
 * DDs are floated to the right (in decent browsers)
 */
dd {
  float:right;	
  width:519px;
  padding:3px 0 15px 20px;
  border-left:1px solid #999;
  margin-left:0;
}
/*
 * In IE 6/7, DDs cannot be floated because of a IE bug
 * (DTs would fail to clear DDs properly)
 * Note that if this styling works it is because of another IE bug ;-)
 */
dd {
  *float:none;
  *width:auto;
  *margin-left:180px;
}
/*
 * some extra styling for non IE 6/7 browsers
 */
dt:before {
  content:"";
  width:30px;
  position:absolute;
  border-top:1px solid #999;
  top:-5px;
	right:-15px;
}
dt:after {
  content:"";
  width:5px;
  height:5px;
  background:#333;
  border:1px solid #999;
  position:absolute;
  border-radius:6px;
  top:-8px;
  right:-4px;
}
サイトのキャプチャ

Definition List, term and description in rows

CSS

/*
 * These rules will display DTs/DDs as columns.
 * Constructs must follow a key/value pair pattern.
 * The three last declarations are meant to kill white space between DTs/DDs 
 * (result of inline-block styling)
 */
dl {
  width:50%;
  margin:20px auto;
  border-bottom:1px solid #999;
  letter-spacing:-0.31em;
  *letter-spacing:normal;
  word-spacing:-0.43em;
} 
/* 
 * In this rule, we reset the white-space (see hack above)
 * The width + left/right padding of DTs/DDs equals 50% (for two equal columns)
 */
dt,
dd {
  display:inline-block;
  *display:inline;
  zoom:1;
  letter-spacing:normal;
  word-spacing:normal;
  vertical-align:top;
  width:46%;
  padding:3px 2% 4px;
  margin:0;
  border-top:1px solid #999;
}
/*
 * To keep things tight
 */
dt {
  margin-right:-1px;
}
サイトのキャプチャ

CSS Stacked Bar Graph

HTML

<dl id="csschart">
	<dt>Mon</dt>
	<dd class="p36"><span><b>36</b></span></dd>
	<dd class="sub p30" ><span><b>30</b></span></dd>

	<dt>Tue</dt>
	<dd class="p45"><span><b>45</b></span></dd>
	<dd class="sub p35"><span><b>35</b></span></dd>

	<dt>Wed</dt>
	<dd class="p41"><span><b>41</b></span></dd>
	<dd class="sub p21"><span><b>21</b></span></dd>
</dl>

CSS

dl#csschart, dl#csschart dt, dl#csschart dd{
	margin:0;
	padding:0;
	} 	
dl#csschart{
	background:url(../images/bg_chart.gif) no-repeat 0 0;
	width:454px;
	height:360px;
	padding-left:11px;
	float:left;
	} 
dl#csschart dt{
	display:none;
	}
dl#csschart dd{
	position:relative;
	float:left;
	display:inline;
	width:33px;
	height:330px;
	margin-top:22px;		
	} 
dl#csschart span{
	position:absolute;
	display:block;
	width:33px;	
	bottom:0;
	left:0;	
	z-index:1;
	color:#555;
	text-decoration:none;
	} 		
dl#csschart span b{
	display:block;
	font-weight:bold;
	font-style:normal;
	float:left;
	line-height:200%;
	color:#fff;
	position:absolute;
	top:5px;
	left:3px;
	text-align:center;
	width:23px;
	} 		

/* default column styling */		

	dl#csschart span{
		height:50%;
		background:url(../images/bar.png) repeat-y;
		} 


dl#csschart .sub{
	margin-left:-33px;
	
}
dl#csschart .sub span{
	background:url(../images/subbar.png) repeat-y;
}

/* // column types */	

/* percentages */

	dl#csschart .p1 span{height:1%}
	dl#csschart .p2 span{height:2%}
	...
	...
	dl#csschart .p99 span{height:99%}
	dl#csschart .p100 span{height:100%}

sponsors

top of page

©2024 coliss