{"id":6831,"date":"2025-03-21T16:43:48","date_gmt":"2025-03-21T07:43:48","guid":{"rendered":"https:\/\/code-plus.jp\/gp\/?p=6831"},"modified":"2026-03-18T14:18:54","modified_gmt":"2026-03-18T05:18:54","slug":"imagemap-6831","status":"publish","type":"post","link":"https:\/\/code-plus.jp\/gp\/imagemap-6831\/","title":{"rendered":"Illustrator\u3067ImageMap\uff08\u30af\u30ea\u30c3\u30ab\u30d6\u30eb\u30de\u30c3\u30d7\uff09\u306e\u30af\u30ea\u30c3\u30af\u9818\u57df\u3092\u4f5c\u6210\u3059\u308b"},"content":{"rendered":"<p>\u4eca\u56de\u306fIllustrator\u3092\u4f7f\u3063\u3066\u30af\u30ea\u30c3\u30ab\u30d6\u30eb\u30de\u30c3\u30d7\u3092\u4f5c\u6210\u3059\u308b\u65b9\u6cd5\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3059<br class=\"d-none_sp\" \/>\u5b9f\u969b\u306e\u5236\u4f5c\u904e\u7a0b\u3067\u767a\u751f\u3057\u3084\u3059\u3044\u554f\u984c\u3068\u305d\u306e\u89e3\u6c7a\u7b56\u3082\u3042\u308f\u305b\u3066\u89e3\u8aac\u3057\u307e\u3059\u3002<br class=\"d-none_sp\" \/>\u4ee5\u524d\u3082\u8a18\u4e8b\u306b\u3057\u307e\u3057\u305f\u304c\u3001\u3082\u3046\u5c11\u3057\u308f\u304b\u308a\u3084\u3059\u304f\u307e\u3068\u3081\u76f4\u3057\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\r\n\r\n<!-- \u2605\u76ee\u6b21\u30ea\u30b9\u30c8 -->\r\n<ul class=\"tocList mt-1r\" data-toc-id=\"js-tocBWGD\"><\/ul>\r\n<ins class=\"tocBtn is-fixed\" data-toc-id=\"js-tocBWGD\"><\/ins>\r\n<!-- \u76ee\u6b21\uff1aJS -->\r\n<script src=\"https:\/\/code-plus.jp\/cdn\/js\/_gimmicks\/inppend-tocList.js\"><\/script>\r\n<script src=\"https:\/\/code-plus.jp\/cdn\/js\/_gimmicks\/inppend-tocBtn.js\"><\/script>\r\n\r\n\r\n\r\n\r\n<h2 class=\"fz-xl\">ImageMap\u3068\u306f\uff1f<\/h2>\r\n<p>ImageMap\uff08\u30a4\u30e1\u30fc\u30b8\u30de\u30c3\u30d7\uff09\u3068\u306f\u30011\u679a\u306e\u753b\u50cf\u4e0a\u306b\u8907\u6570\u306e\u30af\u30ea\u30c3\u30af\u53ef\u80fd\u306a\u9818\u57df\uff08\u30db\u30c3\u30c8\u30b9\u30dd\u30c3\u30c8\uff09\u3092\u8a2d\u5b9a\u3067\u304d\u308bHTML\u6a5f\u80fd\u3067\u3059\u3002\u753b\u50cf\u306e\u7279\u5b9a\u90e8\u5206\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001\u305d\u308c\u305e\u308c\u7570\u306a\u308b\u30ea\u30f3\u30af\u5148\u306b\u79fb\u52d5\u3057\u305f\u308a\u3001JavaScript\u6a5f\u80fd\u3092\u5b9f\u884c\u3055\u305b\u305f\u308a\u3067\u304d\u307e\u3059\u3002<\/p>\r\n\r\n\r\n<h2 class=\"fz-xl\">Illustrator\u3067\u4f5c\u6210\u3059\u308b\u30e1\u30ea\u30c3\u30c8<\/h2>\r\n<p>\u300cHTML Imagemap Generator\u300d\u306a\u3069\u306e\u30c4\u30fc\u30eb\u3068\u6bd4\u8f03\u3059\u308b\u3068\u3001Illustrator\u3092\u4f7f\u3046\u30e1\u30ea\u30c3\u30c8\u306f\u6b21\u306e\u901a\u308a\u3067\u3059\uff1a<\/p>\r\n<ul class=\"my-0.5r\" style=\"list-style-type:bullet;\">\r\n  <li>\u30c7\u30b6\u30a4\u30f3\u3068\u4e00\u4f53\u5316\u3057\u305f\u4f5c\u696d\u304c\u53ef\u80fd<\/li>\r\n  <li>\u4fee\u6b63\u30fb\u8abf\u6574\u304c\u5bb9\u6613\uff08\u3084\u308a\u76f4\u3057\u304c\u3067\u304d\u308b\uff09<\/li>\r\n  <li>\u30ec\u30a4\u30e4\u30fc\u7ba1\u7406\u3067\u8907\u96d1\u306a\u69cb\u9020\u3082\u6574\u7406\u3057\u3084\u3059\u3044<\/li>\r\n  <li>\u4f4d\u7f6e\u5408\u308f\u305b\u304c\u6b63\u78ba\u306b\u3067\u304d\u308b<\/li>\r\n  <li>\u30db\u30d0\u30fc\u30a8\u30d5\u30a7\u30af\u30c8\u7528\u306e\u753b\u50cf\u3082\u540c\u6642\u306b\u4f5c\u6210\u53ef\u80fd<\/li>\r\n<\/ul>\r\n\r\n\r\n<h2 class=\"fz-xl\">\u5b9f\u969b\u306e\u4f5c\u696d\u624b\u9806<\/h2>\r\n<h3 class=\"fz-lg\">1. \u30a2\u30fc\u30c8\u30dc\u30fc\u30c9\u306e\u8a2d\u5b9a<\/h3>\r\n<p><b class=\"bold\">\u91cd\u8981<\/b>: \u30a2\u30fc\u30c8\u30dc\u30fc\u30c9\u306e\u30b5\u30a4\u30ba\u306f\u6700\u7d42\u8868\u793a\u30b5\u30a4\u30ba\u306b\u5408\u308f\u305b\u3066\u8a2d\u5b9a\u3057\u307e\u3057\u3087\u3046\u3002800px\u00d7600px\u306e\u3088\u3046\u306a\u6a19\u6e96\u7684\u306a\u30b5\u30a4\u30ba\u304c\u304a\u3059\u3059\u3081\u3067\u3059\u3002<b class=\"bold\">\u3042\u307e\u308a\u306b\u5927\u304d\u3044\u30b5\u30a4\u30ba\uff081920px\u00d71080px\u306a\u3069\uff09\u3067\u4f5c\u6210\u3059\u308b\u3068\u3001\u751f\u6210\u3055\u308c\u308bImageMap\u306e\u5ea7\u6a19\u3068\u8868\u793a\u3055\u308c\u308b\u753b\u50cf\u306e\u30b5\u30a4\u30ba\u304c\u5408\u308f\u306a\u304f\u306a\u308b\u554f\u984c\u304c\u767a\u751f\u3057\u307e\u3059\u3002<\/b><\/p>\r\n<h3 class=\"fz-lg\">2. \u4e0b\u7d75\u306e\u6e96\u5099<\/h3>\r\n<p>\u30af\u30ea\u30c3\u30ab\u30d6\u30eb\u30de\u30c3\u30d7\u306e\u30d9\u30fc\u30b9\u3068\u306a\u308b\u753b\u50cf\u3092\u914d\u7f6e\u3057\u307e\u3059\u3002\u4eca\u56de\u306f\u81ea\u52d5\u8eca\u306e\u56f3\u9762\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\r\n<p><img decoding=\"async\" src=\"https:\/\/gyazo.com\/69a995b5883e87f4044bf248687939ef.png\" alt=\"\u4e0b\u7d75\"><\/p>\r\n<p>\u91cd\u8981\u306a\u30dd\u30a4\u30f3\u30c8\u3068\u3057\u3066\u3001\u4e0b\u7d75\u306e\u30ec\u30a4\u30e4\u30fc\u540d\u3092\u300cimgmap-basis\u300d\u306b\u5909\u66f4\u3057\u3066\u304a\u304d\u307e\u3059\u3002\u3053\u306e\u540d\u524d\u306f\u5f8c\u306e\u5909\u63db\u51e6\u7406\u3067\u91cd\u8981\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\r\n<h3 class=\"fz-lg\">3. \u30af\u30ea\u30c3\u30af\u9818\u57df\u306e\u4f5c\u6210<\/h3>\r\n<p>\u5404\u30af\u30ea\u30c3\u30af\u53ef\u80fd\u306b\u3057\u305f\u3044\u90e8\u5206\u306b\u65b0\u3057\u3044\u30ec\u30a4\u30e4\u30fc\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\r\n<p><img decoding=\"async\" src=\"https:\/\/gyazo.com\/448fd2e510f133963d92f581e0ac38ae.png\" alt=\"\u30af\u30ea\u30c3\u30af\u9818\u57df\u4f5c\u6210\"><\/p>\r\n<p><b class=\"bold\">\u91cd\u8981\u306a\u30dd\u30a4\u30f3\u30c8<\/b>:<\/p>\r\n<ul class=\"my-0.5r\" style=\"list-style-type:bullet;\">\r\n  <li>\u5404\u9818\u57df\u306e\u30ec\u30a4\u30e4\u30fc\u540d\u306f\u300cimgmap-area1\u300d\u300cimgmap-area2\u300d\u306e\u3088\u3046\u306b\u9023\u756a\u3067\u547d\u540d<\/li>\r\n  <li><b class=\"bold\">\u5f62\u72b6\u306f\u30dd\u30ea\u30b4\u30f3\uff08\u591a\u89d2\u5f62\uff09\u3067\u4f5c\u6210\u3059\u308b<\/b> - \u77e9\u5f62\uff08\u9577\u65b9\u5f62\uff09\u30c4\u30fc\u30eb\u3067\u4f5c\u6210\u3059\u308b\u3068\u5909\u63db\u6642\u306b\u554f\u984c\u304c\u767a\u751f\u3059\u308b\u3053\u3068\u304c\u3042\u308a\u307e\u3059<\/li>\r\n  <li>\u9577\u65b9\u5f62\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u30da\u30f3\u30c4\u30fc\u30eb\u30674\u70b9\u4ee5\u4e0a\u306e\u9589\u3058\u305f\u30d1\u30b9\u3068\u3057\u3066\u63cf\u753b\u3057\u307e\u3057\u3087\u3046<\/li>\r\n  <li>\u8996\u8a8d\u6027\u306e\u305f\u3081\u306b\u534a\u900f\u660e\u30ab\u30e9\u30fc\u3067\u5857\u308a\u3092\u8a2d\u5b9a<\/li>\r\n<\/ul>\r\n<p>\u4eca\u56de\u306e\u4f8b\u3067\u306f\u3001\u30d5\u30ed\u30f3\u30c8\u30d5\u30fc\u30c9\u3001B\u30d4\u30e9\u30fc\u3001\u30eb\u30fc\u30d5\u30ec\u30fc\u30eb\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30d7\u30ed\u30f3\u3001\u30e9\u30f3\u30cb\u30f3\u30b0\u30dc\u30fc\u30c9\u306e5\u3064\u306e\u9818\u57df\u3092\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002<\/p>\r\n<h3 class=\"fz-lg\">4. SVG\u30d5\u30a1\u30a4\u30eb\u306e\u66f8\u304d\u51fa\u3057<\/h3>\r\n<p>\u4f5c\u6210\u3057\u305fIllustrator\u30c7\u30fc\u30bf\u3092SVG\u5f62\u5f0f\u3067\u66f8\u304d\u51fa\u3057\u307e\u3059\u3002<\/p>\r\n\r\n<ol class=\"my-0.5r\" style=\"list-style-type:parenthesized-decimal;\">\r\n  <li>\u30d5\u30a1\u30a4\u30eb &gt; \u66f8\u304d\u51fa\u3057 &gt; \u66f8\u304d\u51fa\u3057\u5f62\u5f0f\u3092\u9078\u629e<\/li>\r\n  <li>SVG\u5f62\u5f0f\u3092\u9078\u3073\u3001\u4ee5\u4e0b\u306e\u8a2d\u5b9a\u306b\u6ce8\u610f\u3057\u307e\u3059\uff1a<\/li>\r\n<\/ol>\r\n<p><img decoding=\"async\" src=\"https:\/\/gyazo.com\/2a726bdbe6c9d39d5b03be7092b4ef29.png\" alt=\"SVG\u8a2d\u5b9a\"><\/p>\r\n<ul class=\"my-0.5r\" style=\"list-style-type:bullet;\">\r\n  <li>\u30b9\u30bf\u30a4\u30eb\uff1a\u30d7\u30ec\u30bc\u30f3\u30c6\u30fc\u30b7\u30e7\u30f3\u5c5e\u6027<\/li>\r\n  <li>\u30d5\u30a9\u30f3\u30c8\uff1a\u30a2\u30a6\u30c8\u30e9\u30a4\u30f3\u306b\u5909\u63db<\/li>\r\n  <li>\u753b\u50cf\uff1a\u57cb\u3081\u8fbc\u3080<\/li>\r\n  <li>\u30aa\u30d6\u30b8\u30a7\u30af\u30c8ID\uff1a\u30ec\u30a4\u30e4\u30fc\u540d<\/li>\r\n  <li>\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u306e\u30c1\u30a7\u30c3\u30af\u306f\u5916\u3059<\/li>\r\n<\/ul>\r\n<p>\u3053\u308c\u3089\u306e\u8a2d\u5b9a\u306fSVG\u306e\u69cb\u9020\u3092\u9069\u5207\u306b\u4fdd\u3064\u305f\u3081\u306b\u91cd\u8981\u3067\u3059\u3002<\/p>\r\n<h3 class=\"fz-lg\">5. SVG\u3092ImageMap\u30b3\u30fc\u30c9\u306b\u5909\u63db<\/h3>\r\n<p>\u66f8\u304d\u51fa\u3057\u305fSVG\u30d5\u30a1\u30a4\u30eb\u3092\u5c02\u7528\u306e\u5909\u63db\u30c4\u30fc\u30eb\u3067\u5909\u63db\u3057\u307e\u3059\u3002<\/p>\r\n\r\n<a href=\"https:\/\/code-plus.jp\/gp\/tools\/imagemap-converter\/\" class=\"linkbox my-1.5r\">\r\n<h4 class=\"linkbox-title fz-md\">SVG\u304b\u3089ImageMap\uff08\u30a4\u30e1\u30fc\u30b8\u30de\u30c3\u30d7\uff09\u306b\u5909\u63db\u30c4\u30fc\u30eb<\/h4>\r\n<picture class=\"linkbox-thumbnail\">\r\n<img decoding=\"async\" width=\"300\" height=\"200\" src=\"https:\/\/code-plus.jp\/gp\/wp-content\/uploads\/illustra_2410301614.png\" alt=\"SVG\u304b\u3089ImageMap\uff08\u30a4\u30e1\u30fc\u30b8\u30de\u30c3\u30d7\uff09\u306b\u5909\u63db\u30c4\u30fc\u30eb\" loading=\"lazy\" \/>\r\n<\/picture>\r\n<span class=\"linkbox-excerpt\">Illustrator\u3067\u4f5c\u6210\u3057\u305fImageMap\u7528\u306eSVG\u30d5\u30a1\u30a4\u30eb\u3092\u30c9\u30e9\u30c3\u30b0&amp;\u30c9\u30ed\u30c3\u30d7\u3059\u308b\u3060\u3051\u3067\u3001HTML\u30b3\u30fc\u30c9\uff08 \/ \uff09\u3068CSS\u304c\u81ea\u52d5\u751f\u6210\u3055\u308c\u307e\u3059\u3002\u751f\u6210\u3055\u308c\u305f\u30b3\u30fc\u30c9\u306f\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u81ea\u52d5\u30b3\u30d4\u30fc\u3055\u308c\u307e\u3059\u3002\r\n&emsp;<u class=\"linkbox-more\">\u7d9a\u304d\u3092\u8aad\u3080<\/u>\r\n<\/span>\r\n<\/a>\r\n\r\n<p><img decoding=\"async\" src=\"https:\/\/gyazo.com\/f3c68bb8af375e50caa2c368cb2de5c5.png\" alt=\"\u5909\u63db\u30c4\u30fc\u30eb\"><\/p>\r\n\r\n<p class=\"mt-1r\">SVG\u30d5\u30a1\u30a4\u30eb\u3092\u30c9\u30e9\u30c3\u30b0\uff06\u30c9\u30ed\u30c3\u30d7\u3059\u308b\u3060\u3051\u3067\u3001\u81ea\u52d5\u7684\u306bHTML\u30b3\u30fc\u30c9\u304c\u751f\u6210\u3055\u308c\u307e\u3059\u3002\u3053\u306e\u30b3\u30fc\u30c9\u306b\u306f\u5fc5\u8981\u306aCSS\u5b9a\u7fa9\u3082\u542b\u307e\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\r\n<p><b class=\"bold\">\u5909\u63db\u6642\u306e\u554f\u984c\u3068\u5bfe\u51e6\u6cd5<\/b>:<\/p>\r\n<ul class=\"my-0.5r\" style=\"list-style-type:bullet;\">\r\n  <li>\u9577\u65b9\u5f62\uff08rect\uff09\u8981\u7d20\u304c\u6b63\u3057\u304f\u5909\u63db\u3055\u308c\u306a\u3044\u554f\u984c\uff1a\u3059\u3079\u3066\u306e\u5f62\u72b6\u3092\u30dd\u30ea\u30b4\u30f3\uff085\u70b9\u4ee5\u4e0a\u306e\u9589\u3058\u305f\u30d1\u30b9\uff09\u3068\u3057\u3066\u4f5c\u6210\u3059\u308b<\/li>\r\n  <li>\u7279\u5b9a\u306e\u9818\u57df\u304c\u51fa\u529b\u3055\u308c\u306a\u3044\uff1a\u30ec\u30a4\u30e4\u30fc\u540d\u304c\u6b63\u3057\u304f\u300cimgmap-area\u300d\u3067\u59cb\u307e\u3063\u3066\u3044\u308b\u304b\u78ba\u8a8d\u3059\u308b<\/li>\r\n  <li>\u5ea7\u6a19\u5024\u304cNaN\u306b\u306a\u308b\uff1aSVG\u5185\u306e\u5ea7\u6a19\u304c\u6b63\u3057\u304f\u8a8d\u8b58\u3055\u308c\u3066\u3044\u308b\u304b\u78ba\u8a8d\uff08\u30dd\u30ea\u30b4\u30f3\u3068\u3057\u3066\u518d\u63cf\u753b\u3059\u308b\uff09<\/li>\r\n<\/ul>\r\n<h3 class=\"fz-lg\">6. \u30db\u30d0\u30fc\u30a8\u30d5\u30a7\u30af\u30c8\u7528\u306e\u753b\u50cf\u3092\u66f8\u304d\u51fa\u3059<\/h3>\r\n<p>\u5909\u63db\u3055\u308c\u305fHTML\u30b3\u30fc\u30c9\u3067\u306f\u3001\u5404\u9818\u57df\u3054\u3068\u306b\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u304c\u5fc5\u8981\u3067\u3059\u3002\u3053\u308c\u3089\u3092Illustrator\u304b\u3089\u66f8\u304d\u51fa\u3057\u307e\u3059\u3002<\/p>\r\n<p><img decoding=\"async\" src=\"https:\/\/gyazo.com\/b8539837787fa8d8811a901e6c3a5bc7.png\" alt=\"\u30ec\u30a4\u30e4\u30fc\u69cb\u9020\"><\/p>\r\n<ul class=\"my-0.5r\" style=\"list-style-type:bullet;\">\r\n  <li>\u30d9\u30fc\u30b9\u753b\u50cf\uff1a\u300cimgmap-basis.png\u300d\u3068\u3057\u3066\u4fdd\u5b58<\/li>\r\n  <li>\u5404\u9818\u57df\u306e\u753b\u50cf\uff1a\u300cimgmap-area1.png\u300d\uff5e\u300cimgmap-area5.png\u300d\u3068\u3057\u3066\u4fdd\u5b58<\/li>\r\n<\/ul>\r\n<h3 class=\"fz-lg\">7. Web\u30da\u30fc\u30b8\u3078\u306e\u5b9f\u88c5<\/h3>\r\n<p>\u751f\u6210\u3055\u308c\u305f\u30b3\u30fc\u30c9\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u69cb\u9020\u306b\u306a\u3063\u3066\u3044\u307e\u3059\uff1a<\/p>\r\n<pre><code class=\"language-html\">&lt;map name=&quot;ImageMap&quot; class=&quot;imgmap-container mx-auto&quot; style=&quot;width:min(100%,92.5vw);&quot;&gt;\r\n  &lt;dl class=&quot;imgmap-wrapper&quot;&gt;\r\n    &lt;dt class=&quot;imgmap-basis&quot;&gt;\r\n      &lt;img src=&quot;img\/imgmap-basis.png&quot; usemap=&quot;#ImageMap&quot; alt=&quot;&quot; \/&gt;\r\n    &lt;\/dt&gt;\r\n    &lt;dd class=&quot;imgmap-area1&quot;&gt;\r\n      &lt;area shape=&quot;poly&quot; coords=&quot;...&quot; href=&quot;#&quot; alt=&quot;&quot; \/&gt;\r\n      &lt;img src=&quot;img\/imgmap-area1.png&quot; alt=&quot;&quot; \/&gt;\r\n    &lt;\/dd&gt;\r\n    &lt;!-- \u4ed6\u306e\u9818\u57df\u3082\u540c\u69d8 --&gt;\r\n  &lt;\/dl&gt;\r\n&lt;\/map&gt;&lt;!-- \/\/\/#ImageMap --&gt;\r\n<\/code><\/pre>\r\n<p>\u3053\u308c\u3092Web\u30da\u30fc\u30b8\u306b\u914d\u7f6e\u3057\u3001\u66f8\u304d\u51fa\u3057\u305f\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u9069\u5207\u306a\u30d5\u30a9\u30eb\u30c0\u306b\u914d\u7f6e\u3057\u307e\u3059\u3002<\/p>\r\n<p>CSS\u3082\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u81ea\u52d5\u751f\u6210\u3055\u308c\u307e\u3059\uff1a<\/p>\r\n<pre><code class=\"language-css\">[name*=&quot;ImageMap&quot;] { position:relative; display:block; width:100%; }\r\n[name*=&quot;ImageMap&quot;] .imgmap-basis { width:100%; }\r\n[name*=&quot;ImageMap&quot;] [class*=&quot;imgmap-area&quot;] { position:absolute; inset:0; margin:auto; width:100%; pointer-events:none; }\r\n[name*=&quot;ImageMap&quot;] [class*=&quot;imgmap-area&quot;] { transition:all 0.5s ease; filter:opacity(100%) contrast(100%) contrast(100%); }\r\n[name*=&quot;ImageMap&quot;] [class*=&quot;imgmap-area&quot;]:hover { filter:opacity(75%) contrast(108%) contrast(108%); }\r\n<\/code><\/pre>\r\n<p>\u3053\u306eCSS\u306b\u3088\u308a\u3001\u30db\u30d0\u30fc\u6642\u306b\u30a8\u30d5\u30a7\u30af\u30c8\u304c\u9069\u7528\u3055\u308c\u307e\u3059\u3002<\/p>\r\n<h3 class=\"fz-lg\">8. CSS\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3067\u30db\u30d0\u30fc\u30a8\u30d5\u30a7\u30af\u30c8\u3092\u5f37\u5316<\/h3>\r\n<p>\u57fa\u672c\u7684\u306aCSS\u306f\u81ea\u52d5\u751f\u6210\u3055\u308c\u307e\u3059\u304c\u3001\u3088\u308a\u76ee\u7acb\u3064\u30a8\u30d5\u30a7\u30af\u30c8\u3092\u8ffd\u52a0\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\uff1a<\/p>\r\n<pre><code class=\"language-css\">\/* \u30db\u30d0\u30fc\u6642\u306b\u8272\u76f8\u3092\u53cd\u8ee2\u3055\u305b\u308bCSS *\/\r\n[name*=&quot;ImageMapBVJ&quot;] [class*=&quot;imgmap-area&quot;] {\r\n\ttransition: all 0.5s ease;\r\n\tfilter: hue-rotate(0deg) saturate(100%) saturate(100%) contrast(100%) contrast(100%);\r\n}\r\n\r\n[name*=&quot;ImageMapBVJ&quot;] [class*=&quot;imgmap-area&quot;]:hover {\r\n\tfilter: hue-rotate(180deg) saturate(200%) saturate(200%) contrast(300%) contrast(300%);\r\n}\r\n<\/code><\/pre>\r\n\r\n\r\n<h2 class=\"fz-xl\">\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0<\/h2>\r\n<h3 class=\"fz-lg\">\u554f\u984c1: \u5ea7\u6a19\u304cNaN\u306b\u306a\u308b<\/h3>\r\n<p><b class=\"bold\">\u539f\u56e0<\/b>: SVG\u306e\u5ea7\u6a19\u5f62\u5f0f\u304c\u6b63\u3057\u304f\u8a8d\u8b58\u3055\u308c\u3066\u3044\u306a\u3044<br><b class=\"bold\">\u89e3\u6c7a\u7b56<\/b>: \u3059\u3079\u3066\u306e\u5f62\u72b6\u3092\u30dd\u30ea\u30b4\u30f3\u3068\u3057\u3066\u518d\u4f5c\u6210\u3057\u30015\u70b9\u4ee5\u4e0a\u306e\u9589\u3058\u305f\u30d1\u30b9\u3092\u4f7f\u7528\u3059\u308b<\/p>\r\n<h3 class=\"fz-lg\">\u554f\u984c2: rect\u8981\u7d20\u304c\u51fa\u529b\u3055\u308c\u306a\u3044<\/h3>\r\n<p><b class=\"bold\">\u539f\u56e0<\/b>: \u5909\u63db\u30c4\u30fc\u30eb\u304c\u77e9\u5f62\u8981\u7d20\u3092\u6b63\u3057\u304f\u51e6\u7406\u3067\u304d\u306a\u3044<br><b class=\"bold\">\u89e3\u6c7a\u7b56<\/b>: \u30da\u30f3\u30c4\u30fc\u30eb\u3092\u4f7f\u3063\u30664\u70b9\u4ee5\u4e0a\u306e\u9589\u3058\u305f\u30d1\u30b9\u3068\u3057\u3066\u63cf\u753b\u3059\u308b<\/p>\r\n<h3 class=\"fz-lg\">\u554f\u984c3: \u5ea7\u6a19\u3068\u30db\u30d0\u30fc\u4f4d\u7f6e\u304c\u305a\u308c\u308b<\/h3>\r\n<p><b class=\"bold\">\u539f\u56e0<\/b>: \u30a2\u30fc\u30c8\u30dc\u30fc\u30c9\u304c\u5927\u304d\u3059\u304e\u308b\uff081920px\u00d71080px\u306a\u3069\uff09<br><b class=\"bold\">\u89e3\u6c7a\u7b56<\/b>: 840px\u00d7486px\u306e\u3088\u3046\u306a\u4e2d\u7a0b\u5ea6\u306e\u30b5\u30a4\u30ba\u3067\u30a2\u30fc\u30c8\u30dc\u30fc\u30c9\u3092\u8a2d\u5b9a\u3057\u76f4\u3059<\/p>\r\n<h3 class=\"fz-lg\">\u554f\u984c4: \u753b\u50cf\u304c\u8868\u793a\u3055\u308c\u306a\u3044<\/h3>\r\n<p><b class=\"bold\">\u539f\u56e0<\/b>: \u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u540d\u3068\u30d1\u30b9\u304c\u4e00\u81f4\u3057\u3066\u3044\u306a\u3044<br><b class=\"bold\">\u89e3\u6c7a\u7b56<\/b>: \u30ec\u30a4\u30e4\u30fc\u540d\u3068\u30d5\u30a1\u30a4\u30eb\u540d\u304c\u4e00\u81f4\u3057\u3066\u3044\u308b\u3053\u3068\u3092\u78ba\u8a8d\uff08imgmap-area1\u2192imgmap-area1.png\uff09<\/p>\r\n\r\n\r\n<h2 class=\"fz-xl\">\u307e\u3068\u3081<\/h2>\r\n<p>Illustrator\u3092\u4f7f\u3063\u305f\u30af\u30ea\u30c3\u30ab\u30d6\u30eb\u30de\u30c3\u30d7\u306e\u4f5c\u6210\u306f\u3001\u6b21\u306e\u3088\u3046\u306a\u6d41\u308c\u306b\u306a\u308a\u307e\u3059\uff1a<\/p>\r\n<ol class=\"my-0.5r\" style=\"list-style-type:parenthesized-decimal;\">\r\n  <li>\u9069\u5207\u306a\u30b5\u30a4\u30ba\uff08800px\u524d\u5f8c\uff09\u3067\u30a2\u30fc\u30c8\u30dc\u30fc\u30c9\u3092\u8a2d\u5b9a<\/li>\r\n  <li>\u4e0b\u7d75\u306e\u6e96\u5099\uff08\u30ec\u30a4\u30e4\u30fc\u540d\uff1aimgmap-basis\uff09<\/li>\r\n  <li>\u30af\u30ea\u30c3\u30af\u9818\u57df\u3092\u30dd\u30ea\u30b4\u30f3\uff08\u591a\u89d2\u5f62\uff09\u3067\u4f5c\u6210\uff08\u30ec\u30a4\u30e4\u30fc\u540d\uff1aimgmap-area1\u3001imgmap-area2...\uff09<\/li>\r\n  <li>SVG\u30d5\u30a1\u30a4\u30eb\u306e\u66f8\u304d\u51fa\u3057<\/li>\r\n  <li>\u5c02\u7528\u30c4\u30fc\u30eb\u3067ImageMap\u30b3\u30fc\u30c9\u306b\u5909\u63db<\/li>\r\n  <li>\u30db\u30d0\u30fc\u30a8\u30d5\u30a7\u30af\u30c8\u7528\u306e\u753b\u50cf\u66f8\u304d\u51fa\u3057<\/li>\r\n  <li>Web\u30da\u30fc\u30b8\u3078\u306e\u5b9f\u88c5<\/li>\r\n  <li>CSS\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3067\u30a8\u30d5\u30a7\u30af\u30c8\u3092\u5f37\u5316<\/li>\r\n<\/ol>\r\n<p>\u3053\u306e\u65b9\u6cd5\u306a\u3089\u30c7\u30b6\u30a4\u30f3\u306e\u5909\u66f4\u304c\u3042\u3063\u3066\u3082\u3001Illustrator\u30d5\u30a1\u30a4\u30eb\u3092\u4fee\u6b63\u3057\u3066\u518d\u5ea6\u66f8\u304d\u51fa\u3059\u3060\u3051\u3067\u5bfe\u5fdc\u3067\u304d\u307e\u3059\u3002\u307e\u305f\u3001\u6700\u521d\u304b\u3089\u30dd\u30ea\u30b4\u30f3\u3068\u3057\u3066\u4f5c\u6210\u3057\u3001\u9069\u5207\u306a\u30b5\u30a4\u30ba\u306e\u30a2\u30fc\u30c8\u30dc\u30fc\u30c9\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u3088\u304f\u3042\u308b\u554f\u984c\u3092\u907f\u3051\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>","protected":false},"excerpt":{"rendered":"\u4eca\u56de\u306fIllustrator\u3092\u4f7f\u3063\u3066\u30af\u30ea\u30c3\u30ab\u30d6\u30eb\u30de\u30c3\u30d7\u3092\u4f5c\u6210\u3059\u308b\u65b9\u6cd5\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002\u5b9f\u969b\u306e\u5236\u4f5c\u904e\u7a0b\u3067\u767a\u751f\u3057\u3084\u3059\u3044\u554f\u984c\u3068\u305d\u306e\u89e3\u6c7a\u7b56\u3082\u3042\u308f\u305b\u3066\u89e3\u8aac\u3057\u307e\u3059\u3002\u4ee5\u524d\u3082\u8a18\u4e8b\u306b\u3057\u307e\u3057\u305f\u304c\u3001\u3082\u3046\u5c11\u3057\u308f\u304b\u308a\u3084\u3059\u304f\u307e\u3068\u3081\u76f4\u3057\u3066\u307f\u307e\u3057\u305f","protected":false},"author":1,"featured_media":6833,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":{"0":"post-6831","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-css"},"_links":{"self":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts\/6831","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/comments?post=6831"}],"version-history":[{"count":9,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts\/6831\/revisions"}],"predecessor-version":[{"id":11458,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts\/6831\/revisions\/11458"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media\/6833"}],"wp:attachment":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media?parent=6831"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/categories?post=6831"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/tags?post=6831"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}