パーツ番号 10-11-09 ・ CSSのみ

座標・住所コピー可能カード風デザイン(静止表示)

住所と座標をコピーボタン風アイコン付きで並べたカード見本。実際の操作は行わない静止デザインです。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <div class="row">
            <span class="ic"><i></i><i></i></span>
            <span class="text">サンプル県サンプル市1-2-3</span>
          </div>
          <div class="row">
            <span class="ic"><i></i><i></i></span>
            <span class="text mono">35.0000, 135.0000</span>
          </div>
        </div>

CSS

.d10-11-09 .card{width:100%;background:#fff;border:1px solid #e5e9ee;border-radius:10px;padding:16px 18px;}
        .d10-11-09 .row{display:flex;align-items:center;gap:10px;padding:8px 0;}
        .d10-11-09 .row + .row{border-top:1px solid #f1f4f7;}
        .d10-11-09 .text{font-size:12.5px;color:#334155;}
        .d10-11-09 .text.mono{font-family:monospace;color:#3d5a80;}
        .d10-11-09 .ic{position:relative;width:16px;height:16px;flex:0 0 auto;}
        .d10-11-09 .ic i{position:absolute;width:10px;height:10px;border:1.5px solid #94a3b8;border-radius:2px;
          background:#fff;}
        .d10-11-09 .ic i:first-child{top:0;left:4px;}
        .d10-11-09 .ic i:last-child{top:4px;left:0;}

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