{"id":855,"date":"2022-04-02T23:56:39","date_gmt":"2022-04-02T14:56:39","guid":{"rendered":"http:\/\/160.251.208.217\/?p=855"},"modified":"2022-11-19T19:21:57","modified_gmt":"2022-11-19T10:21:57","slug":"js-color-picker","status":"publish","type":"post","link":"https:\/\/it-dxblog.com\/blog\/js-color-picker\/","title":{"rendered":"\u3010JavaScript\u3011\u8272\u3092\u9078\u629e\u3059\u308b\uff08input type=&#8221;color&#8221;\uff09"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>input\u30bf\u30b0<\/strong>\u3092\u4f7f\u3063\u3066<strong>\u8272\u3092\u9078\u629e<\/strong>\u3059\u308b\u65b9\u6cd5\u3092\u307e\u3068\u3081\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-sgb-headings sgb-heading\" id=\"i-0\"><span class=\"sgb-heading__inner sgb-heading--type3\" style=\"background-color:#fff9e5;border-color:#90d581;font-size:1.2em\"><span class=\"sgb-heading__text\" style=\"color:#333\">\u30b5\u30f3\u30d7\u30eb\u52d5\u753b<\/span><\/span><\/h2>\n\n\n\n<div class=\"wp-block-sgb-box sng-box box24\"><div id=\"sgb-list-id-1\">\n<div class=\"wp-block-sgb-list\"><div class=\"li-chevron\"><ul style=\"color:#333\"><li>\u8272\u3092\u9078\u629e\u3059\u308b\u305f\u3073\u306b\u3001\uff11\uff09\u9078\u629e\u3057\u305f\u8272\u3092\u8868\u793a\u3001\uff12\uff09\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u3092\u8868\u793a<\/li><li>\u8272\u306e\u9078\u629e\u304c\u7d42\u308f\u3063\u305f\u3089\u3001\u201d\u8272\u3092\u9078\u629e\u3057\u307e\u3057\u305f\u201d\u3068\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u8868\u793a<\/li><\/ul><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-sgb-box sng-box box2\">\n<figure class=\"wp-block-video\"><video height=\"388\" style=\"aspect-ratio: 712 \/ 388;\" width=\"712\" controls src=\"http:\/\/160.251.208.217\/wp-content\/uploads\/2022\/04\/color-picker1.mp4\"><\/video><\/figure>\n<\/div>\n\n\n\n<h2 class=\"wp-block-sgb-headings sgb-heading\" id=\"i-1\"><span class=\"sgb-heading__inner sgb-heading--type3\" style=\"background-color:#fff9e5;border-color:#90d581;font-size:1.2em\"><span class=\"sgb-heading__text\" style=\"color:#333\">\u8272\u306e\u9078\u629e<\/span><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>input\u30bf\u30b0<\/strong>\u306b<strong>type=\u201dcolor\u201d<\/strong>\u3092\u8a2d\u5b9a\u3059\u308b\u3068\u8272\u306e\u9078\u629e\u304c\u3067\u304d\u308b\u30d5\u30a9\u30fc\u30e0\u3092\u8a2d\u7f6e\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image is-style-sango-with-border\"><img loading=\"lazy\" decoding=\"async\" width=\"285\" height=\"332\" src=\"http:\/\/160.251.208.217\/wp-content\/uploads\/2022\/04\/color-picker.png\" alt=\"\" class=\"wp-image-887\" srcset=\"https:\/\/it-dxblog.com\/blog\/wp-content\/uploads\/2022\/04\/color-picker.png 285w, https:\/\/it-dxblog.com\/blog\/wp-content\/uploads\/2022\/04\/color-picker-258x300.png 258w\" sizes=\"auto, (max-width: 285px) 100vw, 285px\"><\/figure>\n\n\n\n<div class=\"wp-block-sgb-codebox pre_tag\"><span><i class=\"fa fa-code\"><\/i>HTML<\/span><pre><code>&lt;input type=\"color\"&gt;<\/code><\/pre><\/div>\n\n\n<div id=\"sgb-list-id-2\">\n<div class=\"wp-block-sgb-list\"><div class=\"li-check\"><ul style=\"background-color:#FFF;border-color:#FFF;color:#333\"><li><strong>value\u5c5e\u6027<\/strong>\u3067<strong>\u521d\u671f\u5024<\/strong>\u3092\u6307\u5b9a\u3067\u304d\u307e\u3059\uff08&lt;input type=\u201dcolor\u201d <strong>value=\u201d#ff0000\u2033<\/strong>&gt;\uff09<\/li><li>value\u5c5e\u6027\u3092\u6307\u5b9a\u3057\u306a\u3044\u3068\u3001<strong>\u521d\u671f\u5024\u306f#000000<\/strong>\uff08\u9ed2\uff09\u306b\u306a\u308a\u307e\u3059<\/li><\/ul><\/div><\/div>\n<\/div>\n\n\n<h2 class=\"wp-block-sgb-headings sgb-heading\" id=\"i-2\"><span class=\"sgb-heading__inner sgb-heading--type3\" style=\"background-color:#fff9e5;border-color:#90d581;font-size:1.2em\"><span class=\"sgb-heading__text\" style=\"color:#333\">JavaScript\u3067\u8272\u306e\u53d6\u5f97<\/span><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>JavaScript<\/strong>\u3067<strong>value<\/strong>\u3092\u6307\u5b9a\u3059\u308b\u3068\u3001\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u3092\u53d6\u5f97\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-sgb-codebox pre_tag\"><span><i class=\"fa fa-code\"><\/i>JavaScript<\/span><pre><code>let value = \u8981\u7d20.value;<\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u3061\u306a\u307f\u306b\u3001<strong><span class=\"keiko_red\">\u8d64\u67a0\u5185<\/span><\/strong>\u3092\u64cd\u4f5c\u3057\u3066\u3044\u308b\u3068\u304d\u306f\u3001<strong><span class=\"keiko_red\">input\u30a4\u30d9\u30f3\u30c8<\/span><\/strong>\u304c\u767a\u751f\u3057\u307e\u3059\u3002<br><span class=\"keiko_blue\"><strong>\u8d64\u67a0\u306e\u5916<\/strong><\/span>\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068<span class=\"keiko_blue\"><strong>change\u30a4\u30d9\u30f3\u30c8<\/strong><\/span>\u304c\u767a\u751f\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-sango-with-border\"><img loading=\"lazy\" decoding=\"async\" width=\"276\" height=\"320\" src=\"http:\/\/160.251.208.217\/wp-content\/uploads\/2022\/04\/image.png\" alt=\"\" class=\"wp-image-889\" srcset=\"https:\/\/it-dxblog.com\/blog\/wp-content\/uploads\/2022\/04\/image.png 276w, https:\/\/it-dxblog.com\/blog\/wp-content\/uploads\/2022\/04\/image-259x300.png 259w\" sizes=\"auto, (max-width: 276px) 100vw, 276px\"><\/figure>\n\n\n\n<h2 class=\"wp-block-sgb-headings sgb-heading\" id=\"i-3\"><span class=\"sgb-heading__inner sgb-heading--type3\" style=\"background-color:#fff9e5;border-color:#90d581;font-size:1.2em\"><span class=\"sgb-heading__text\" style=\"color:#333\">\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9<\/span><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u30b5\u30f3\u30d7\u30eb\u52d5\u753b\u306e\u30b3\u30fc\u30c9\u3067\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;!DOCTYPE html&gt;\n\n&lt;html&gt;\n    &lt;head&gt;\n        &lt;meta charset=\"utf-8\"&gt;\n    &lt;\/head&gt;\n    &lt;style&gt;\n        \/* \u8272\u3092\u8868\u793a\u3059\u308b\u30bf\u30b0\u7528 *\/\n        #show_color{\n            width: 100%;\n            height: 50px;\n            border: 1px solid silver;\n            text-align: center;\n            line-height: 50px;\n            margin-bottom: 10px;\n        }\n    &lt;\/style&gt;\n    &lt;body&gt;\n\n        &lt;!-- \u8272\u3092\u8868\u793a\u3059\u308b\u30bf\u30b0 --&gt;\n        &lt;div id=\"show_color\"&gt;\n        &lt;\/div&gt;\n\n        \u8272\u3092\u9078\u629e\uff1a&lt;input type=\"color\" id=\"select_color\"&gt;\n\n        &lt;script&gt;\n            \/\/ \u8272\u3092\u9078\u629e\u3059\u308b\u305f\u3073\u306b\u3001\u8272\u3092\u8868\u793a\u3059\u308b\u30a4\u30d9\u30f3\u30c8\u3092\u767b\u9332\uff08change\u30a4\u30d9\u30f3\u30c8\uff09\n            document.getElementById(\"select_color\").addEventListener(\"input\", showColor);\n\n            \/\/ \u8272\u306e\u9078\u629e\u304c\u78ba\u5b9a\u3057\u305f\u5f8c\u306b\u3001\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u8868\u793a\u3059\u308b\u51e6\u7406\u3092\u767b\u9332\uff08change\u30a4\u30d9\u30f3\u30c8\uff09\n            document.getElementById(\"select_color\").addEventListener(\"change\", function(){alert(\"\u8272\u3092\u9078\u629e\u3057\u307e\u3057\u305f\");});\n\n            \/\/ \u8272\u3092\u8868\u793a\u3059\u308b\u30bf\u30b0\u3092\u5909\u6570\u306b\u5165\u308c\u308b\n            const eleShowColor = document.getElementById(\"show_color\");\n\n            \/\/ \u9078\u629e\u3057\u305f\u8272\u3068\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u3092\u8868\u793a\u3059\u308b\n            function showColor(){\n\n                \/\/ \u9078\u629e\u3057\u305f\u8272\u3092\u53d6\u5f97\n                let color = document.getElementById(\"select_color\").value;\n\n                \/\/ \u9078\u629e\u3057\u305f\u8272\u3092\u8a2d\u5b9a\n                eleShowColor.style.backgroundColor = color;\n\n                \/\/ \u9078\u629e\u3057\u305f\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u3092\u8868\u793a\n                eleShowColor.innerText = color;\n            }\n        &lt;\/script&gt;\n    &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>input\u30bf\u30b0\u3092\u4f7f\u3063\u3066\u8272\u3092\u9078\u629e\u3059\u308b\u65b9\u6cd5\u3092\u307e\u3068\u3081\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002 input\u30bf\u30b0\u306btype=\u201dcolor\u201d\u3092\u8a2d\u5b9a\u3059\u308b\u3068\u8272\u306e\u9078\u629e\u304c\u3067\u304d\u308b\u30d5\u30a9\u30fc\u30e0\u3092\u8a2d\u7f6e\u3067\u304d\u307e\u3059\u3002 JavaScript\u3067value\u3092\u6307\u5b9a\u3059\u308b\u3068\u3001\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u3092\u53d6 &#8230; <\/p>\n","protected":false},"author":1,"featured_media":2088,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[8],"tags":[],"class_list":["post-855","post","type-post","status-publish","format-standard","has-post-thumbnail","category-javascript","entry"],"_links":{"self":[{"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/posts\/855","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/comments?post=855"}],"version-history":[{"count":4,"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/posts\/855\/revisions"}],"predecessor-version":[{"id":890,"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/posts\/855\/revisions\/890"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/media\/2088"}],"wp:attachment":[{"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/media?parent=855"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/categories?post=855"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/it-dxblog.com\/blog\/wp-json\/wp\/v2\/tags?post=855"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}