{"id":1283,"date":"2024-04-15T15:18:32","date_gmt":"2024-04-15T06:18:32","guid":{"rendered":"https:\/\/takaya-com.jp\/archives\/?p=1283"},"modified":"2024-04-15T15:18:32","modified_gmt":"2024-04-15T06:18:32","slug":"%e3%80%90css%e3%80%91google-map%e3%81%ae%e3%83%8d%e3%83%bc%e3%83%a0%e3%82%ab%e3%83%bc%e3%83%89%e3%82%92%e6%b6%88%e3%81%99%e6%96%b9%e6%b3%95","status":"publish","type":"post","link":"https:\/\/takaya-com.jp\/archives\/2024\/04\/%e3%80%90css%e3%80%91google-map%e3%81%ae%e3%83%8d%e3%83%bc%e3%83%a0%e3%82%ab%e3%83%bc%e3%83%89%e3%82%92%e6%b6%88%e3%81%99%e6%96%b9%e6%b3%95\/","title":{"rendered":"\u3010CSS\u3011Google Map\u306e\u30cd\u30fc\u30e0\u30ab\u30fc\u30c9\u3092\u6d88\u3059\u65b9\u6cd5"},"content":{"rendered":"

\u30a6\u30a7\u30d6\u30b5\u30a4\u30c8\u306e\u30c7\u30b6\u30a4\u30f3\u3092\u3057\u3066\u3044\u3066
\niframe\u3067\u57cb\u3081\u8fbc\u307f\u3057\u305fGoogle Map\u306e\u30cd\u30fc\u30e0\u30ab\u30fc\u30c9\uff08\u30b0\u30fc\u30b0\u30eb\u30de\u30c3\u30d7\u306e\u5de6\u4e0a\u306b\u8868\u793a\u3055\u308c\u308b\u30a2\u30ec\uff09\u3092\u6d88\u3057\u305f\u3044\u2026
\n\u305d\u3082\u305d\u3082\u30a2\u30ec\u306f\u6d88\u305b\u308b\u306e\u304b\uff1f\u3068\u601d\u3044\u8abf\u3079\u3066\u307f\u307e\u3057\u305f\u3089
\nCSS\u306eoverflow: hidden<\/b>\u3067\u7c21\u5358\u306b\u6d88\u3059\u3053\u3068\u304c\u3067\u304d\u307e\u3057\u305f\u3002<\/p>\n

\u3064\u3044\u3067\u306b\u30aa\u30ea\u30b8\u30ca\u30eb\u306e\u30cd\u30fc\u30e0\u30ab\u30fc\u30c9\u306b\u5909\u3048\u3066\u307f\u307e\u3057\u305f\uff01<\/p>\n

\u30c7\u30e2\u30da\u30fc\u30b8\u306f\u3001\u3053\u3061\u3089<\/a><\/p>\n

\u2193\u4ee5\u4e0b\u304c\u5b9f\u969b\u306e\u30bd\u30fc\u30b9\u30b5\u30f3\u30d7\u30eb\u3067\u3059\u3002<\/p>\n

\u25bcHTML<\/p>\n

\r\n    <div class="map-top">\r\n        <div class="google-map">\r\n           <iframe id="map"\r\n              src="https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d3281.101796963052!2d135.51260187622515!3d34.67738018446286!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6000e73a1d2cd66d%3A0xf9e84c1daa9ae735!2zKOagqinjgr_jgqvjg6TjgrPjg5_jg6Xjg4vjgrHjg7zjgrfjg6fjg7Pjgro!5e0!3m2!1sja!2sjp!4v1712031130449!5m2!1sja!2sjp"\r\n              width="1200" height="450" style="border:0;" allowfullscreen="" loading="lazy"\r\n              referrerpolicy="no-referrer-when-downgrade"><\/iframe>\r\n        <\/div>\r\n  \r\n        <div class="map-data">\r\n           <p class="map-data-title">\u682a\u5f0f\u4f1a\u793e\u30bf\u30ab\u30e4\u30b3\u30df\u30e5\u30cb\u30b1\u30fc\u30b7\u30e7\u30f3\u30ba<\/p>\r\n           <dl>\r\n              <dt>\u6240\u5728\u5730<\/dt>\r\n              <dd>\r\n                 <span style="display : inline-block">\u3012540-0015 \u5927\u962a\u5e9c\u5927\u962a\u5e02\u4e2d\u592e\u533a\u5341\u4e8c\u8ed2\u753a6-5F<\/span><span\r\n                    style="display : inline-block">EX\u30a8\u30ea\u30a2V55\u30d3\u30eb 2<\/span>\r\n              <\/dd>\r\n              <dt>\u96fb\u8a71\u756a\u53f7<\/dt>\r\n              <dd>06-6762-8145<\/dd>\r\n           <\/dl>\r\n           <p class="map-data-link">\r\n              <a target="_blank" href="https:\/\/maps.app.goo.gl\/F4aTAzeiZxEb5NDP6">Google\r\n                 Map\u3067\u898b\u308b<span class="material-icons">map<\/span><\/a>\r\n           <\/p>\r\n        <\/div>\r\n     <\/div>\r\n<\/pre>\n
\u25bcCSS<\/p>\n
\r\n\/* --------------------\r\n\r\n\u30cd\u30fc\u30e0\u30ab\u30fc\u30c9\u3092\u6d88\u3059\r\n\r\n--------------------*\/\r\n\r\n.google-map {\r\n   height: 500px;\r\n   margin-right: calc(50% - 50vw);\r\n   margin-left: calc(50% - 50vw);\r\n   overflow: hidden;\r\n}\r\n\r\n.google-map iframe {\r\n   height: 860px;\r\n   margin-top: -170px;\r\n}\r\n\r\n\/* --------------------\r\n\r\n\u81ea\u4f5c\u306e\u30cd\u30fc\u30e0\u30ab\u30fc\u30c9\u3092\u8868\u793a\u3055\u305b\u308b\r\n\r\n--------------------*\/\r\n\r\n.map-top {\r\n   position: relative;\r\n}\r\n\r\n.map-data {\r\n   position: absolute;\r\n   top: 40px;\r\n   left: 40px;\r\n   width: 400px;\r\n   margin: auto;\r\n   padding: 40px 50px;\r\n   border: double 5px #eeeeee;\r\n   background: #ffffff;\r\n   font-size: 1em;\r\n   font-family: "Kaisei Opti", serif;\r\n   font-weight: 400;\r\n   font-style: normal;\r\n   line-height: 2;\r\n   z-index: 999999;\r\n}\r\n\r\n.map-data-title {\r\n   position: relative;\r\n   margin: 0 0 1.5rem 0;\r\n   font-size: 1.2em;\r\n}\r\n\r\n.map-data dl {\r\n   display: flex;\r\n   flex-wrap: wrap;\r\n   justify-content: flex-start;\r\n}\r\n\r\n.map-data dl dt {\r\n   width: 20%;\r\n   margin-right: 20px;\r\n}\r\n\r\n.map-data dl dd {\r\n   width: 50%;\r\n}\r\n<\/pre>\n
\u4eca\u56de\u3001\u53c2\u8003\u306b\u3055\u305b\u3066\u3044\u305f\u3060\u3044\u305f\u306e\u306f\u3001
\n\u300e\u3010Google Map\u3011\u30cd\u30fc\u30e0\u30ab\u30fc\u30c9\u306e\u524a\u9664\u3068\u30de\u30c3\u30d7\u4e0a\u306b\u4f1a\u793e\u60c5\u5831\u3092\u8868\u793a<\/a>\u300f\u3055\u3093\u3067\u3059\u3002
\n\u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u30a6\u30a7\u30d6\u30b5\u30a4\u30c8\u306e\u30c7\u30b6\u30a4\u30f3\u3092\u3057\u3066\u3044\u3066 iframe\u3067\u57cb\u3081\u8fbc\u307f\u3057\u305fGoogle Map\u306e\u30cd\u30fc\u30e0\u30ab\u30fc\u30c9\uff08\u30b0\u30fc\u30b0\u30eb\u30de\u30c3\u30d7\u306e\u5de6\u4e0a\u306b\u8868\u793a\u3055\u308c\u308b\u30a2\u30ec\uff09\u3092\u6d88\u3057\u305f\u3044\u2026 \u305d\u3082\u305d\u3082\u30a2\u30ec\u306f\u6d88\u305b\u308b\u306e\u304b\uff1f\u3068\u601d\u3044\u8abf\u3079\u3066\u307f\u307e\u3057\u305f\u3089 CSS\u306eoverflo […]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/1283"}],"collection":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/comments?post=1283"}],"version-history":[{"count":5,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/1283\/revisions"}],"predecessor-version":[{"id":1315,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/1283\/revisions\/1315"}],"wp:attachment":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/media?parent=1283"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/categories?post=1283"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/tags?post=1283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}