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

専門家監修表示

専門家アイコンと肩書きを添えたクレジット表示。医療・美容・健康系コンテンツの記事や商品説明に専門性の裏付けを添える。

css

プレビュー

ソースコード

HTML

<div class="d09-05-07-card">
          <div class="d09-05-07-icon">
            <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="#fff" stroke-width="1.8">
              <circle cx="12" cy="8" r="3.5"/>
              <path d="M5 20c1.5-4 4.5-6 7-6s5.5 2 7 6"/>
            </svg>
          </div>
          <div class="d09-05-07-text">
            <span class="d09-05-07-name">皮膚科専門医 佐伯 直人 監修</span>
            <span class="d09-05-07-role">医療法人 直心会クリニック院長</span>
          </div>
        </div>

CSS

.d09-05-07-card{ display:flex; align-items:center; gap:12px; padding:14px 18px; background:#fff; border-radius:10px; border:1px solid #e6e2da; box-shadow:0 3px 10px rgba(40,30,10,0.06); max-width:100%; }
        .d09-05-07-icon{ width:44px; height:44px; border-radius:50%; background:#7a6a4f; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
        .d09-05-07-text{ display:flex; flex-direction:column; gap:3px; }
        .d09-05-07-name{ font-size:12.5px; font-weight:700; color:#3a3226; }
        .d09-05-07-role{ font-size:10.5px; color:#8b8168; }

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