パーツ番号 02-05-04 ・ CSSのみ

二階層ネストリスト

親項目と字下げされた子項目からなる階層構造のリストです。目次や分類の説明に使いやすい構成です。

staticcss

プレビュー

ソースコード

HTML

<ul class="d02-05-04-list">
          <li>フロントエンド
            <ul>
              <li>HTML / CSS</li>
              <li>JavaScript</li>
            </ul>
          </li>
          <li>バックエンド
            <ul>
              <li>PHP</li>
              <li>データベース</li>
            </ul>
          </li>
        </ul>

CSS

.d02-05-04-list{list-style:none;margin:0;padding:0;width:100%;max-width:280px;font-size:14px;color:#333;}
        .d02-05-04-list > li{padding:6px 0;font-weight:bold;border-left:3px solid #6a1b9a;padding-left:10px;margin-bottom:6px;}
        .d02-05-04-list ul{list-style:none;margin:6px 0 0;padding:0 0 0 20px;font-weight:normal;}
        .d02-05-04-list ul li{position:relative;padding:3px 0 3px 16px;font-size:13px;color:#555;}
        .d02-05-04-list ul li::before{content:"–";position:absolute;left:0;color:#999;}

クラス名 .d02-05-04 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。