サンプル

See the Pen Codepen by Tora (@webtoranomaki) on CodePen.

コード

この記事の目次

HTML


<dl>
	<dt>項目1</dt>
	<dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
	<dt>項目2</dt>
	<dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
</dl>

CSS


dl {
    width: 100%;
    border: 1px solid #ccc;
    border-top: none;
    background: #ddd;
    overflow: hidden;
}
dt {
    clear: both;
    float: left;
    width: 160px;
    padding: 10px;
    border-top: 1px solid #ccc;
}
dd {
    margin-left: 180px;
    padding: 10px;
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    background: #fff;
}