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

抽象地図+固定ピン表示

グリッド線で抽象化した地図上に店舗位置を示すピンを1つ固定表示。店舗ページの所在地案内にそのまま使える構成です。

staticcss

プレビュー

ソースコード

HTML

<div class="map">
          <div class="pin"><span></span></div>
          <div class="pin-shadow"></div>
          <div class="label">サンプル本店</div>
        </div>

CSS

.d10-11-01 .map{position:relative;width:100%;height:100%;border-radius:10px;overflow:hidden;
          background-color:#eef2f6;
          background-image:
            repeating-linear-gradient(0deg,transparent,transparent 23px,#dde4ec 23px,#dde4ec 24px),
            repeating-linear-gradient(90deg,transparent,transparent 23px,#dde4ec 23px,#dde4ec 24px);
          border:1px solid #d3dae2;}
        .d10-11-01 .map::before{content:"";position:absolute;left:0;right:0;top:48%;height:10px;background:#e2e8f0;}
        .d10-11-01 .map::after{content:"";position:absolute;top:0;bottom:0;left:55%;width:8px;background:#e2e8f0;}
        .d10-11-01 .pin{position:absolute;top:38%;left:50%;width:22px;height:22px;background:#e0554f;
          border-radius:50% 50% 50% 0;transform:translate(-50%,-100%) rotate(-45deg);
          box-shadow:0 2px 3px rgba(0,0,0,.25);z-index:2;}
        .d10-11-01 .pin span{position:absolute;top:5px;left:5px;width:8px;height:8px;background:#fff;border-radius:50%;}
        .d10-11-01 .pin-shadow{position:absolute;top:38%;left:50%;width:14px;height:5px;background:rgba(0,0,0,.15);
          border-radius:50%;transform:translate(-50%,3px);}
        .d10-11-01 .label{position:absolute;bottom:10px;left:10px;background:#fff;padding:4px 10px;
          border-radius:6px;font-size:11px;color:#334155;border:1px solid #e2e8f0;}

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