← 静的パーツギャラリーへ戻る

パーツ番号 06-07-03 ・ CSSのみ

メイン記事+サブ記事リスト構成

左に大きな特集記事、右に小さな記事リストを添える2カラム構成。トップページの目玉記事の見せ方に向く。

staticcss

プレビュー

ソースコード

HTML

<div class="main06-07-03">
          <span class="thm06-07-03"></span>
          <p class="tim06-07-03">特集:暮らしを整える収納術まとめ</p>
        </div>
        <div class="list06-07-03">
          <div class="sub06-07-03"><span class="ns06-07-03">01</span><p>玄関収納の工夫</p></div>
          <div class="sub06-07-03"><span class="ns06-07-03">02</span><p>キッチン動線の見直し</p></div>
          <div class="sub06-07-03"><span class="ns06-07-03">03</span><p>クローゼット整理術</p></div>
          <div class="sub06-07-03"><span class="ns06-07-03">04</span><p>書類のデジタル化</p></div>
        </div>

CSS

.d06-07-03{display:flex;gap:16px;width:100%;align-items:stretch;}
        .d06-07-03 .main06-07-03{flex:1.2;display:flex;flex-direction:column;gap:8px;}
        .d06-07-03 .thm06-07-03{display:block;width:100%;height:110px;border-radius:6px;background:linear-gradient(135deg,#ffd6e0,#d84f7a);}
        .d06-07-03 .tim06-07-03{margin:0;font-size:12px;font-weight:bold;color:#222;line-height:1.5;}
        .d06-07-03 .list06-07-03{flex:1;display:flex;flex-direction:column;gap:8px;justify-content:center;}
        .d06-07-03 .sub06-07-03{display:flex;gap:8px;align-items:center;border-bottom:1px solid #eee;padding-bottom:6px;}
        .d06-07-03 .ns06-07-03{font-size:10px;color:#bbb;font-weight:bold;}
        .d06-07-03 .sub06-07-03 p{margin:0;font-size:10px;color:#444;}

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