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

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

横長リスト型記事一覧(サムネ+テキスト横並び)

正方形サムネイルと見出し・概要を横並びに配置した帯状の一覧。カテゴリページの一覧表示に馴染む構成。

staticcss

プレビュー

ソースコード

HTML

<div class="row06-07-02">
          <span class="th06-07-02 th06-07-02-1"></span>
          <div class="tx06-07-02"><p class="ti06-07-02">旅行の持ち物チェックリスト</p><p class="ds06-07-02">初めての海外旅行でも安心の準備リスト。</p></div>
        </div>
        <div class="row06-07-02">
          <span class="th06-07-02 th06-07-02-2"></span>
          <div class="tx06-07-02"><p class="ti06-07-02">健康管理アプリ比較</p><p class="ds06-07-02">続けやすさで選ぶおすすめ5選。</p></div>
        </div>
        <div class="row06-07-02">
          <span class="th06-07-02 th06-07-02-3"></span>
          <div class="tx06-07-02"><p class="ti06-07-02">節約生活のコツ</p><p class="ds06-07-02">今日から始められる家計見直し術。</p></div>
        </div>

CSS

.d06-07-02{display:flex;flex-direction:column;gap:12px;width:100%;}
        .d06-07-02 .row06-07-02{display:flex;gap:12px;align-items:center;}
        .d06-07-02 .th06-07-02{display:block;width:64px;height:64px;border-radius:6px;flex-shrink:0;}
        .d06-07-02 .th06-07-02-1{background:linear-gradient(135deg,#9fd8ff,#2a7fd8);}
        .d06-07-02 .th06-07-02-2{background:linear-gradient(135deg,#ffcba4,#e86a1f);}
        .d06-07-02 .th06-07-02-3{background:linear-gradient(135deg,#c8f2b0,#4fae3a);}
        .d06-07-02 .tx06-07-02{display:flex;flex-direction:column;gap:4px;}
        .d06-07-02 .ti06-07-02{margin:0;font-size:12px;font-weight:bold;color:#222;}
        .d06-07-02 .ds06-07-02{margin:0;font-size:10px;color:#777;}

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