{"id":12223,"date":"2026-05-27T14:08:14","date_gmt":"2026-05-27T05:08:14","guid":{"rendered":"https:\/\/code-plus.jp\/gp\/?page_id=12223"},"modified":"2026-05-27T21:58:28","modified_gmt":"2026-05-27T12:58:28","slug":"colorpalette-generator","status":"publish","type":"page","link":"https:\/\/code-plus.jp\/gp\/tools\/colorpalette-generator\/","title":{"rendered":"colorpalette-generator"},"content":{"rendered":"<!-- \u25bc.page -->\r\n\r\n<!-- .mezzala\uff08\u4f59\u767d\u8abf\u6574\uff1apage\u4e0a\uff09 -->\r\n<hr class=\"adj-cnvtVkaA-mezzalaA\" \/>\r\n\r\n<hr id=\"ch-TextConverter\" anchor \/>\r\n<div class=\"pg-saracnvtvkaa\">\r\n\r\n  <header class=\"page-header mx-auto\">\r\n    <!-- \u30d1\u30f3\u304f\u305a\u30ea\u30b9\u30c8 --><div><!-- breadcrumb.php -->\n<style>\n\/* .breadcrumb.leckermaul\uff08\u30d1\u30f3\u304f\u305a\u30ea\u30b9\u30c8\uff09\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.zaratan .breadcrumb.leckermaul {\n\twidth: 100%;\n\tmax-width: 92.5vw;\n\tmargin-inline: auto;\n}\n\n.zaratan .breadcrumb.leckermaul :is(ul, ol) {\n\tmin-height: 3rem;\n\tline-height: initial;\n\tfont-size: 0;\n\tletter-spacing: 0;\n\toverflow: hidden;\n}\n\n.zaratan .breadcrumb.leckermaul li {\n\tdisplay: inline;\n\tline-height: 1.55;\n\tfont-size: clamp(0.775rem, calc(0.775rem + ((1vw - 0.225rem) * 0.1563)), 0.8750rem);\n}\n\n.zaratan .breadcrumb.leckermaul li>*,\n.zaratan .breadcrumb.leckermaul li::before {\n\tposition: relative;\n\ttop: 0.125em;\n\tdisplay: inline-flex;\n\talign-items: center;\n}\n\n.zaratan .breadcrumb.leckermaul a {\n\tdisplay: inline;\n\tcolor: var(--c-text-300, hsl(233, 6%, 74%));\n\tmargin-right: .5em;\n}\n\n.zaratan .breadcrumb.leckermaul li:nth-of-type(n+2) a {\n\tmargin-left: .5em;\n}\n\n.zaratan .breadcrumb.leckermaul .current_page_item a {\n\tpointer-events: none;\n\tcolor: var(--c-text-300, hsl(233, 6%, 74%));\n}\n\n@media (any-hover:hover) {\n\t.zaratan .breadcrumb.leckermaul a:hover {\n\t\tcolor: var(--c-text-300, hsl(233, 6%, 74%));\n\t}\n}\n\n\/* .separator *\/\n.zaratan .breadcrumb.leckermaul li:nth-of-type(n+2)::before,\n.zaratan .breadcrumb.leckermaul.chevron-right li:nth-of-type(n+2)::before {\n\tcontent: \">\";\n\tcolor: var(--c-text-300, hsl(233, 6%, 74%))\n}\n\n.zaratan .breadcrumb.leckermaul.slash li:nth-of-type(n+2)::before {\n\tcontent: \"\/\";\n}\n\n.zaratan .breadcrumb.leckermaul.trigon-bullet li:nth-of-type(n+2)::before {\n\tcontent: \"\u2023\";\n}\n<\/style>\n\n\n<nav class=\"breadcrumb leckermaul mx-auto py-0.5r\">\n  <ul class=\"breadcrumb-wrapper\">\n    <!-- \u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u3078\u306e\u30ea\u30f3\u30af\u3092\u8868\u793a -->\n    <li><a href=\"https:\/\/code-plus.jp\/gp\/\"><i><\/i>\u30c8\u30c3\u30d7<\/a><\/li>\n\n          <!-- \u56fa\u5b9a\u30da\u30fc\u30b8\uff08\u305d\u308c\u4ee5\u5916\uff09\uff1a \u5148\u7956\u30da\u30fc\u30b8\u540d\u3068\u3001\u73fe\u5728\u306e\u30da\u30fc\u30b8\u540d\u3092\u8868\u793a -->\n      <li><a href=\"https:\/\/code-plus.jp\/gp\/tools\/\">TOOLS\uff08\u30c4\u30fc\u30eb\u4e00\u89a7\uff09<\/a><\/li><li class=\"current_page_item\"><a>\u30c4\u30fc\u30eb<\/a><\/li>    <!-- \/\/\/if (is_page()) -->\n\n  <\/ul>\n<\/nav><\/div>\r\n  <\/header><!-- \/\/\/.inheader -->\r\n\r\n  <!-- .section -->\r\n  <section class=\"sect-cnvtVkaA-Intro contvis-auto\" style=\"contain-intrinsic-size:800px;\">\r\n    <header class=\"section__inheader innerA mx-auto scroll-fadeIn\">\r\n      <div class=\"hgroup-wrapper d-iblock mb-0.5r\">\r\n        <h1 class=\"fz-xxl hdg-page mb-0.25pc\"><span>colorpalette-generator<\/span><\/h1>\r\n        <p class=\"page-foreword fz-ss\">\r\n          \u30e1\u30a4\u30f3\u30ab\u30e9\u30fc\u3092\u5165\u529b\u3059\u308b\u3060\u3051\u3067\u3001Munsell\u8272\u5f69\u7406\u8ad6\u30d9\u30fc\u30b9\u3067\u8abf\u548c\u306e\u53d6\u308c\u305f4\u8272\u30d1\u30ec\u30c3\u30c8\uff08\u30da\u30fc\u30eb\u30fb\u30d7\u30e9\u30a4\u30de\u30ea\u30fc\u30fb\u30c7\u30a3\u30fc\u30d7\u30fb\u30a2\u30af\u30bb\u30f3\u30c8\u30ab\u30e9\u30fc\uff09\u3092\u81ea\u52d5\u751f\u6210\u3002\u5404\u8272\u306eWCAG AA\/AAA\u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u6bd4\u3092\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u8868\u793a\u3057\u307e\u3059\u3002\r\n        <\/p>\r\n      <\/div><!-- \/\/\/.hgroup -->\r\n\r\n      <a class=\"fl-right badge is-outlined is-gray fz-xs bdrs-0.25r\" href=\"#ch-Explanation\">\r\n        <i class=\"icon mas ma-help\"><\/i>&nbsp;<span>\u4f7f\u3044\u65b9<\/span>\r\n      <\/a>\r\n    <\/header><!-- \/\/\/.inheader -->\r\n  <\/section>\r\n\r\n\r\n  <!-- .section -->\r\n  <hr id=\"ch-Converter\" anchor \/>\r\n  <section class=\"sect-cnvtVkaA-Converter contvis-auto\" style=\"contain-intrinsic-size:800px;\">\r\n    <div class=\"section__interior innerA fxd-row mx-auto\">\r\n      <figure class=\"section__leftlane\">\r\n        <div class=\"hgroup-wrapper\">\r\n          <h3 class=\"fz-rg hdg-section mb-0.25pc\"><span>\u25bc\u30e1\u30a4\u30f3\u30ab\u30e9\u30fc\u3092\u5165\u529b<\/span><\/h3>\r\n        <\/div><!-- \/\/\/.hgroup -->\r\n\r\n        <!-- Primary\u5165\u529b -->\r\n        <div class=\"colgroup w-full\">\r\n          <label class=\"label is-outlined fz-sm\" style=\"display:flex; align-items:center; gap:0.5rem;\">\r\n            <p class=\"fz-sm\" style=\"margin:0;white-space:nowrap;\">HEX\u30b3\u30fc\u30c9\uff1a<\/p>\r\n            <input type=\"text\" id=\"primaryColorHex\" class=\"input\" value=\"#2A417E\" style=\"font-family:monospace; text-transform:uppercase;width:8em;\">\r\n            <input type=\"color\" id=\"primaryColorPicker\" value=\"#2A417E\" style=\"width:2.5em;height:2em;border:1px solid #ddd;border-radius:4px;cursor:pointer;padding:2px;\">\r\n          <\/label>\r\n        <\/div><!-- \/\/\/.colgroup -->\r\n\r\n        <p class=\"ta-center mt-0.5r\">\r\n          <a id=\"generateBtn\" class=\"button is-solided is-primary\" href=\"javascript:void(0);\">\u30d1\u30ec\u30c3\u30c8\u3092\u751f\u6210<\/a>\r\n          <a id=\"resetBtn\" class=\"button is-outlined is-gray\" href=\"javascript:void(0);\" style=\"margin-left:0.5rem;\">\u30ea\u30bb\u30c3\u30c8<\/a>\r\n        <\/p>\r\n\r\n        <!-- \u751f\u6210\u7d50\u679c\uff084\u8272\u30d1\u30ec\u30c3\u30c8\uff09 -->\r\n        <div id=\"paletteResult\" class=\"colgroup w-full mt-1r\" style=\"display:none;\">\r\n          <h4 class=\"title is-outlined fz-sm\">\u751f\u6210\u30d1\u30ec\u30c3\u30c8\uff08\u30b9\u30e9\u30a4\u30c0\u30fc\u3067\u5fae\u8abf\u6574\u53ef\u80fd\uff09<\/h4>\r\n          <div id=\"paletteList\" class=\"box is-outlined\"><\/div>\r\n        <\/div><!-- \/\/\/.colgroup -->\r\n      <\/figure><!-- \/\/\/.leftlane -->\r\n\r\n      <figure class=\"section__centerlane\">\r\n        <aside class=\"sticky-sidebar fxd-column pc-center\" style=\"height:22rem;\">\r\n        <\/aside>\r\n      <\/figure><!-- \/\/\/.centerlane -->\r\n\r\n\r\n      <figure class=\"section__rightlane\">\r\n        <div class=\"chest-wrapper relatived\">\r\n          <h3 class=\"fz-rg hdg-section mb-0.25pc\"><span>\u25bc\u30b5\u30f3\u30d7\u30ebUI\u30d7\u30ec\u30d3\u30e5\u30fc<\/span><\/h3>\r\n          <div id=\"previewArea\" style=\"overflow:hidden;background:#fff;border:3px solid #222;border-radius:16px;padding:0;box-shadow:0 6px 24px rgba(0,0,0,0.08);\">\r\n            <div id=\"previewPlaceholder\" style=\"height:24pc;display:flex; align-items:center; justify-content:center;color:var(--color-text-muted,#aaa);font-size:14px;\">\r\n              \u300c\u30d1\u30ec\u30c3\u30c8\u3092\u751f\u6210\u300d\u3092\u62bc\u3059\u3068\u30d7\u30ec\u30d3\u30e5\u30fc\u304c\u8868\u793a\u3055\u308c\u307e\u3059\r\n            <\/div>\r\n            <div id=\"previewCanvas\" style=\"display:none;\"><\/div>\r\n          <\/div>\r\n        <\/div><!-- \/\/\/.chest -->\r\n\r\n        <!-- \u30a8\u30af\u30b9\u30dd\u30fc\u30c8 -->\r\n        <div id=\"exportControls\" style=\"display:none;\" class=\"colgroup w-full mt-1r\">\r\n          <p class=\"ta-center\">\r\n            <a id=\"copyCssBtn\" class=\"button is-outlined is-primary\" href=\"javascript:void(0);\">CSS\u5909\u6570\u3092\u30b3\u30d4\u30fc<\/a>\r\n            <a id=\"copyJsonBtn\" class=\"button is-outlined is-primary\" href=\"javascript:void(0);\" style=\"margin-left:0.5rem;\">JSON\u3067\u30b3\u30d4\u30fc<\/a>\r\n          <\/p>\r\n          <ins id=\"copyMessage\"><\/ins>\r\n        <\/div>\r\n      <\/figure><!-- \/\/\/.rightlane -->\r\n    <\/div><!-- \/\/\/.interior.fxd-row -->\r\n  <\/section>\r\n\r\n\r\n  <!-- .section -->\r\n  <hr id=\"ch-Explanation\" anchor \/>\r\n  <section class=\"sect-cnvtVkaA-Explanation pt-3r contvis-auto\" style=\"contain-intrinsic-size:800px;\">\r\n    <div class=\"section__interior innerA mx-auto scroll-fadeIn\">\r\n      <div class=\"box is-broad is-solided c-text\">\r\n        <h4 class=\"hdg-explanation fz-md mb-0.25pc\">\u4f7f\u3044\u65b9<\/h4>\r\n        <p class=\"fz-ss mb-1r\">\r\n          Primary\u3092HEX\u30b3\u30fc\u30c9\u307e\u305f\u306f\u30ab\u30e9\u30fc\u30d4\u30c3\u30ab\u30fc\u3067\u6307\u5b9a\u3057\u3001\u300c\u30d1\u30ec\u30c3\u30c8\u3092\u751f\u6210\u300d\u3092\u62bc\u3059\u3068\u3001Munsell\u8272\u5f69\u7406\u8ad6\u306b\u57fa\u3065\u3044\u305f\u8abf\u548c\u306e\u53d6\u308c\u305f4\u8272\u30d1\u30ec\u30c3\u30c8\u304c\u751f\u6210\u3055\u308c\u307e\u3059\u3002\u53f3\u30d1\u30cd\u30eb\u306b\u5404\u8272\u3092\u9069\u7528\u3057\u305f\u30b5\u30f3\u30d7\u30ebUI\u304c\u8868\u793a\u3055\u308c\u3001WCAG\u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u6bd4\u306ePass\/Fail\u3092\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002\r\n        <\/p>\r\n\r\n        <h5 class=\"fz-ss hdg-explanation mb-0.25pc mt-1r\">\ud83c\udfa8 \u751f\u6210\u3055\u308c\u308b4\u8272<\/h5>\r\n        <ul class=\"fz-ss mb-1r\">\r\n          <li><b class=\"bold\">Palish\uff1a<\/b> Primary\u3088\u308a\u660e\u308b\u3081\u30fb\u5f69\u5ea6\u4f4e\u3081\u3002\u80cc\u666f\u3084\u8584\u3044\u88c5\u98fe\u306b<\/li>\r\n          <li><b class=\"bold\">Primary\uff1a<\/b> \u5165\u529b\u3057\u305f\u57fa\u6e96\u8272\u3002\u4e3b\u8981\u8981\u7d20\u306e\u5857\u308a\u306b<\/li>\r\n          <li><b class=\"bold\">Deepish\uff1a<\/b> Primary\u3088\u308a\u6697\u3081\u30fb\u5f69\u5ea6\u9ad8\u3081\u3002\u898b\u51fa\u3057\u3084\u5f37\u8abf\u306b<\/li>\r\n          <li><b class=\"bold\">Accent\uff1a<\/b> \u88dc\u8272\uff08\u8272\u76f8+180\u00b0\uff09\u3002CTA\u3084\u30de\u30fc\u30ab\u30fc\u306b<\/li>\r\n        <\/ul>\r\n\r\n        <h5 class=\"fz-ss hdg-explanation mb-0.25pc\">\ud83c\udf9b\ufe0f \u5fae\u8abf\u6574\u30b9\u30e9\u30a4\u30c0\u30fc<\/h5>\r\n        <ul class=\"fz-ss mb-1r\">\r\n          <li><b class=\"bold\">Hue\uff08\u8272\u76f8\uff09\uff1a<\/b> 0\u301c360\u00b0\u3067\u8272\u76f8\u3092\u8abf\u6574<\/li>\r\n          <li><b class=\"bold\">Saturation\uff08\u5f69\u5ea6\uff09\uff1a<\/b> 0\u301c100%\u3067\u9bae\u3084\u304b\u3055\u3092\u8abf\u6574<\/li>\r\n          <li><b class=\"bold\">Lightness\uff08\u660e\u5ea6\uff09\uff1a<\/b> 0\u301c100%\u3067\u660e\u308b\u3055\u3092\u8abf\u6574<\/li>\r\n        <\/ul>\r\n\r\n        <h5 class=\"fz-ss hdg-explanation mb-0.25pc\">\ud83d\udcd0 \u914d\u8272\u30ed\u30b8\u30c3\u30af<\/h5>\r\n        <ul class=\"fz-ss mb-1r\">\r\n          <li><b class=\"bold\">Munsell\u7406\u8ad6\uff1a<\/b> \u300c\u6697\u3044\u8272\u306f\u5f69\u5ea6\u9ad8\u304f\u3001\u660e\u308b\u3044\u8272\u306f\u5f69\u5ea6\u4f4e\u304f\u300d\u306e\u53cd\u6bd4\u4f8b\u30ab\u30fc\u30d6\u3002\u8272\u7acb\u4f53\u306f\u5747\u7b49\u306a\u7403\u5f62\u3067\u306f\u306a\u304f\u3001\u81ea\u7136\u306a\u914d\u8272\u306f\u5f69\u5ea6\u3068\u660e\u5ea6\u304c\u9023\u52d5\u3057\u307e\u3059<\/li>\r\n          <li><b class=\"bold\">\u88dc\u8272\uff1a<\/b> Hue\u3092+180\u00b0\u30b7\u30d5\u30c8\u3057\u3066Accent\u30ab\u30e9\u30fc\u3092\u751f\u6210<\/li>\r\n          <li><b class=\"bold\">WCAG\uff1a<\/b> \u76f8\u5bfe\u8f1d\u5ea6\u30d9\u30fc\u30b9\u306e\u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u6bd4\u3092\u8a08\u7b97\u3002AA\uff084.5\u4ee5\u4e0a\uff09\/ AAA\uff087\u4ee5\u4e0a\uff09\u306e\u5224\u5b9a\u3092\u8868\u793a<\/li>\r\n        <\/ul>\r\n\r\n        <h5 class=\"fz-ss hdg-explanation mb-0.25pc\">\ud83c\udfaf \u6d3b\u7528\u4f8b<\/h5>\r\n        <ul class=\"fz-ss mb-1r\">\r\n          <li><b class=\"bold\">Web\u30b5\u30a4\u30c8\u306e\u914d\u8272\u6c7a\u5b9a\uff1a<\/b> \u30d6\u30e9\u30f3\u30c9\u30ab\u30e9\u30fc\u3092\u5165\u308c\u3066\u3001\u8abf\u548c\u306e\u3068\u308c\u305f\u30d1\u30ec\u30c3\u30c8\u3092\u5373\u6642\u751f\u6210<\/li>\r\n          <li><b class=\"bold\">\u30b0\u30e9\u30d5\u30fb\u30c1\u30e3\u30fc\u30c8\u306e\u8272\u9078\u3073\uff1a<\/b> \u4e0d\u52d5\u7523\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\u7b49\u3067\u3001\u9752\u3044\u30b0\u30e9\u30d5\u306b\u5bfe\u3059\u308b\u76ee\u7acb\u3064\u30de\u30fc\u30ab\u30fc\u8272\u3092\u63d0\u6848<\/li>\r\n          <li><b class=\"bold\">\u30a2\u30af\u30bb\u30b7\u30d3\u30ea\u30c6\u30a3\u30c1\u30a7\u30c3\u30af\uff1a<\/b> \u914d\u8272\u3092\u6c7a\u3081\u306a\u304c\u3089\u540c\u6642\u306bWCAG\u5408\u683c\u5224\u5b9a\u3092\u78ba\u8a8d<\/li>\r\n        <\/ul>\r\n\r\n        <h5 class=\"fz-ss hdg-explanation mb-0.25pc\">\u26a0\ufe0f \u6ce8\u610f\u4e8b\u9805<\/h5>\r\n        <ul class=\"fz-ss\">\r\n          <li><b class=\"bold\">\u30d6\u30e9\u30a6\u30b6\u51e6\u7406\uff1a<\/b> \u3059\u3079\u3066\u306e\u51e6\u7406\u306f\u30d6\u30e9\u30a6\u30b6\u5185\u3067\u5b8c\u7d50\u3057\u307e\u3059\uff08\u30b5\u30fc\u30d0\u30fc\u9001\u4fe1\u306a\u3057\uff09<\/li>\r\n          <li><b class=\"bold\">HSL\u57fa\u6e96\uff1a<\/b> \u7c21\u6613\u5b9f\u88c5\u306e\u305f\u3081HSL\u8272\u7a7a\u9593\u30d9\u30fc\u30b9\u3067\u3059\u3002OKLCH\u3084HCT\u306e\u3088\u3046\u306a\u77e5\u899a\u5747\u7b49\u8272\u7a7a\u9593\u3067\u306f\u3042\u308a\u307e\u305b\u3093<\/li>\r\n          <li><b class=\"bold\">\u88dc\u8272\u306e\u307f\u5bfe\u5fdc\uff1a<\/b> \u5206\u5272\u88dc\u8272\u30fb\u4e09\u8272\u914d\u8272\u30fb\u985e\u4f3c\u8272\u306f\u4eca\u5f8c\u306e\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u3067\u5bfe\u5fdc\u4e88\u5b9a<\/li>\r\n        <\/ul>\r\n      <\/div>\r\n    <\/div><!-- \/\/\/.interior -->\r\n  <\/section><!-- \/\/\/.section -->\r\n\r\n\r\n  <!-- .section -->\r\n  <hr id=\"ch-Relation\" anchor \/>\r\n  <section class=\"sect-cnvtVkaA-Relation pt-3r contvis-auto\" style=\"contain-intrinsic-size:800px;\">\r\n    <div class=\"section__interior innerA mx-auto scroll-fadeIn\">\r\n      <div class=\"hgroup-wrapper hgroupA mb-0.5pc\">\r\n        <h5 class=\"hdg-relation fz-rg\"><span>\u95a2\u9023\u30c4\u30fc\u30eb<\/span><\/h5>\r\n      <\/div><!-- \/\/\/.hgroup -->\r\n\r\n      <ul class=\"shelf-wrapper_pc shelfA\" data-cols_pc=\"2\">\r\n        <li class=\"slide\">\r\n          <a href=\"https:\/\/code-plus.jp\/gp\/tools\/colorcode-converter\/\" class=\"linkbox\">\r\n            <h4 class=\"linkbox-title fz-md\">\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u5909\u63db\u30c4\u30fc\u30eb<\/h4>\r\n            <span class=\"linkbox-excerpt\">RGB \/ RGBA \/ HSL \u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u3092HEX\u306b\u4e00\u62ec\u5909\u63db\u3002<\/span>\r\n          <\/a>\r\n        <\/li>\r\n        <li class=\"slide\">\r\n          <a href=\"https:\/\/code-plus.jp\/gp\/tools\/imagetone-converter\/\" class=\"linkbox\">\r\n            <h4 class=\"linkbox-title fz-md\">\u753b\u50cf\u30c8\u30fc\u30f3\u88dc\u6b63\u30c4\u30fc\u30eb<\/h4>\r\n            <span class=\"linkbox-excerpt\">\u660e\u5ea6\u30fb\u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u30fb\u8272\u8abf\u30fb\u5f69\u5ea6\u306e\u8abf\u6574\u3068\u81ea\u52d5\u30c8\u30fc\u30f3\u88dc\u6b63\u3002<\/span>\r\n          <\/a>\r\n        <\/li>\r\n      <\/ul><!-- \/\/\/.shelf -->\r\n    <\/div><!-- \/\/\/.interior -->\r\n  <\/section><!-- \/\/\/.section -->\r\n\r\n\r\n  <!-- .department -->\r\n  <hr id=\"ch-Relation2\" anchor \/>\r\n  <section class=\"sect-cnvtVkaA-Relation2 pt-3r contvis-auto\" style=\"contain-intrinsic-size:800px;\">\r\n    <div class=\"section__interior innerA mx-auto scroll-fadeIn\">\r\n      <div class=\"hgroup-wrapper hgroupA mb-0.5pc\">\r\n        <h5 class=\"hdg-relation fz-rg\"><span>\u30c4\u30fc\u30eb\u4e00\u89a7<\/span><\/h5>\r\n      <\/div><!-- \/\/\/.hgroup -->\r\n\r\n      <div class=\"pt-cv-wrapper\"><div class=\"pt-cv-view pt-cv-grid pt-cv-colsys\" id=\"pt-cv-view-2f67d27xgo\"><div data-id=\"pt-cv-page-1\" class=\"pt-cv-page\" data-cvc=\"3\"><div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"5957\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/markdown-converter\/\" class=\"_self\" target=\"_self\" >Markdown\u8a18\u6cd5\u21c4HTML \u30aa\u30f3\u30e9\u30a4\u30f3\u5909\u63db\u30c4\u30fc\u30eb | \u53cc\u65b9\u5411\u5909\u63db\u30b5\u30a4\u30c8<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"12124\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/en\/markdown-converter\/\" class=\"_self\" target=\"_self\" >Markdown \u21c4 HTML Online Converter | Bidirectional Conversion Tool<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"12223\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/colorpalette-generator\/\" class=\"_self\" target=\"_self\" >colorpalette-generator<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"12542\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/imageupscale-converter\/\" class=\"_self\" target=\"_self\" >\u753b\u50cfLanczos\u62e1\u5927\u30c4\u30fc\u30eb | AI\u3092\u4f7f\u308f\u305a Lanczos\u3067\u62e1\u5927\u3057\u3001\u30a8\u30c3\u30b8\u3092\u7de0\u3081\u3066\u304f\u3063\u304d\u308a\u4ed5\u4e0a\u3052\u307e\u3059<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"12198\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/imagetone-converter\/\" class=\"_self\" target=\"_self\" >\u753b\u50cf\u30c8\u30fc\u30f3\u88dc\u6b63\u30c4\u30fc\u30eb | \u660e\u5ea6\u30fb\u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u30fb\u8272\u8abf\u30fb\u5f69\u5ea6\u3092\u4e00\u62ec\u8abf\u6574<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"12171\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/imageext-converter\/\" class=\"_self\" target=\"_self\" >\u753b\u50cf\u5f62\u5f0f\u5909\u63db\u30c4\u30fc\u30eb | JPG \/ PNG \/ WebP \/ SVG \u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u3001\u6307\u5b9a\u3057\u305f\u5f62\u5f0f\u306b\u4e00\u62ec\u5909\u63db<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"11549\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/responsive-clamp-calculator\/\" class=\"_self\" target=\"_self\" >\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u306a\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc - \u8907\u6570\u30d7\u30ed\u30d1\u30c6\u30a3\/\u30b9\u30de\u30db\u306e\u65b9\u304c\u6587\u5b57\u30b5\u30a4\u30ba\u304c\u5927\u304d\u3044\u5834\u5408\u306b\u3082\u5bfe\u5fdc<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"11746\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/specificity-calculator\/\" class=\"_self\" target=\"_self\" >CSS\u30bb\u30ec\u30af\u30bf \u8a73\u7d30\u5ea6\u8a08\u7b97\u30c4\u30fc\u30eb<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"11509\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/textchar-encoder\/\" class=\"_self\" target=\"_self\" >\u6587\u5b57\u30b3\u30fc\u30c9\u5909\u63db\u30c4\u30fc\u30eb | Shift_JIS \/ EUC-JP \u306e\u30c6\u30ad\u30b9\u30c8\u30d5\u30a1\u30a4\u30eb\u3092 UTF-8 \u306b\u4e00\u62ec\u5909\u63db<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"10981\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/colorcode-converter\/\" class=\"_self\" target=\"_self\" >\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u4e00\u62ec\u5909\u63db\u30c4\u30fc\u30eb | RGBA, HSL\u21c4HEX\u5909\u63db\u30b5\u30a4\u30c8<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"9062\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/dirtree-generator\/\" class=\"_self\" target=\"_self\" >DirTree Generator\uff08\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u30c4\u30ea\u30fc\u751f\u6210\u30c4\u30fc\u30eb\uff09 -\u30d5\u30a9\u30eb\u30c0\u69cb\u9020\u3092\u8996\u899a\u5316-<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"6032\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/eyecatch-generator\/\" class=\"_self\" target=\"_self\" >\u30bf\u30a4\u30c8\u30eb\u4ed8\u304d\u306e\u30a2\u30a4\u30ad\u30e3\u30c3\u30c1\u753b\u50cf\u751f\u6210\u30c4\u30fc\u30eb | \u30aa\u30f3\u30e9\u30a4\u30f3\u4e0a\u3067\u6587\u5b57\u3092\u753b\u50cf\u306b\u5909\u63db<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"10460\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/markitdown-converter\/\" class=\"_self\" target=\"_self\" >pptx\/docx\/pdf\u2192Markdown \u5909\u63db\u30c4\u30fc\u30eb<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"6384\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/breaks-converter\/\" class=\"_self\" target=\"_self\" >\u6539\u884c\u30fb\u30bf\u30d6\u5909\u63db\u30c4\u30fc\u30eb - &amp;#13;&amp;#10; &lt;br&gt; \\A HTML\u30a8\u30f3\u30c6\u30a3\u30c6\u30a3\u30fbbr\u30bf\u30b0\u4e00\u62ec\u5909\u63db<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"6207\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/text-replacer-rem-calc\/\" class=\"_self\" target=\"_self\" >\u8907\u6570\u30eb\u30fc\u30eb\u304b\u3089\u30c6\u30ad\u30b9\u30c8\u4e00\u62ec\u7f6e\u63db\u30c4\u30fc\u30eb\u3010rem \u2194 calc\u3011<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"10814\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/text-replacer-em-rem\/\" class=\"_self\" target=\"_self\" >\u8907\u6570\u30eb\u30fc\u30eb\u304b\u3089\u30c6\u30ad\u30b9\u30c8\u4e00\u62ec\u7f6e\u63db\u30c4\u30fc\u30eb\u3010em \u2194 rem\u3011<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"6140\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/text-replacer-pc-rem\/\" class=\"_self\" target=\"_self\" >\u8907\u6570\u30eb\u30fc\u30eb\u304b\u3089\u30c6\u30ad\u30b9\u30c8\u4e00\u62ec\u7f6e\u63db\u30c4\u30fc\u30eb\u3010pc \u2194 rem\u3011<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"7055\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/text-replacer-px-em\/\" class=\"_self\" target=\"_self\" >\u8907\u6570\u30eb\u30fc\u30eb\u304b\u3089\u30c6\u30ad\u30b9\u30c8\u4e00\u62ec\u7f6e\u63db\u30c4\u30fc\u30eb\u3010px \u2194 em\u3011<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"6124\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/text-replacer-px-rem\/\" class=\"_self\" target=\"_self\" >\u8907\u6570\u30eb\u30fc\u30eb\u304b\u3089\u30c6\u30ad\u30b9\u30c8\u4e00\u62ec\u7f6e\u63db\u30c4\u30fc\u30eb\u3010px \u2194 rem\u3011<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"10161\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/linebounds-converter\/\" class=\"_self\" target=\"_self\" >\u30d1\u30a4\u30d7\u8a18\u53f7(|)\u968e\u5c64\u30ea\u30b9\u30c8\u3092 \u2192 \u7f6b\u7dda\u56f2\u307f\u306b\u5909\u63db\u30c4\u30fc\u30eb<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"6964\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/table-converter\/\" class=\"_self\" target=\"_self\" >&nbsp;|\uff08\u30d1\u30a4\u30d7\uff09\u3092Table\u30bf\u30b0\u306b\u5909\u63db\u30c4\u30fc\u30eb | Markdown\u8868\u5f62\u5f0f\u2192HTML\u81ea\u52d5\u5909\u63db<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"7062\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/deline-converter\/\" class=\"_self\" target=\"_self\" >&nbsp;|\uff08\u30d1\u30a4\u30d7\uff09\u3092Dl\u30bf\u30b0\u306b\u5909\u63db\u30c4\u30fc\u30eb - \u5b9a\u7fa9\u30ea\u30b9\u30c8\u30fb\u7528\u8a9e\u96c6HTML\u81ea\u52d5\u751f\u6210<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"10028\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/font-metrics-analyzer\/\" class=\"_self\" target=\"_self\" >\u30d5\u30a9\u30f3\u30c8\u30e1\u30c8\u30ea\u30af\u30b9\u89e3\u6790\u30c4\u30fc\u30eb - 2\u3064\u306e\u30d5\u30a9\u30f3\u30c8\u3092\u6bd4\u8f03\u3057\u3066\u3001size-adjust\u306e\u6700\u9069\u5024\u3092\u8a08\u7b97<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"8636\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/imgtag-converter\/\" class=\"_self\" target=\"_self\" >\u753b\u50cf\u2192img\u30bf\u30b0\u5909\u63db\u30c4\u30fc\u30eb | \u753b\u50cf\u30b5\u30a4\u30ba\u30fb\u30a2\u30b9\u30da\u30af\u30c8\u6bd4\u81ea\u52d5\u8a08\u7b97\u30b5\u30a4\u30c8<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"9036\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/svg2gif-converter\/\" class=\"_self\" target=\"_self\" >svg2gif-converter<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"7615\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/charbase36-converter\/\" class=\"_self\" target=\"_self\" >10\u9032\u6570\u3092 26\u9032\u6570\u306b\u3001\u30a8\u30f3\u30b3\u30fc\u30c9 \u2194 \u30c7\u30b3\u30fc\u30c9\u3059\u308b\u30c4\u30fc\u30eb<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"9585\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/list2trees-converter\/\" class=\"_self\" target=\"_self\" >\u30d7\u30e9\u30b9\u8a18\u53f7(+)\u968e\u5c64\u30ea\u30b9\u30c8\u3092 \u2192 \u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u30c4\u30ea\u30fc\u306b\u5909\u63db\u30c4\u30fc\u30eb<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"8005\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/page-8005\/\" class=\"_self\" target=\"_self\" >\u884c\u3092 \u2192 \u6307\u5b9a\u5217\u306e\u30bf\u30d6\u533a\u5207\u308a\u884c\u306b\u5909\u63db\u3059\u308b\u30c4\u30fc\u30eb<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"7816\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/lines-converter\/\" class=\"_self\" target=\"_self\" >\u884c\u3092\u9006\u9806\u306b\u4e26\u3073\u66ff\u3048\u308b\u30c4\u30fc\u30eb<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"7187\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/charurl-converter\/\" class=\"_self\" target=\"_self\" >\u30c6\u30ad\u30b9\u30c8\u3092 URL\u30a8\u30f3\u30b3\u30fc\u30c9\u306b\u3001\u30a8\u30f3\u30b3\u30fc\u30c9 \u2194 \u30c7\u30b3\u30fc\u30c9\u3059\u308b\u30c4\u30fc\u30eb<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"7362\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/updatetags-converter\/\" class=\"_self\" target=\"_self\" >HTML\u30bf\u30b0\u4e00\u62ec\u5909\u63db\u30c4\u30fc\u30eb | \u30aa\u30f3\u30e9\u30a4\u30f3\u4e0a\u3067\u30bf\u30b0\u8a18\u6cd5\u3092\u77ac\u6642\u306b\u5909\u63db<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"7151\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/addclases-converter\/\" class=\"_self\" target=\"_self\" >\u6307\u5b9a\u306e\u30bf\u30b0\u306b \u2192 \u4efb\u610f\u306e\u30af\u30e9\u30b9\u3092\u8ffd\u52a0\u30c4\u30fc\u30eb<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"7178\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/renumber-converter\/\" class=\"_self\" target=\"_self\" >Markdown\u5f62\u5f0f\u306e\u756a\u53f7\u3092\u4e0a\u304b\u3089\u4ed8\u3051\u76f4\u3059\u30c4\u30fc\u30eb<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"7148\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/multiwords-converter\/\" class=\"_self\" target=\"_self\" >JSON\u5f62\u5f0f\u3067\u8907\u6570\u306e\u8a9e\u53e5\u3092\u307e\u3068\u3081\u3066\u5909\u63db\u30c4\u30fc\u30eb<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"7107\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/multiwords-remover\/\" class=\"_self\" target=\"_self\" >JSON\u5f62\u5f0f\u3067\u8907\u6570\u306e\u8a9e\u53e5\u3092\u307e\u3068\u3081\u3066\u524a\u9664\u30c4\u30fc\u30eb<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"7127\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/zenkakumasu-converter\/\" class=\"_self\" target=\"_self\" >\u5168\u89d2\u6587\u5b57\u3092 \u2192 \u303c \u306b\u5909\u63db\u30c4\u30fc\u30eb<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"7079\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/number0-converter\/\" class=\"_self\" target=\"_self\" >\u3059\u3079\u3066\u306e\u6570\u5b57\u3092 \u2192 \u00f8 \u306b\u5909\u63db\u30c4\u30fc\u30eb<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"6766\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/imagemap-converter\/\" class=\"_self\" target=\"_self\" >SVG\u304b\u3089ImageMap\uff08\u30a4\u30e1\u30fc\u30b8\u30de\u30c3\u30d7\uff09\u306b\u5909\u63db\u30c4\u30fc\u30eb<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"6747\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/fullparenthesis-converter\/\" class=\"_self\" target=\"_self\" >\u534a\u89d2\u62ec\u5f27()\u3092\u3001\u5168\u89d2\u62ec\u5f27\uff08\uff09\u306b\u5909\u63db\u30c4\u30fc\u30eb<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"6691\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/tags-remover\/\" class=\"_self\" target=\"_self\" >\u3059\u3079\u3066\u306eHTML\u30bf\u30b0\u3092\u524a\u9664\u30c4\u30fc\u30eb<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"6019\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/ltgt-converter\/\" class=\"_self\" target=\"_self\" >&lt; &gt; \u3092 &amp;lt; &amp;gt; \u306b\u5909\u63db\u30c4\u30fc\u30eb<\/a><\/h5><\/div><\/div>\n<div class=\"col-md-4 col-sm-6 col-xs-12 pt-cv-content-item pt-cv-2-col\"  data-pid=\"170\"><div class='pt-cv-ifield'><h5 class=\"pt-cv-title\"><a href=\"https:\/\/code-plus.jp\/gp\/tools\/deepl-charcounter\/\" class=\"_self\" target=\"_self\" >DeepL\u7ffb\u8a33 &#038; \u6587\u5b57\u6570\u30ab\u30a6\u30f3\u30bf\u30fc<\/a><\/h5><\/div><\/div><\/div><\/div><\/div>\t\t\t<style type=\"text\/css\" id=\"pt-cv-inline-style-2a48420v3p\">#pt-cv-view-2f67d27xgo .pt-cv-title a, #pt-cv-view-2f67d27xgo  .panel-title { font-weight: 600 !important; }\n#pt-cv-view-2f67d27xgo .pt-cv-carousel-caption  { background-color: rgba(51,51,51,.6) !important; }\n#pt-cv-view-2f67d27xgo .pt-cv-specialp { background-color: #CC3333 !important }\n#pt-cv-view-2f67d27xgo .pt-cv-specialp * { color: #fff !important; }\n#pt-cv-view-2f67d27xgo .pt-cv-pficon  { color: #bbb !important; }\n#pt-cv-view-2f67d27xgo .pt-cv-readmore  { color: #ffffff !important; background-color: #00aeef !important; }\n#pt-cv-view-2f67d27xgo .pt-cv-readmore:hover  { color: #ffffff !important; background-color: #00aeef !important; }\n#pt-cv-view-2f67d27xgo  + .pt-cv-pagination-wrapper .pt-cv-more , #pt-cv-view-2f67d27xgo  + .pt-cv-pagination-wrapper .pagination .active a, .pt-cv-pagination[data-sid='2f67d27xgo'] .active a { color: #ffffff !important; background-color: #00aeef !important; }<\/style>\r\n\t\t\t\r\n    <\/div><!-- \/\/\/.interior -->\r\n  <\/section><!-- \/\/\/.section -->\r\n\r\n\r\n  <!-- .mediano\uff08\u4f59\u767d\u8abf\u6574\uff1apage\u4e0b\uff09 -->\r\n  <hr class=\"adj-cnvtVkaA-medianoA\" \/>\r\n\r\n<\/div><!-- \/\/\/\u25b2.page  -->\r\n\r\n\r\n<script>\r\n  \/\/ ====================================\r\n  \/\/ \u72b6\u614b\u7ba1\u7406\r\n  \/\/ ====================================\r\n  let palette = {\r\n    secondary: { h: 0, s: 0, l: 0 },\r\n    primary: { h: 0, s: 0, l: 0 },\r\n    deep: { h: 0, s: 0, l: 0 },\r\n    accent: { h: 0, s: 0, l: 0 }\r\n  };\r\n\r\n  const LABELS = {\r\n    secondary: 'Palish',\r\n    primary: 'Primary',\r\n    deep: 'Deepish',\r\n    accent: 'Accent'\r\n  };\r\n\r\n\r\n  document.addEventListener('DOMContentLoaded', function () {\r\n    const primaryHex = document.getElementById('primaryColorHex');\r\n    const primaryPicker = document.getElementById('primaryColorPicker');\r\n    const generateBtn = document.getElementById('generateBtn');\r\n    const resetBtn = document.getElementById('resetBtn');\r\n    const paletteResult = document.getElementById('paletteResult');\r\n    const paletteList = document.getElementById('paletteList');\r\n    const previewPlaceholder = document.getElementById('previewPlaceholder');\r\n    const previewCanvas = document.getElementById('previewCanvas');\r\n    const exportControls = document.getElementById('exportControls');\r\n    const copyCssBtn = document.getElementById('copyCssBtn');\r\n    const copyJsonBtn = document.getElementById('copyJsonBtn');\r\n    const copyMessage = document.getElementById('copyMessage');\r\n\r\n    if (!primaryHex) return;\r\n\r\n    \/\/ HEX <-> Picker\u306e\u53cc\u65b9\u5411\u540c\u671f\r\n    primaryHex.addEventListener('input', function () {\r\n      const v = this.value.trim();\r\n      if (\/^#[0-9A-Fa-f]{6}$\/.test(v)) {\r\n        primaryPicker.value = v.toLowerCase();\r\n      }\r\n    });\r\n    primaryPicker.addEventListener('input', function () {\r\n      primaryHex.value = this.value.toUpperCase();\r\n    });\r\n\r\n    generateBtn.addEventListener('click', function () {\r\n      const hex = primaryHex.value.trim();\r\n      if (!\/^#[0-9A-Fa-f]{6}$\/.test(hex)) {\r\n        alert('\u6b63\u3057\u3044HEX\u30b3\u30fc\u30c9\uff08#000000\u5f62\u5f0f\uff09\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\u3002');\r\n        return;\r\n      }\r\n      generatePalette(hex);\r\n    });\r\n\r\n    resetBtn.addEventListener('click', function () {\r\n      primaryHex.value = '#2A417E';\r\n      primaryPicker.value = '#2A417E';\r\n      paletteResult.style.display = 'none';\r\n      previewPlaceholder.style.display = '';\r\n      previewCanvas.style.display = 'none';\r\n      exportControls.style.display = 'none';\r\n    });\r\n\r\n    copyCssBtn.addEventListener('click', function () {\r\n      const css =\r\n        ':root {\\n' +\r\n        '  --color-secondary: ' + hslToHex(palette.secondary) + ';\\n' +\r\n        '  --color-primary:      ' + hslToHex(palette.primary) + ';\\n' +\r\n        '  --color-deep:      ' + hslToHex(palette.deep) + ';\\n' +\r\n        '  --color-accent:    ' + hslToHex(palette.accent) + ';\\n' +\r\n        '}';\r\n      copyToClipboard(css, 'CSS\u5909\u6570\u3092\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f');\r\n    });\r\n\r\n    copyJsonBtn.addEventListener('click', function () {\r\n      const json = JSON.stringify({\r\n        secondary: hslToHex(palette.secondary),\r\n        primary: hslToHex(palette.primary),\r\n        deep: hslToHex(palette.deep),\r\n        accent: hslToHex(palette.accent)\r\n      }, null, 2);\r\n      copyToClipboard(json, 'JSON\u3092\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f');\r\n    });\r\n\r\n\r\n    \/\/ ====================================\r\n    \/\/ \u30d1\u30ec\u30c3\u30c8\u751f\u6210\uff08Munsell\u7406\u8ad6\u30d9\u30fc\u30b9\uff09\r\n    \/\/ ====================================\r\n\r\n    function generatePalette(hex) {\r\n      const baseHsl = hexToHsl(hex);\r\n\r\n      \/\/ Primary = \u5165\u529b\u5024\u305d\u306e\u307e\u307e\r\n      palette.primary = { h: baseHsl.h, s: baseHsl.s, l: baseHsl.l };\r\n\r\n      \/\/ Palish = \u660e\u308b\u3081\u30fb\u5f69\u5ea6\u4f4e\u3081\uff08Munsell: \u660e\u308b\u3044\u8272\u306f\u5f69\u5ea6\u4f4e\u3081\uff09\r\n      \/\/ \u660e\u5ea6\u3092\u9ad8\u3044\u65b9\u3078\u30b7\u30d5\u30c8\u3001\u5f69\u5ea6\u306f\u53cd\u6bd4\u4f8b\u7684\u306b\u4e0b\u3052\u308b\r\n      palette.secondary = {\r\n        h: baseHsl.h,\r\n        s: Math.max(15, baseHsl.s * 0.45),    \/\/ \u5f69\u5ea6\u3092\u7d0445%\u306b\r\n        l: Math.min(90, baseHsl.l + 35)       \/\/ \u660e\u5ea6\u3092+35\r\n      };\r\n\r\n      \/\/ Deepish = \u6697\u3081\u30fb\u5f69\u5ea6\u9ad8\u3081\uff08Munsell: \u6697\u3044\u8272\u306f\u5f69\u5ea6\u9ad8\u3081\uff09\r\n      palette.deep = {\r\n        h: baseHsl.h,\r\n        s: Math.min(100, baseHsl.s * 1.15),   \/\/ \u5f69\u5ea6\u3092\u7d04115%\u306b\uff08\u4e0a\u9650100\uff09\r\n        l: Math.max(10, baseHsl.l - 20)       \/\/ \u660e\u5ea6\u3092-20\r\n      };\r\n\r\n      \/\/ Accent = \u88dc\u8272\uff08Hue +180\u00b0\uff09\u3001\u660e\u5ea6\u30fb\u5f69\u5ea6\u306f\u8996\u8a8d\u6027\u78ba\u4fdd\u306e\u305f\u3081\u8abf\u6574\r\n      palette.accent = {\r\n        h: (baseHsl.h + 180) % 360,\r\n        s: Math.min(95, Math.max(72, baseHsl.s)), \/\/ \u5f69\u5ea6\u3092\u6700\u4f4e72\u3001\u6700\u9ad895\u306b\r\n        l: 50 \/\/ \u4e2d\u660e\u5ea6\u3067\u8996\u8a8d\u6027\u3092\u78ba\u4fdd\r\n      };\r\n\r\n      renderPaletteSliders();\r\n      renderPreview();\r\n\r\n      paletteResult.style.display = '';\r\n      previewPlaceholder.style.display = 'none';\r\n      previewCanvas.style.display = '';\r\n      exportControls.style.display = '';\r\n    }\r\n\r\n\r\n    \/\/ ====================================\r\n    \/\/ \u30d1\u30ec\u30c3\u30c8UI\uff084\u8272 \u00d7 HSL\u30b9\u30e9\u30a4\u30c0\u30fc\uff09\r\n    \/\/ ====================================\r\n\r\n    \/\/ \u5404\u30ab\u30e9\u30fc\u30ab\u30fc\u30c9\u306eDOM\u53c2\u7167\u3092\u4fdd\u6301\u3057\u3066\u304a\u304f\uff08\u518d\u63cf\u753b\u6642\u306b\u3082swatch\/hex\u30e9\u30d9\u30eb\u306b\u76f4\u63a5\u30a2\u30af\u30bb\u30b9\u3067\u304d\u308b\u3088\u3046\u306b\uff09\r\n    const cardRefs = {};\r\n\r\n    function renderPaletteSliders() {\r\n      paletteList.innerHTML = '';\r\n      Object.keys(cardRefs).forEach(function (k) { delete cardRefs[k]; });\r\n\r\n      ['secondary', 'primary', 'deep', 'accent'].forEach(function (key) {\r\n        const c = palette[key];\r\n        const hex = hslToHex(c);\r\n\r\n        \/\/ \u30ab\u30fc\u30c9\u672c\u4f53\r\n        const card = document.createElement('div');\r\n        card.className = 'cp-card';\r\n        card.style.cssText = 'border:1px solid #ddd;border-radius:4px;padding:0.5rem 0.75rem;margin-bottom:0.5rem;background:#fff;';\r\n\r\n        \/\/ \u30d8\u30c3\u30c0\u30fc\u90e8\u5206\uff08\u30b9\u30ef\u30c3\u30c1 + \u540d\u524d + HEX\uff09\r\n        const header = document.createElement('div');\r\n        header.style.cssText = 'display:flex; align-items:center; gap:0.5rem;margin-bottom:0.4rem;';\r\n\r\n        const swatch = document.createElement('span');\r\n        swatch.style.cssText = 'display:inline-block;width:2.2em;height:2.2em;border-radius:4px;border:1px solid rgba(0,0,0,0.15);';\r\n        swatch.style.background = hex;\r\n\r\n        const headerText = document.createElement('div');\r\n        headerText.style.flex = '1';\r\n        const nameSpan = document.createElement('span');\r\n        nameSpan.style.cssText = 'font-weight:bold; font-size:0.85em;';\r\n        nameSpan.textContent = LABELS[key];\r\n        const hexSpan = document.createElement('span');\r\n        hexSpan.style.cssText = 'font-family:monospace; font-size:1em; color:#666; margin-left:0.5em;';\r\n        hexSpan.textContent = hex;\r\n        headerText.appendChild(nameSpan);\r\n        headerText.appendChild(hexSpan);\r\n\r\n        header.appendChild(swatch);\r\n        header.appendChild(headerText);\r\n        card.appendChild(header);\r\n\r\n        \/\/ \u30b9\u30e9\u30a4\u30c0\u30fc\u90e8\u5206\uff08H\/S\/L \u5404\u884c\uff09\r\n        const sliderGrid = document.createElement('div');\r\n        sliderGrid.style.cssText = 'display:grid; grid-template-columns:auto 1fr auto; column-gap:0.5rem; align-items:center;  font-size:0.75em;';\r\n\r\n        const sliderRefs = {};\r\n        const valRefs = {};\r\n\r\n        [['h', 'H', 360, '\u00b0'], ['s', 'S', 100, '%'], ['l', 'L', 100, '%']].forEach(function (spec) {\r\n          const prop = spec[0], label = spec[1], maxVal = spec[2], unit = spec[3];\r\n\r\n          const labelEl = document.createElement('label');\r\n          labelEl.textContent = label;\r\n\r\n          const slider = document.createElement('input');\r\n          slider.type = 'range';\r\n          slider.min = '0';\r\n          slider.max = String(maxVal);\r\n          slider.step = '1';\r\n          slider.style.width = '100%';\r\n          slider.dataset.key = key;\r\n          slider.dataset.prop = prop;\r\n          \/\/ value\u5c5e\u6027\u3068value\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u4e21\u65b9\u3092\u8a2d\u5b9a\uff08DOM\u8ffd\u52a0\u5f8c\u306b\u518d\u4ee3\u5165\u3059\u308b\u3053\u3068\u3067\u53cd\u6620\u3092\u78ba\u5b9f\u306b\u3059\u308b\uff09\r\n          const v = Math.round(c[prop]);\r\n          slider.value = String(v);\r\n          slider.setAttribute('value', String(v));\r\n\r\n          const valSpan = document.createElement('span');\r\n          valSpan.textContent = v + unit;\r\n          valSpan.style.minWidth = '3em';\r\n          valSpan.style.textAlign = 'right';\r\n\r\n          sliderGrid.appendChild(labelEl);\r\n          sliderGrid.appendChild(slider);\r\n          sliderGrid.appendChild(valSpan);\r\n\r\n          sliderRefs[prop] = slider;\r\n          valRefs[prop] = valSpan;\r\n\r\n          slider.addEventListener('input', function () {\r\n            palette[key][prop] = parseFloat(this.value);\r\n            const unitNow = (prop === 'h') ? '\u00b0' : '%';\r\n            valSpan.textContent = Math.round(this.value) + unitNow;\r\n\r\n            const newHex = hslToHex(palette[key]);\r\n            swatch.style.background = newHex;\r\n            hexSpan.textContent = newHex;\r\n\r\n            renderPreview();\r\n          });\r\n        });\r\n\r\n        card.appendChild(sliderGrid);\r\n        paletteList.appendChild(card);\r\n\r\n        \/\/ DOM\u8ffd\u52a0\u5f8c\u306b\u3082value\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u518d\u8a2d\u5b9a\uff08\u53e4\u3044\u30d7\u30ed\u30d1\u30c6\u30a3\u5024\u304c\u6b8b\u308b\u30d6\u30e9\u30a6\u30b6\u6319\u52d5\u3078\u306e\u4fdd\u967a\uff09\r\n        ['h', 's', 'l'].forEach(function (p) {\r\n          sliderRefs[p].value = String(Math.round(c[p]));\r\n        });\r\n\r\n        cardRefs[key] = { swatch: swatch, hexSpan: hexSpan, sliders: sliderRefs, vals: valRefs };\r\n      });\r\n    }\r\n\r\n\r\n    \/\/ ====================================\r\n    \/\/ \u30b5\u30f3\u30d7\u30ebUI\u30d7\u30ec\u30d3\u30e5\u30fc\uff08ai-colors\u98a8\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\uff09\r\n    \/\/ ====================================\r\n\r\n    function renderPreview() {\r\n      const sec = hslToHex(palette.secondary);\r\n      const primary = hslToHex(palette.primary);\r\n      const deep = hslToHex(palette.deep);\r\n      const acc = hslToHex(palette.accent);\r\n\r\n      \/\/ Primary\u80cc\u666f\u306e\u4e0a\u306b\u4e57\u305b\u308b\u6587\u5b57\u8272\u3092\u3001\u8f1d\u5ea6\u306b\u5fdc\u3058\u3066\u767d\/\u9ed2\u3067\u81ea\u52d5\u9078\u629e\r\n      const primaryText = bestTextOn(primary);\r\n      const accText = bestTextOn(acc);\r\n\r\n      \/\/ \u4e0b\u534a\u5206\u306e\u80cc\u666f\u8272\uff08\u30e1\u30a4\u30f3\u306e\u8272\u76f8\u3092\u4fdd\u3063\u305f\u307e\u307e\u660e\u5ea697\uff09\r\n      const lightBg = hslToHex({\r\n        h: palette.primary.h,\r\n        s: Math.min(palette.primary.s, 40), \/\/ \u5f69\u5ea6\u4e0a\u965040\u3067\u8584\u30d4\u30f3\u30af\u306a\u3069\u6d3e\u624b\u306a\u8272\u3092\u907f\u3051\u308b\r\n        l: 97\r\n      });\r\n\r\n      \/\/ \u767d\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u4e2d\u306e Total Balance \u306a\u3069\u306e\u30ab\u30fc\u30c9\r\n      const headerHtml =\r\n        '<div style=\"background:' + primary + ';color:' + primaryText + ';padding:0.85rem 1rem;display:flex; justify-content:space-between;align-items:center;\">' +\r\n          '<div style=\"font-weight:bold; font-size:1.1em;\">Dashboard<\/div>' +\r\n          '<button style=\"background:' + acc + ';color:' + accText + ';border:none;padding:0.4rem 0.9rem;border-radius:4px;font-size:0.85em;font-weight:bold; cursor:pointer;\">+ New<\/button>' +\r\n        '<\/div>';\r\n\r\n      const whiteSectionHtml =\r\n        '<div style=\"background:#fff;padding:1rem;\">' +\r\n          \/\/ \u898b\u51fa\u3057\u30c6\u30ad\u30b9\u30c8\uff08Deep\u8272\uff09\r\n          '<div style=\"color:' + deep + ';font-size:1.15em;font-weight:bold; margin-bottom:0.5rem;\">\u898b\u51fa\u3057\u30c6\u30ad\u30b9\u30c8\uff08Deep\u30ab\u30e9\u30fc\uff09<\/div>' +\r\n          \/\/ \u672c\u6587\u30b5\u30f3\u30d7\u30eb\uff08Primary\u8272\uff09\r\n          '<div style=\"color:' + primary + ';font-size:0.85em;line-height:1.6;margin-bottom:1rem;\">\u672c\u6587\u30b5\u30f3\u30d7\u30eb\uff1aPrimary\u30ab\u30e9\u30fc\u3092\u6587\u5b57\u3068\u3057\u3066\u4f7f\u7528\u3057\u305f\u5834\u5408\u306e\u898b\u3048\u65b9\u3067\u3059\u3002<\/div>' +\r\n\r\n          \/\/ Total Balance\u30ab\u30fc\u30c9\uff08Primary\u80cc\u666f\uff09\r\n          '<div style=\"background:' + primary + ';color:' + primaryText + ';padding:1rem;border-radius:6px;margin-bottom:0.9rem;\">' +\r\n            '<div style=\"font-size:0.75em;opacity:0.8;\">Total Balance<\/div>' +\r\n            '<div style=\"font-size:1.6em;font-weight:bold; letter-spacing:-0.5px;\">\u00a5 439,177<\/div>' +\r\n            \/\/ \u30df\u30cb\u30b0\u30e9\u30d5\u98a8\uff08SVG\uff09\r\n            '<svg viewBox=\"0 0 200 40\" style=\"width:100%;height:40px;margin-top:0.5rem;display:block;\">' +\r\n              '<polyline fill=\"none\" stroke=\"' + primaryText + '\" stroke-opacity=\"0.6\" stroke-width=\"2\" points=\"0,30 25,20 50,25 75,10 100,18 125,8 150,15 175,5 200,12\"\/>' +\r\n              '<circle cx=\"125\" cy=\"8\" r=\"4\" fill=\"' + acc + '\"\/>' +\r\n            '<\/svg>' +\r\n          '<\/div>' +\r\n\r\n          \/\/ \u30ca\u30d3\u98a8\u30dc\u30bf\u30f3\r\n          '<div style=\"display:flex; gap:0.5rem;flex-wrap:wrap;\">' +\r\n            '<span style=\"background:' + primary + ';color:' + primaryText + ';padding:0.4rem 0.95rem;border-radius:99px;font-size:0.8em;\">Wallet<\/span>' +\r\n            '<span style=\"background:' + primary + ';color:' + primaryText + ';padding:0.4rem 0.95rem;border-radius:99px;font-size:0.8em;opacity:0.6;\">Portfolio<\/span>' +\r\n            '<span style=\"background:' + acc + ';color:' + accText + ';padding:0.4rem 0.95rem;border-radius:99px;font-size:0.8em;font-weight:bold; \">Active<\/span>' +\r\n          '<\/div>' +\r\n        '<\/div>';\r\n\r\n      \/\/ WCAG\u30c6\u30fc\u30d6\u30eb\uff08\u4e0b\u534a\u5206\u30fb\u8584\u8272\u80cc\u666f\u306e\u4e0a\u306b\u767d\u30c6\u30fc\u30d6\u30eb\uff09\r\n      const wcagHtml = buildWcagBlock();\r\n\r\n      const lightSectionHtml =\r\n        '<div style=\"background:' + lightBg + ';padding:1rem;\">' +\r\n          wcagHtml +\r\n        '<\/div>';\r\n\r\n      previewCanvas.innerHTML = headerHtml + whiteSectionHtml + lightSectionHtml;\r\n    }\r\n\r\n\r\n    \/\/ ====================================\r\n    \/\/ WCAG \u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u6bd4\u30c1\u30a7\u30c3\u30af\uff08\u30d7\u30ec\u30d3\u30e5\u30fc\u5185\u306b\u7d44\u307f\u8fbc\u307f\u7528\u30d6\u30ed\u30c3\u30af\u3092\u8fd4\u3059\uff09\r\n    \/\/ ====================================\r\n\r\n    function buildWcagBlock() {\r\n      const colors = [\r\n        { key: 'primary', label: 'Primary', hex: hslToHex(palette.primary) },\r\n        { key: 'accent', label: 'Accent', hex: hslToHex(palette.accent) }\r\n      ];\r\n\r\n      let html = '<div style=\"background:#fff;border-radius:6px;padding:0.75rem;\">';\r\n      html += '<div style=\"font-weight:bold; font-size:0.9em;margin-bottom:0.5rem;\">WCAG\u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u6bd4<\/div>';\r\n      html += '<table style=\"width:100%;border-collapse:collapse;\">';\r\n      html += '<thead><tr style=\"background:#f5f5f5;\">' +\r\n        '<th style=\"padding:4px 6px;text-align:left;border:1px solid #ddd;font-size:0.75em;\">\u5bfe\u8c61<\/th>' +\r\n        '<th style=\"padding:4px 6px;text-align:center;border:1px solid #ddd;font-size:0.75em;\">\u6bd4\u7387<\/th>' +\r\n        '<th style=\"padding:4px 6px;text-align:center;border:1px solid #ddd;font-size:0.75em;\">AA<\/th>' +\r\n        '<th style=\"padding:4px 6px;text-align:center;border:1px solid #ddd;font-size:0.75em;\">AAA<\/th>' +\r\n        '<\/tr><\/thead><tbody>';\r\n\r\n      const passBadge = function (ok) {\r\n        return '<span style=\"display:inline-block;padding:1px 6px;border-radius:3px;font-size:0.7em;font-weight:bold; color:#fff;background:' +\r\n          (ok ? '#4CAF50' : '#e74c3c') + ';\">' + (ok ? 'Pass' : 'Fail') + '<\/span>';\r\n      };\r\n\r\n      const makeRow = function (bgHex, fgHex, label) {\r\n        const ratio = contrastRatio(bgHex, fgHex);\r\n        const aa = ratio >= 4.5;\r\n        const aaa = ratio >= 7;\r\n        return '<tr>' +\r\n          '<td style=\"padding:4px 6px;border:1px solid #ddd;font-size:0.75em;\">' +\r\n          '<span style=\"display:inline-block;width:0.8em;height:0.8em;background:' + bgHex + ';border:1px solid rgba(0,0,0,0.2);border-radius:2px;vertical-align:middle;margin-right:0.2em;\"><\/span>' +\r\n          '<span style=\"display:inline-block;width:0.8em;height:0.8em;background:' + fgHex + ';border:1px solid rgba(0,0,0,0.2);border-radius:2px;vertical-align:middle;margin-right:0.3em;\"><\/span>' +\r\n          label +\r\n          '<\/td>' +\r\n          '<td style=\"padding:4px 6px;border:1px solid #ddd;text-align:center;font-family:monospace;font-size:0.75em; \">' + ratio.toFixed(2) + '<\/td>' +\r\n          '<td style=\"padding:4px 6px;border:1px solid #ddd;text-align:center;\">' + passBadge(aa) + '<\/td>' +\r\n          '<td style=\"padding:4px 6px;border:1px solid #ddd;text-align:center;\">' + passBadge(aaa) + '<\/td>' +\r\n          '<\/tr>';\r\n      };\r\n\r\n      \/\/ Primary \u00d7 \u767d\u6587\u5b57 \/ \u9ed2\u6587\u5b57\u3001Accent \u00d7 \u767d\u6587\u5b57 \/ \u9ed2\u6587\u5b57\r\n      colors.forEach(function (c) {\r\n        [['#FFFFFF', '\u767d\u6587\u5b57'], ['#000000', '\u9ed2\u6587\u5b57']].forEach(function (pair) {\r\n          html += makeRow(c.hex, pair[0], c.label + ' \u00d7 ' + pair[1]);\r\n        });\r\n      });\r\n\r\n      \/\/ Primary \u00d7 Accent\uff08CTA\u7528\uff1a\u8272\u00d7\u8272\u306e\u7d44\u307f\u5408\u308f\u305b\uff09\r\n      const primaryHex = hslToHex(palette.primary);\r\n      const accentHex = hslToHex(palette.accent);\r\n      html += '<tr><td colspan=\"4\" style=\"padding:3px 6px;border:1px solid #ddd;background:#fafafa;font-size:0.7em;color:#666;\">\u2014 \u30ab\u30e9\u30fc\u540c\u58eb\u306e\u7d44\u307f\u5408\u308f\u305b\uff08CTA\u5411\u3051\uff09 \u2014<\/td><\/tr>';\r\n      html += makeRow(primaryHex, accentHex, 'Primary \u00d7 Accent\u6587\u5b57');\r\n      html += makeRow(accentHex, primaryHex, 'Accent \u00d7 Primary\u6587\u5b57');\r\n\r\n      html += '<\/tbody><\/table>';\r\n      html += '<p style=\"margin-top:0.5rem;font-size:0.7em; color:#666;line-height:1.5;\">\u203b AA = 4.5\u4ee5\u4e0a\uff08\u901a\u5e38\u30c6\u30ad\u30b9\u30c8\u57fa\u6e96\uff09\u3001AAA = 7\u4ee5\u4e0a\uff08\u62e1\u5f35\u57fa\u6e96\uff09<br>\u203b \u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u6bd4\u306f\u65b9\u5411\u306b\u3088\u3089\u305a\u540c\u5024\u3067\u3059\uff08\u5de6\uff1a\u80cc\u666f\u8272 \/ \u53f3\uff1a\u6587\u5b57\u8272 \u306e\u898b\u3048\u65b9\u306e\u53c2\u8003\uff09<\/p>';\r\n      html += '<\/div>';\r\n\r\n      return html;\r\n    }\r\n\r\n\r\n    \/\/ ====================================\r\n    \/\/ \uff08\u65e7\uff09WCAG \u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u6bd4\u30c1\u30a7\u30c3\u30af - \u30d7\u30ec\u30d3\u30e5\u30fc\u5185\u306b\u7d71\u5408\u6e08\u307f\r\n    \/\/ ====================================\r\n\r\n    function renderWcag() {\r\n      \/\/ \u4e92\u63db\u6027\u306e\u305f\u3081\u7a7a\u95a2\u6570\u3068\u3057\u3066\u6b8b\u3059\uff08\u5916\u90e8\u304b\u3089\u547c\u3070\u308c\u305f\u5834\u5408\u306b\u5099\u3048\u3066\uff09\r\n      \/\/ \u5b9f\u969b\u306e\u63cf\u753b\u306frenderPreview\u5185\u306ebuildWcagBlock\u3067\u884c\u3046\r\n    }\r\n\r\n\r\n    \/\/ ====================================\r\n    \/\/ \u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u30b3\u30d4\u30fc\r\n    \/\/ ====================================\r\n\r\n    function copyToClipboard(text, msg) {\r\n      if (navigator.clipboard && navigator.clipboard.writeText) {\r\n        navigator.clipboard.writeText(text).then(function () {\r\n          showCopyMessage(msg);\r\n        }).catch(function () {\r\n          fallbackCopy(text, msg);\r\n        });\r\n      } else {\r\n        fallbackCopy(text, msg);\r\n      }\r\n    }\r\n\r\n    function fallbackCopy(text, msg) {\r\n      const ta = document.createElement('textarea');\r\n      ta.value = text;\r\n      ta.style.position = 'fixed';\r\n      ta.style.opacity = '0';\r\n      document.body.appendChild(ta);\r\n      ta.select();\r\n      try { document.execCommand('copy'); showCopyMessage(msg); }\r\n      catch (e) { alert('\u30b3\u30d4\u30fc\u306b\u5931\u6557\u3057\u307e\u3057\u305f'); }\r\n      document.body.removeChild(ta);\r\n    }\r\n\r\n    function showCopyMessage(msg) {\r\n      copyMessage.innerHTML = '<p style=\"color:#4CAF50;font-size:0.85em;margin-top:0.4rem;text-align:center;\">' + msg + '<\/p>';\r\n      setTimeout(function () { copyMessage.innerHTML = ''; }, 2000);\r\n    }\r\n\r\n\r\n    \/\/ \u521d\u671f\u5316\u6642\u306b1\u5ea6\u751f\u6210\u3057\u3066\u304a\u304f\r\n    generatePalette(primaryHex.value);\r\n  });\r\n\r\n\r\n  \/\/ ====================================\r\n  \/\/ \u8272\u5909\u63db\u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\r\n  \/\/ ====================================\r\n\r\n  function hexToRgb(hex) {\r\n    const m = hex.replace('#', '').match(\/.{2}\/g);\r\n    return { r: parseInt(m[0], 16), g: parseInt(m[1], 16), b: parseInt(m[2], 16) };\r\n  }\r\n\r\n  function rgbToHex(r, g, b) {\r\n    const c = function (v) {\r\n      const h = Math.max(0, Math.min(255, Math.round(v))).toString(16).toUpperCase();\r\n      return h.length === 1 ? '0' + h : h;\r\n    };\r\n    return '#' + c(r) + c(g) + c(b);\r\n  }\r\n\r\n  function rgbToHsl(r, g, b) {\r\n    r \/= 255; g \/= 255; b \/= 255;\r\n    const max = Math.max(r, g, b), min = Math.min(r, g, b);\r\n    let h = 0, s = 0;\r\n    const l = (max + min) \/ 2;\r\n    if (max !== min) {\r\n      const d = max - min;\r\n      s = l > 0.5 ? d \/ (2 - max - min) : d \/ (max + min);\r\n      switch (max) {\r\n        case r: h = (g - b) \/ d + (g < b ? 6 : 0); break;\r\n        case g: h = (b - r) \/ d + 2; break;\r\n        case b: h = (r - g) \/ d + 4; break;\r\n      }\r\n      h *= 60;\r\n    }\r\n    return { h: h, s: s * 100, l: l * 100 };\r\n  }\r\n\r\n  function hslToRgb(h, s, l) {\r\n    h = ((h % 360) + 360) % 360 \/ 360;\r\n    s = Math.max(0, Math.min(100, s)) \/ 100;\r\n    l = Math.max(0, Math.min(100, l)) \/ 100;\r\n    let r, g, b;\r\n    if (s === 0) {\r\n      r = g = b = l;\r\n    } else {\r\n      const hue2rgb = function (p, q, t) {\r\n        if (t < 0) t += 1;\r\n        if (t > 1) t -= 1;\r\n        if (t < 1 \/ 6) return p + (q - p) * 6 * t;\r\n        if (t < 1 \/ 2) return q;\r\n        if (t < 2 \/ 3) return p + (q - p) * (2 \/ 3 - t) * 6;\r\n        return p;\r\n      };\r\n      const q = l < 0.5 ? l * (1 + s) : l + s - l * s;\r\n      const p = 2 * l - q;\r\n      r = hue2rgb(p, q, h + 1 \/ 3);\r\n      g = hue2rgb(p, q, h);\r\n      b = hue2rgb(p, q, h - 1 \/ 3);\r\n    }\r\n    return { r: r * 255, g: g * 255, b: b * 255 };\r\n  }\r\n\r\n  function hexToHsl(hex) {\r\n    const rgb = hexToRgb(hex);\r\n    return rgbToHsl(rgb.r, rgb.g, rgb.b);\r\n  }\r\n\r\n  function hslToHex(hsl) {\r\n    const rgb = hslToRgb(hsl.h, hsl.s, hsl.l);\r\n    return rgbToHex(rgb.r, rgb.g, rgb.b);\r\n  }\r\n\r\n\r\n  \/\/ ====================================\r\n  \/\/ WCAG \u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u6bd4\u8a08\u7b97\r\n  \/\/ ====================================\r\n\r\n  function relativeLuminance(hex) {\r\n    const rgb = hexToRgb(hex);\r\n    const channel = function (v) {\r\n      v \/= 255;\r\n      return v <= 0.03928 ? v \/ 12.92 : Math.pow((v + 0.055) \/ 1.055, 2.4);\r\n    };\r\n    return 0.2126 * channel(rgb.r) + 0.7152 * channel(rgb.g) + 0.0722 * channel(rgb.b);\r\n  }\r\n\r\n  function contrastRatio(hex1, hex2) {\r\n    const l1 = relativeLuminance(hex1);\r\n    const l2 = relativeLuminance(hex2);\r\n    const lighter = Math.max(l1, l2);\r\n    const darker = Math.min(l1, l2);\r\n    return (lighter + 0.05) \/ (darker + 0.05);\r\n  }\r\n\r\n  function bestTextOn(bgHex) {\r\n    const white = contrastRatio(bgHex, '#FFFFFF');\r\n    const black = contrastRatio(bgHex, '#000000');\r\n    return white > black ? '#FFFFFF' : '#000000';\r\n  }\r\n<\/script>","protected":false},"excerpt":{"rendered":"\u8907\u6570\u306e\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u30c9\u30e9\u30c3\u30b0&#038;\u30c9\u30ed\u30c3\u30d7\u3059\u308b\u3060\u3051\u3067\u3001\u660e\u5ea6\u30fb\u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u30fb\u8272\u8abf\u30fb\u5f69\u5ea6\u3092\u500b\u5225\u306b\u30d7\u30ec\u30d3\u30e5\u30fc\u8abf\u6574\u3002\u81ea\u52d5\u30c8\u30fc\u30f3\u88dc\u6b63\u306b\u3082\u5bfe\u5fdc\u3002JPG \/ PNG \/ WebP \u5f62\u5f0f\u3067\u4e00\u62ec\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3002","protected":false},"author":1,"featured_media":0,"parent":173,"menu_order":7,"comment_status":"closed","ping_status":"closed","template":"templates\/page-converter.php","meta":{"sns_share_botton_hide":"","vkExUnit_sns_title":"","_vk_print_noindex":"","_exclude_from_list_pages":"","footnotes":"","vk-ltc-link":"","vk-ltc-target":"0"},"categories":[21],"tags":[],"class_list":["post-12223","page","type-page","status-publish","category-tool"],"veu_head_title_object":{"title":"","add_site_title":""},"_links":{"self":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages\/12223","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/types\/page"}],"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=12223"}],"version-history":[{"count":10,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages\/12223\/revisions"}],"predecessor-version":[{"id":12268,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages\/12223\/revisions\/12268"}],"up":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages\/173"}],"wp:attachment":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media?parent=12223"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/categories?post=12223"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/tags?post=12223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}