<!DOCTYPE html> <html lang="ja"> <head> <title>マップ: AEDマップクイズ</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta charset="utf-8"> <link rel="stylesheet" href="stamp.css"> <link rel="stylesheet" href="src/leaflet.css" /> <!-- (1) --> <script src="src/leaflet.js"></script> <script src="src/leaflet-omnivore.min.js"></script> <script src="singleclick.js"></script> <style type="text/css"> div#mymap {width: 90vw; height: 80vh; margin: 0 auto;} /* (2) */ body { width: 100%; height: 100%; overflow: hidden; } #map { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; } .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: white; border-color: blue; } .leaflet-popup-content, a.leaflet-popup-close-button { color: blue !important; font: bold 14pt monospace; } .leaflet-popup-content-wrapper { border-width: 3px; border-style: double; } .leaflet-popup-tip-container { margin-top: -3px; height: 23px; } .leaflet-popup-tip { border-style: solid; border-width: 0 3px 3px 0; } </style> </head> <body> <h1>AEDマップクイズ<span id="title"></span></h1> <div id="mymap"></div> <!-- (3) --> <p><button id="reset" type="button">Reset All</button></p> <!-- #mymap であるdivを配置したあとで (4) --> <a href="https://www.city.sakata.lg.jp/shisei/opendata/opendata_aed.html" alt="酒田市AED設置状況"></a> <script type="text/javascript" src="AEDMAP.js" charset="utf-8"></script> </body> </html>