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

複数店舗ピン地図(固定表示)

抽象化した地図の上に複数のピンを配置し、それぞれに店舗記号を添えた見本。エリア内の店舗網を示すのに向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="map">
          <div class="pin p-a">A</div>
          <div class="pin p-b">B</div>
          <div class="pin p-c">C</div>
        </div>

CSS

.d10-11-06 .map{position:relative;width:100%;height:100%;border-radius:10px;overflow:hidden;border:1px solid #d8dee5;
          background-color:#eef2f6;
          background-image:repeating-linear-gradient(0deg,transparent,transparent 22px,#dde4ec 22px,#dde4ec 23px),
            repeating-linear-gradient(90deg,transparent,transparent 22px,#dde4ec 22px,#dde4ec 23px);}
        .d10-11-06 .pin{position:absolute;width:24px;height:24px;line-height:24px;text-align:center;
          font-size:11px;font-weight:700;color:#fff;background:#3d5a80;border-radius:50%;
          box-shadow:0 2px 3px rgba(0,0,0,.2);}
        .d10-11-06 .p-a{top:26%;left:28%;}
        .d10-11-06 .p-b{top:55%;left:58%;background:#e0554f;}
        .d10-11-06 .p-c{top:70%;left:24%;background:#c2670c;}

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