パーツ番号 01-05-05 ・ CSSのみ

サイドバー2カラムレイアウト

メインコンテンツと右サイドバーで構成した見本です。WordPressのブログ記事ページや一覧ページの土台に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-05-05-layout">
          <div class="d01-05-05-main">
            <span class="d01-05-05-line d01-05-05-l1"></span>
            <span class="d01-05-05-line d01-05-05-l2"></span>
            <span class="d01-05-05-line d01-05-05-l3"></span>
          </div>
          <div class="d01-05-05-side">
            <span class="d01-05-05-box"></span>
            <span class="d01-05-05-box"></span>
            <span class="d01-05-05-box"></span>
          </div>
        </div>

CSS

.prev.d01-05-05{padding:16px}
        .d01-05-05-layout{width:100%;max-width:340px;height:210px;display:grid;grid-template-columns:2fr 1fr;gap:16px}
        .d01-05-05-main{border:1px solid #e2e8f0;border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:10px;justify-content:center}
        .d01-05-05-line{display:block;height:10px;border-radius:4px;background:#e2e8f0}
        .d01-05-05-l1{width:90%}
        .d01-05-05-l2{width:100%}
        .d01-05-05-l3{width:60%}
        .d01-05-05-side{display:flex;flex-direction:column;gap:10px}
        .d01-05-05-box{display:block;flex:1;border-radius:8px;background:#f1f5f9;border:1px solid #e2e8f0}

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