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

サイドバー付き記事レイアウト

本文と右サイドバー(関連情報)による2カラム構成。本文を補足する情報を並置する、コラムや解説記事向けのページ構成。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-09-04-wrap">
          <div class="d01-09-04-main">
            <span class="d01-09-04-t"></span>
            <span class="d01-09-04-l"></span><span class="d01-09-04-l"></span><span class="d01-09-04-l"></span>
          </div>
          <div class="d01-09-04-side">
            <span class="d01-09-04-side-t">関連情報</span>
            <span class="d01-09-04-side-l"></span><span class="d01-09-04-side-l"></span><span class="d01-09-04-side-l"></span>
          </div>
        </div>

CSS

.d01-09-04{background:#fff;align-items:flex-start;}
        .d01-09-04-wrap{width:100%;display:flex;gap:14px;}
        .d01-09-04-main{flex:2;display:flex;flex-direction:column;gap:7px;}
        .d01-09-04-t{height:12px;width:80%;background:#333;border-radius:2px;margin-bottom:4px;}
        .d01-09-04-l{display:block;height:6px;background:#e2e2e2;border-radius:2px;}
        .d01-09-04-side{flex:1;background:#f3f1ec;padding:10px;border-radius:3px;display:flex;flex-direction:column;gap:6px;}
        .d01-09-04-side-t{font-size:10px;font-weight:700;color:#8a6d3b;letter-spacing:.05em;}
        .d01-09-04-side-l{display:block;height:5px;background:#d9d2c2;border-radius:2px;}

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