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

円形ステップ(サークルフロー)

円環上に4工程を配置し、中心にラベルを置きます。WordPressの循環するサービスサイクルやPDCAの図解表示に使えます。

css

プレビュー

ソースコード

HTML

<div class="d05-03-08-circle">
          <span class="d05-03-08-center">制作<br>フロー</span>
          <span class="d05-03-08-step d05-03-08-s1"><i>1</i>相談</span>
          <span class="d05-03-08-step d05-03-08-s2"><i>2</i>設計</span>
          <span class="d05-03-08-step d05-03-08-s3"><i>3</i>制作</span>
          <span class="d05-03-08-step d05-03-08-s4"><i>4</i>納品</span>
        </div>

CSS

.d05-03-08-circle{position:relative;width:200px;height:200px;border-radius:50%;border:2px dashed #d4ddec}
        .d05-03-08-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;font-size:13px;font-weight:800;color:#1e293b;line-height:1.3}
        .d05-03-08-step{position:absolute;left:50%;top:50%;display:flex;flex-direction:column;align-items:center;font-size:11px;color:#475569;transform:translate(-50%,-50%)}
        .d05-03-08-step i{width:36px;height:36px;border-radius:50%;background:#fff;border:2px solid #4f7cff;color:#4f7cff;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:3px;box-shadow:0 3px 9px rgba(79,124,255,.2)}
        .d05-03-08-s1{margin-top:-88px}
        .d05-03-08-s2{margin-left:88px}
        .d05-03-08-s3{margin-top:88px}
        .d05-03-08-s4{margin-left:-88px}

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