パーツ番号 09-05-03 ・ CSSのみ

メディア掲載ロゴ列

「掲載メディア」の見出しとともにダミーの媒体名ロゴを横並びに配置。第三者からの紹介実績を示し信頼度を底上げする。

css

プレビュー

ソースコード

HTML

<div class="d09-05-03-wrap">
          <span class="d09-05-03-label">掲載メディア</span>
          <div class="d09-05-03-logos">
            <span class="d09-05-03-logo">WEB TIMES</span>
            <span class="d09-05-03-logo">Biz Journal</span>
            <span class="d09-05-03-logo">くらしNAVI</span>
            <span class="d09-05-03-logo">TREND+</span>
          </div>
        </div>

CSS

.d09-05-03-wrap{ width:100%; text-align:center; }
        .d09-05-03-label{ display:block; font-size:11px; letter-spacing:.15em; color:#9aa4b0; margin-bottom:12px; }
        .d09-05-03-logos{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
        .d09-05-03-logo{
          font-family:Georgia, serif; font-weight:700; font-size:13px;
          color:#4b5563; padding:8px 14px; border:1px solid #e2e5ea; border-radius:4px;
          background:#fafbfc;
        }

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