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

ルート線描画済み地図(静止)

出発地から目的地までの経路をあらかじめ線で結んだ静止地図。道案内ページの完成イメージ表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="map">
          <div class="route"></div>
          <div class="pt start"></div>
          <div class="pt end"></div>
          <span class="label s">現在地</span>
          <span class="label e">サンプル店</span>
        </div>

CSS

.d10-11-07 .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-07 .route{position:absolute;top:70%;left:22%;width:52%;height:2px;background:
          repeating-linear-gradient(90deg,#3d5a80,#3d5a80 6px,transparent 6px,transparent 11px);
          transform:rotate(-28deg);transform-origin:left center;}
        .d10-11-07 .pt{position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid #fff;
          box-shadow:0 1px 2px rgba(0,0,0,.25);}
        .d10-11-07 .pt.start{top:calc(70% - 6px);left:calc(22% - 6px);background:#2f9e64;}
        .d10-11-07 .pt.end{top:calc(70% - 6px - 24px);left:calc(74% - 6px);background:#e0554f;}
        .d10-11-07 .label{position:absolute;font-size:10px;color:#475569;background:#fff;padding:2px 6px;
          border-radius:5px;border:1px solid #e2e8f0;}
        .d10-11-07 .label.s{top:76%;left:14%;}
        .d10-11-07 .label.e{top:32%;left:64%;}

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