パーツ番号 01-09-08 ・ CSSのみ

コラム記事の枠囲みレイアウト

本文中に囲み枠のコラムが挿入された誌面構成。補足情報や豆知識を本文と区別して配置したい記事ページに用いる。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-09-08-wrap">
          <span class="d01-09-08-l"></span><span class="d01-09-08-l"></span>
          <div class="d01-09-08-box">
            <span class="d01-09-08-box-t">COLUMN</span>
            <span class="d01-09-08-box-l"></span><span class="d01-09-08-box-l"></span><span class="d01-09-08-box-l"></span>
          </div>
          <span class="d01-09-08-l"></span><span class="d01-09-08-l"></span>
        </div>

CSS

.d01-09-08{background:#fff;align-items:flex-start;}
        .d01-09-08-wrap{width:100%;display:flex;flex-direction:column;gap:7px;}
        .d01-09-08-l{display:block;height:6px;background:#e2e2e2;border-radius:2px;}
        .d01-09-08-box{border:1px solid #cfc7b4;background:#faf7ef;padding:10px;margin:6px 0;display:flex;flex-direction:column;gap:5px;}
        .d01-09-08-box-t{font-size:9px;font-weight:800;letter-spacing:.1em;color:#8a6d3b;}
        .d01-09-08-box-l{display:block;height:5px;background:#e3dcc8;border-radius:2px;}

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