CSSデザインカタログ » list » dd に ul をネストしたリスト : list511

サンプル

コンセプト
  • テキストテキストテキストテキストテキストテキストテキスト。
  • テキストテキストテキストテキストテキストテキスト。
  • テキストテキストテキストテキストテキストテキストテキストテキストテキスト。
テーマ
  • テキストテキストテキストテキスト。
  • テキストテキストテキストテキストテキストテキスト。
ターゲット
  • テキストテキスト。
  • テキストテキストテキストテキスト。
  • テキストテキストテキスト。

ソース

XHTML
<dl class="list511">
  <dt>コンセプト</dt>
  <dd>
    <ul>
      <li>テキストテキスト......</li>
      <li>テキストテキスト......</li>
      <li>テキストテキスト......</li>
    </ul>
  </dd>
  <dt>テーマ</dt>
  <dd>
    <ul>
      <li>テキストテキスト......</li>
      <li>テキストテキスト......</li>
    </ul>
  </dd>
  <dt>ターゲット</dt>
  <dd>
    <ul>
      <li>テキストテキスト......</li>
      <li>テキストテキスト......</li>
      <li>テキストテキスト......</li>
    </ul>
  </dd>
</dl>

CSS
dl.list511 dt {
  margin-top: 1em;
  width: 10em;
  border-bottom: solid 2px #363;
  padding-left: 5px;
  font-size: 119%;
  font-weight: bold;
  color: #363;
}

dl.list511 dd {
  margin-left: 0;
}

dl.list511 dd ul {
  margin: 0.7em 0;
}

dl.list511 dd ul li {
  margin-left: 50px;
}