パーツ番号 06-13-09 ・ CSSのみ

編集部クレジット表記

個人名ではなく編集部・チーム名義で表記する形式。取材記事やニュース記事の署名欄に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <div class="mark">Ed</div>
          <div class="tx">
            <p class="nm">編集部</p>
            <p class="rl">Web編集チーム</p>
          </div>
        </div>

CSS

.d06-13-09 .card{display:flex;align-items:center;gap:12px;}
        .d06-13-09 .mark{width:44px;height:44px;border-radius:10px;background:#1e293b;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;font-family:sans-serif;letter-spacing:.5px;}
        .d06-13-09 .tx{text-align:left;}
        .d06-13-09 .nm{margin:0;font-size:14px;font-weight:700;color:#1e293b;font-family:sans-serif;}
        .d06-13-09 .rl{margin:2px 0 0;font-size:11px;color:#94a3b8;font-family:sans-serif;}

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