パーツ番号 11-07-12 ・ CSSのみ

デバイス連携案内イラスト(静止)

PCとスマホのアイコンを線でつないだ連携案内イラストです。マルチデバイス対応サービスの初期設定案内に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-07-12-wrap">
          <svg viewBox="0 0 140 80" width="140" height="80">
            <rect x="10" y="18" width="46" height="34" rx="4" fill="#e0e7ff" stroke="#818cf8" stroke-width="2"/>
            <rect x="96" y="10" width="24" height="42" rx="4" fill="#dbeafe" stroke="#60a5fa" stroke-width="2"/>
            <path d="M58 34h34" stroke="#a5b4fc" stroke-width="2" stroke-dasharray="4 4"/>
            <circle cx="75" cy="34" r="4" fill="#818cf8"/>
          </svg>
          <p class="d11-07-12-t">デバイスを連携しましょう</p>
          <p class="d11-07-12-sub">PCとスマホでデータが同期されます</p>
        </div>

CSS

.d11-07-12-wrap{ text-align:center; }
        .d11-07-12-t{ margin:10px 0 2px; font-size:14px; font-weight:700; color:#1e293b; }
        .d11-07-12-sub{ margin:0; font-size:11.5px; color:#6b7280; }

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