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

店舗リスト+ミニ地図並列表示(固定)

店舗名リストと小さな地図を左右に並べた静止レイアウト。複数拠点を持つ店舗の一覧ページに適した構成です。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <ul class="list">
            <li class="on">サンプル本店</li>
            <li>架空支店A</li>
            <li>架空支店B</li>
          </ul>
          <div class="mini">
            <div class="pin"></div>
          </div>
        </div>

CSS

.d10-11-03 .wrap{display:flex;gap:10px;width:100%;height:100%;}
        .d10-11-03 .list{list-style:none;margin:0;padding:0;flex:0 0 40%;display:flex;flex-direction:column;gap:6px;}
        .d10-11-03 .list li{font-size:11.5px;color:#64748b;background:#f4f6f8;border-radius:6px;
          padding:8px 10px;border:1px solid #eceff2;}
        .d10-11-03 .list li.on{color:#fff;background:#3d5a80;border-color:#3d5a80;font-weight:600;}
        .d10-11-03 .mini{flex:1;position:relative;border-radius:8px;overflow:hidden;border:1px solid #d8dee5;
          background-color:#eef2f6;
          background-image:repeating-linear-gradient(0deg,transparent,transparent 15px,#dfe5ec 15px,#dfe5ec 16px),
            repeating-linear-gradient(90deg,transparent,transparent 15px,#dfe5ec 15px,#dfe5ec 16px);}
        .d10-11-03 .pin{position:absolute;top:45%;left:50%;width:14px;height:14px;background:#3d5a80;
          border-radius:50% 50% 50% 0;transform:translate(-50%,-100%) rotate(-45deg);}

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