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

更新日+著者の複合表記

著者名と最終更新日を1行にまとめた表記。情報鮮度が重要なノウハウ系記事の冒頭に適します。

staticcss

プレビュー

ソースコード

HTML

<div class="row">
          <div class="av">渡</div>
          <div class="tx">
            <p class="nm">渡辺 岳 <span class="dot">・</span> <span class="date">2026年7月10日更新</span></p>
          </div>
        </div>

CSS

.d06-13-06 .row{display:flex;align-items:center;gap:10px;}
        .d06-13-06 .av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#0f172a,#334155);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;font-family:sans-serif;flex-shrink:0;}
        .d06-13-06 .tx{text-align:left;}
        .d06-13-06 .nm{margin:0;font-size:12px;color:#1e293b;font-family:sans-serif;}
        .d06-13-06 .nm .dot{color:#cbd5e1;}
        .d06-13-06 .date{font-size:11px;color:#94a3b8;}

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