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

認証マーク一覧

ISO風・エコ認証風の円形マークを複数並べて表示。工場や製造・食品関連ページで品質・環境基準への適合をアピールする。

css

プレビュー

ソースコード

HTML

<div class="d09-05-08-row">
          <div class="d09-05-08-mark d09-05-08-iso">
            <svg viewBox="0 0 40 40" width="40" height="40"><circle cx="20" cy="20" r="18" fill="none" stroke="#2a5c9e" stroke-width="2.5"/><text x="20" y="24" text-anchor="middle" font-size="10" font-weight="700" fill="#2a5c9e" font-family="Arial">ISO</text></svg>
          </div>
          <div class="d09-05-08-mark d09-05-08-eco">
            <svg viewBox="0 0 40 40" width="40" height="40"><circle cx="20" cy="20" r="18" fill="none" stroke="#2f8a52" stroke-width="2.5"/><path d="M20 11c5 3 7 8 5 14-6 1-11-2-13-7-1-4 3-8 8-7z" fill="#2f8a52"/></svg>
          </div>
          <div class="d09-05-08-mark d09-05-08-safe">
            <svg viewBox="0 0 40 40" width="40" height="40"><circle cx="20" cy="20" r="18" fill="none" stroke="#b8862f" stroke-width="2.5"/><path d="M20 10l4 3v6c0 5-2 8-4 10-2-2-4-5-4-10v-6z" fill="#b8862f"/></svg>
          </div>
        </div>

CSS

.d09-05-08-row{ display:flex; gap:16px; }
        .d09-05-08-mark{ line-height:0; }

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