{"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-27T14:08:14","modified_gmt":"2026-05-27T05:08:14","slug":"colorpalette-generator","status":"publish","type":"page","link":"https:\/\/code-plus.jp\/gp\/tools\/colorpalette-generator\/","title":{"rendered":"\u30ab\u30e9\u30fc\u30d1\u30ec\u30c3\u30c8\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc\uff5cWCAG\u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u6bd4\u3092\u8868\u793a"},"content":{"rendered":"<!-- \u0f3b\u273f\ud835\udc0f\ud835\udc00\ud835\udc06\ud835\udc04\u0f3a -->\n\n<!-- \u0f3b.mezzala\uff08\u4f59\u767d\u8abf\u6574\uff1apage\u4e0a\uff09\u0f3a -->\n<hr class=\"spacer-mediano\" \/>\n\n<hr id=\"ch-TextConverter\" anchor \/>\n<div class=\"pg-saracnvtvkaa bg-hackingGate\">\n\n  <header class=\"page-header mx-auto\">\n    <!-- \u2756\u30d1\u30f3\u304f\u305a\u30ea\u30b9\u30c8 --><div><!-- breadcrumb.php -->\n<style>\n\/* \u2756breadcrumb.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 \u0f1a\u0f36\u22b0\u27e1\u22b1\u0f36\u0f1a\u0f3a*\/\n.zaratan .breadcrumb.leckermaul {\n\twidth: 100%;\n\tmax-width: calc(var(--zvw,1vw) * 92.5);\n\tmargin-inline: auto;\n}\n\n.zaratan .breadcrumb.leckermaul :is(ul, ol) {\n\tmin-height: 48px;\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.6;\n\tfont-size: clamp(0.775pc, calc(0.775pc + ((1vw - 3.6px) * 0.1563)), 0.8750pc);\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-secondary-600, hsl(224, 25%, 43%));\n\tmargin-right: .5em;\n}\n\n.zaratan .breadcrumb.leckermaul li:nth-of-type(n+2) a {\n\tmargin-left: .5em;\n}\n\n\/* \u73fe\u5728\u306e\u30da\u30fc\u30b8\uff08\u30ea\u30f3\u30af\u306a\u3057\u3002<span aria-current=\"page\">\uff09 *\/\n.zaratan .breadcrumb.leckermaul [aria-current=\"page\"] {\n\tdisplay: inline;\n\tmargin-inline: .5em;\n\tcolor: var(--c-base-550, hsl(224, 6%, 47%));\n}\n\n@media (any-hover:hover) {\n\t.zaratan .breadcrumb.leckermaul a:hover {\n\t\tcolor: var(--c-secondary-600, hsl(224, 25%, 43%));\n\t}\n}\n\n\/* .ma-home *\/\n.zaratan .breadcrumb.leckermaul .ma-home {\n\tvertical-align: top;\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-secondary-600, hsl(224, 25%, 43%))\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 py-0.5r mx-auto\" aria-label=\"\u30d1\u30f3\u304f\u305a\u30ea\u30b9\u30c8\">\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\/\">Web\u30c4\u30fc\u30eb\u4e00\u89a7\uff5cHTML\/CSS\u30fb\u6587\u66f8\u7de8\u96c6\u30fb\u753b\u50cf\u7de8\u96c6<\/a><\/li><li class=\"current_page_item\"><span aria-current=\"page\">\u30ab\u30e9\u30fc\u30d1\u30ec\u30c3\u30c8\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc\uff5cWCAG\u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u6bd4\u3092\u8868\u793a<\/span><\/li>    <!-- \/\/\/if (is_page()) -->\n\n  <\/ul>\n<\/nav><\/div>\n  <\/header><!-- \/\/\/.inheader -->\n\n  <!-- \u0f3b\u00a7\ud835\udc12\ud835\udc04\ud835\udc02\ud835\udc13\ud835\udc08\ud835\udc0e\ud835\udc0d\u0f3a -->\n  <section class=\"sect-cnvtVkaA-Intro contvis-auto\" style=\"contain-intrinsic-size:800px;\">\n    <header class=\"section__inheader innerA mx-auto scroll-fadeIn\">\n      <div class=\"hgroup-wrapper d-iblock mb-0.5r\">\n        <h1 class=\"fz-xxl hdg-page mb-0.25pc\"><span>\u30ab\u30e9\u30fc\u30d1\u30ec\u30c3\u30c8\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc\uff5cWCAG\u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u6bd4\u3092\u8868\u793a<\/span><\/h1>\n        <p class=\"page-foreword fz-ss\">\n          \u30e1\u30a4\u30f3\u30ab\u30e9\u30fc\u3092\u5165\u529b\u3059\u308b\u3060\u3051\u3067\u3001Munsell\u8272\u5f69\u7406\u8ad6\u306e4\u8272\u30d1\u30ec\u30c3\u30c8\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\n        <\/p>\n      <\/div><!-- \/\/\/.hgroup -->\n\n      <a class=\"fl-right badge is-outlined is-gray fz-xs bdrs-0.25r\" href=\"#ch-Explanation\">\n        <i class=\"icon mas ma-help\"><\/i>&nbsp;<span>\u4f7f\u3044\u65b9<\/span>\n      <\/a>\n    <\/header><!-- \/\/\/.inheader -->\n  <\/section>\n\n\n  <!-- \u0f3b\u00a7\ud835\udc12\ud835\udc04\ud835\udc02\ud835\udc13\ud835\udc08\ud835\udc0e\ud835\udc0d\u0f3a -->\n  <hr id=\"ch-Converter\" anchor \/>\n  <section class=\"sect-cnvtVkaA-Converter contvis-auto\" style=\"contain-intrinsic-size:800px;\">\n    <div class=\"section__interior innerA fxd-row mx-auto\">\n      <figure class=\"section__leftlane\">\n        <div class=\"hgroup-wrapper\">\n          <h3 class=\"fz-rg hdg-section mb-0.25pc\"><span>\u25bc\u30e1\u30a4\u30f3\u30ab\u30e9\u30fc\u3092\u5165\u529b<\/span><\/h3>\n        <\/div><!-- \/\/\/.hgroup -->\n\n        <!-- Primary\u5165\u529b -->\n        <div class=\"colgroup w-full\">\n          <label class=\"label is-outlined fz-sm\" style=\"display:flex; align-items:center; gap:0.5rem;\">\n            <p class=\"fz-sm\" style=\"margin:0;white-space:nowrap;\">\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\uff1a<\/p>\n            <input type=\"text\" id=\"primaryColorHex\" class=\"input\" value=\"#314B91\" placeholder=\"#314B91 \/ rgb(49,75,145) \/ hsl(224,49%,38%)\" spellcheck=\"false\" style=\"font-family:monospace;width:15em;max-width:100%;\">\n            <input type=\"color\" id=\"primaryColorPicker\" value=\"#314B91\" style=\"width:2.5em;height:2em;border:1px solid #ddd;border-radius:4px;cursor:pointer;padding:2px;\">\n          <\/label>\n        <\/div><!-- \/\/\/.colgroup -->\n\n        <p class=\"ta-center mt-0.5r\">\n          <button type=\"button\" id=\"generateBtn\" class=\"button is-solided is-primary\">\u30d1\u30ec\u30c3\u30c8\u3092\u751f\u6210<\/button>\n          <button type=\"button\" id=\"resetBtn\" class=\"button is-outlined is-gray\" style=\"margin-left:0.5rem;\">\u30ea\u30bb\u30c3\u30c8<\/button>\n        <\/p>\n\n        <!-- \u751f\u6210\u7d50\u679c\uff084\u8272\u30d1\u30ec\u30c3\u30c8\uff09 -->\n        <div id=\"paletteResult\" class=\"colgroup w-full mt-1r\" style=\"display:none;\">\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>\n          <div id=\"paletteList\" class=\"box is-outlined\"><\/div>\n        <\/div><!-- \/\/\/.colgroup -->\n      <\/figure><!-- \/\/\/.leftlane -->\n\n      <figure class=\"section__centerlane\">\n        <aside class=\"sticky-sidebar fxd-column pc-center\" style=\"height:22rem;\">\n        <\/aside>\n      <\/figure><!-- \/\/\/.centerlane -->\n\n\n      <figure class=\"section__rightlane\">\n        <div class=\"chest-wrapper relatived\">\n          <h3 class=\"fz-rg hdg-section mb-0.25pc\"><span>\u25bc\u30b5\u30f3\u30d7\u30ebUI\u30d7\u30ec\u30d3\u30e5\u30fc<\/span><\/h3>\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);\">\n            <div id=\"previewPlaceholder\" style=\"height:24pc;display:flex; align-items:center; justify-content:center;color:var(--color-text-muted,#aaa);font-size:14px;\">\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\n            <\/div>\n            <div id=\"previewCanvas\" style=\"display:none;\"><\/div>\n          <\/div>\n        <\/div><!-- \/\/\/.chest -->\n\n        <!-- \u30a8\u30af\u30b9\u30dd\u30fc\u30c8 -->\n        <div id=\"exportControls\" style=\"display:none;\" class=\"colgroup w-full mt-1r\">\n          <p class=\"ta-center\">\n            <button type=\"button\" id=\"copyCssBtn\" class=\"button is-outlined is-primary\">CSS\u5909\u6570\u3092\u30b3\u30d4\u30fc<\/button>\n            <button type=\"button\" id=\"copyJsonBtn\" class=\"button is-outlined is-primary\" style=\"margin-left:0.5rem;\">JSON\u3067\u30b3\u30d4\u30fc<\/button>\n          <\/p>\n          <ins id=\"copyMessage\"><\/ins>\n        <\/div>\n      <\/figure><!-- \/\/\/.rightlane -->\n    <\/div><!-- \/\/\/.interior.fxd-row -->\n  <\/section>\n\n\n  <!-- \u0f3b\u00a7\ud835\udc12\ud835\udc04\ud835\udc02\ud835\udc13\ud835\udc08\ud835\udc0e\ud835\udc0d\u0f3a -->\n  <hr id=\"ch-Explanation\" anchor \/>\n  <section class=\"sect-cnvtVkaA-Explanation pt-3r contvis-auto\" style=\"contain-intrinsic-size:800px;\">\n    <div class=\"section__interior innerA mx-auto scroll-fadeIn\">\n      <div class=\"box is-broad is-solided c-base-900\">\n        <h4 class=\"hdg-explanation fz-md mb-0.25pc\">\u4f7f\u3044\u65b9<\/h4>\n        <p class=\"fz-ss mb-1r\">\n          Primary\u3092\u30ab\u30e9\u30fc\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\uff08\u307e\u305f\u306fEnter\u30ad\u30fc\uff09\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\u3001Background\u30fbPrimary\u30fbSecondary\u30fbTertiary\u30fbAccent \u306e5\u8272\u3059\u3079\u3066\u306e\u7d44\u307f\u5408\u308f\u305b\uff0810\u901a\u308a\uff09\u306b\u3064\u3044\u3066\u3001WCAG\u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u6bd4\u306ePass\/Fail\u3092\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002\n        <\/p>\n\n        <h5 class=\"fz-ss hdg-explanation mb-0.25pc mt-1r\">\u2328\ufe0f \u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u306e\u5165\u529b<\/h5>\n        <ul class=\"fz-ss mb-1r\">\n          <li><b class=\"fw-600\">\u5bfe\u5fdc\u5f62\u5f0f\uff1a<\/b> HEX\uff08<code>#314B91<\/code> \/ <code>#39F<\/code>\uff09\u3001RGB\uff08<code>rgb(49, 75, 145)<\/code>\uff09\u3001HSL\uff08<code>hsl(224, 49%, 38%)<\/code>\uff09\u3002\u30ab\u30f3\u30de\u533a\u5207\u308a\u30fb\u30b9\u30da\u30fc\u30b9\u533a\u5207\u308a\u3069\u3061\u3089\u3082\u53ef<\/li>\n          <li><b class=\"fw-600\">\u5404\u8272\u306e\u76f4\u63a5\u6307\u5b9a\uff1a<\/b> \u751f\u6210\u5f8c\u306e4\u8272\u305d\u308c\u305e\u308c\u306e\u5165\u529b\u6b04\u306b\u30b3\u30fc\u30c9\u3092\u5165\u308c\u3066Enter\u3092\u62bc\u3059\u3068\u3001\u305d\u306e\u8272\u306b\u5dee\u3057\u66ff\u308f\u308a\u3001\u30b9\u30e9\u30a4\u30c0\u30fc\u3068\u30d7\u30ec\u30d3\u30e5\u30fc\u306b\u3082\u53cd\u6620\u3055\u308c\u307e\u3059<\/li>\n          <li><b class=\"fw-600\">\u30a2\u30eb\u30d5\u30a1\u5024\uff1a<\/b> rgba() \/ hsla() \/ 8\u6841HEX\u3082\u5165\u529b\u3067\u304d\u307e\u3059\u304c\u3001\u30a2\u30eb\u30d5\u30a1\u5024\u306f\u7121\u8996\u3057\u3066\u4e0d\u900f\u660e\u306e\u8272\u3068\u3057\u3066\u6271\u3044\u307e\u3059\uff08\u900f\u904e\u8272\u306f\u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u6bd4\u304c\u80cc\u666f\u6b21\u7b2c\u3067\u5909\u308f\u308b\u305f\u3081\uff09<\/li>\n        <\/ul>\n\n        <h5 class=\"fz-ss hdg-explanation mb-0.25pc mt-1r\">\ud83c\udfa8 \u751f\u6210\u3055\u308c\u308b4\u8272<\/h5>\n        <ul class=\"fz-ss mb-1r\">\n          <li><b class=\"fw-600\">Primary\uff1a<\/b> \u5165\u529b\u3057\u305f\u57fa\u6e96\u8272\u3002\u4e3b\u8981\u8981\u7d20\u306e\u5857\u308a\u306b<\/li>\n          <li><b class=\"fw-600\">Secondary\uff1a<\/b> Primary\u3088\u308a\u660e\u308b\u3081\u30fb\u5f69\u5ea6\u4f4e\u3081\u3002\u80cc\u666f\u3084\u8584\u3044\u88c5\u98fe\u306b<\/li>\n          <li><b class=\"fw-600\">Tertiary\uff1a<\/b> Primary\u3088\u308a\u6697\u3081\u30fb\u5f69\u5ea6\u9ad8\u3081\u3002\u898b\u51fa\u3057\u3084\u5f37\u8abf\u306b<\/li>\n          <li><b class=\"fw-600\">Accent\uff1a<\/b> \u88dc\u8272\uff08\u8272\u76f8+180\u00b0\uff09\u3002CTA\u3084\u30de\u30fc\u30ab\u30fc\u306b<\/li>\n        <\/ul>\n\n        <h5 class=\"fz-ss hdg-explanation mb-0.25pc\">\ud83c\udf9b\ufe0f \u5fae\u8abf\u6574\u30b9\u30e9\u30a4\u30c0\u30fc<\/h5>\n        <ul class=\"fz-ss mb-1r\">\n          <li><b class=\"fw-600\">Hue\uff08\u8272\u76f8\uff09\uff1a<\/b> 0\u301c360\u00b0\u3067\u8272\u76f8\u3092\u8abf\u6574<\/li>\n          <li><b class=\"fw-600\">Saturation\uff08\u5f69\u5ea6\uff09\uff1a<\/b> 0\u301c100%\u3067\u9bae\u3084\u304b\u3055\u3092\u8abf\u6574<\/li>\n          <li><b class=\"fw-600\">Lightness\uff08\u660e\u5ea6\uff09\uff1a<\/b> 0\u301c100%\u3067\u660e\u308b\u3055\u3092\u8abf\u6574<\/li>\n        <\/ul>\n\n        <h5 class=\"fz-ss hdg-explanation mb-0.25pc\">\ud83d\udcd0 \u914d\u8272\u30ed\u30b8\u30c3\u30af<\/h5>\n        <ul class=\"fz-ss mb-1r\">\n          <li><b class=\"fw-600\">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>\n          <li><b class=\"fw-600\">\u88dc\u8272\uff1a<\/b> Hue\u3092+180\u00b0\u30b7\u30d5\u30c8\u3057\u3066Accent\u30ab\u30e9\u30fc\u3092\u751f\u6210<\/li>\n          <li><b class=\"fw-600\">WCAG\uff1a<\/b> \u76f8\u5bfe\u8f1d\u5ea6\u30d9\u30fc\u30b9\u306e\u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u6bd4\u3092\u8a08\u7b97\u3002Background \u30684\u8272\u306e\u8a085\u8272\u306b\u3064\u3044\u3066\u3001\u516810\u901a\u308a\u306e\u7d44\u307f\u5408\u308f\u305b\u3067 AA\uff084.5\u4ee5\u4e0a\uff09\/ AAA\uff087\u4ee5\u4e0a\uff09\u306e\u5224\u5b9a\u3092\u8868\u793a<\/li>\n        <\/ul>\n\n        <h5 class=\"fz-ss hdg-explanation mb-0.25pc\">\ud83c\udfaf \u6d3b\u7528\u4f8b<\/h5>\n        <ul class=\"fz-ss mb-1r\">\n          <li><b class=\"fw-600\">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>\n          <li><b class=\"fw-600\">\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>\n          <li><b class=\"fw-600\">\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>\n        <\/ul>\n\n        <h5 class=\"fz-ss hdg-explanation mb-0.25pc\">\u26a0\ufe0f \u6ce8\u610f\u4e8b\u9805<\/h5>\n        <ul class=\"fz-ss\">\n          <li><b class=\"fw-600\">\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>\n          <li><b class=\"fw-600\">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>\n          <li><b class=\"fw-600\">\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>\n        <\/ul>\n      <\/div>\n    <\/div><!-- \/\/\/.interior -->\n  <\/section><!-- \/\/\/.section -->\n\n\n  <!-- \u0f3b\u00a7\ud835\udc12\ud835\udc04\ud835\udc02\ud835\udc13\ud835\udc08\ud835\udc0e\ud835\udc0d\u0f3a -->\n  <hr id=\"ch-Relation\" anchor \/>\n  <section class=\"sect-cnvtVkaA-Relation\" style=\"contain-intrinsic-size:1000px;\">\n    <div class=\"section__interior innerA mx-auto scroll-fadeIn\">\n      <div class=\"hgroup-wrapper hgroupA mb-0.5pc\">\n        <h5 class=\"hdg-relation fz-rg\"><span>\u95a2\u9023\u30c4\u30fc\u30eb<\/span><\/h5>\n      <\/div><!-- \/\/\/.hgroup -->\n\n      <ul class=\"shelf-wrapper_pc shelfA\" data-cols_pc=\"2\">\n        <li class=\"slide\">\n          <a href=\"https:\/\/code-plus.jp\/gp\/tools\/colorcode-converter\/\" class=\"linkbox\">\n            <h4 class=\"linkbox-title fz-md\">\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u5909\u63db\u30c4\u30fc\u30eb<\/h4>\n            <span class=\"linkbox-excerpt\">RGB \/ RGBA \/ HSL \u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u3092HEX\u306b\u4e00\u62ec\u5909\u63db\u3002<\/span>\n          <\/a>\n        <\/li>\n        <li class=\"slide\">\n          <a href=\"https:\/\/code-plus.jp\/gp\/tools\/imagetone-converter\/\" class=\"linkbox\">\n            <h4 class=\"linkbox-title fz-md\">\u753b\u50cf\u30c8\u30fc\u30f3\u88dc\u6b63\u30c4\u30fc\u30eb<\/h4>\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>\n          <\/a>\n        <\/li>\n      <\/ul><!-- \/\/\/.shelf -->\n    <\/div><!-- \/\/\/.interior -->\n  <\/section><!-- \/\/\/.section -->\n\n\n  <!-- \u0f3b\u00a7\ud835\udc03\ud835\udc04\ud835\udc0f\ud835\udc00\ud835\udc11\ud835\udc13\ud835\udc0c\ud835\udc04\ud835\udc0d\ud835\udc13\u0f3a -->\n\n  <section class=\"sect-cnvtVkaA-Relation2 pt-3r contvis-auto\" style=\"contain-intrinsic-size:800px;\">\n    <div class=\"section__interior innerA mx-auto scroll-fadeIn\">\n      <div class=\"hgroup-wrapper hgroupA mb-0.5pc\">\n\n      <\/div><!-- \/\/\/.hgroup -->\n\n\n    <\/div><!-- \/\/\/.interior -->\n  <\/section><!-- \/\/\/.section -->\n\n\n  <!-- \u0f3b.mediano\uff08\u4f59\u767d\u8abf\u6574\uff1apage\u4e0b\uff09\u0f3a -->\n  <hr class=\"spacer-mezzala\" \/>\n\n<\/div><!-- \/\/\/\u25b2.page  -->\n\n\n<script>\n  \/\/ ====================================\n  \/\/ \u72b6\u614b\u7ba1\u7406\n  \/\/ ====================================\n  let palette = {\n    primary: { h: 0, s: 0, l: 0 },\n    secondary: { h: 0, s: 0, l: 0 },\n    tertiary: { h: 0, s: 0, l: 0 },\n    accent: { h: 0, s: 0, l: 0 }\n  };\n\n  const LABELS = {\n    primary: 'Primary',\n    secondary: 'Secondary',\n    tertiary: 'Tertiary',\n    accent: 'Accent'\n  };\n\n\n  document.addEventListener('DOMContentLoaded', function () {\n    const primaryHex = document.getElementById('primaryColorHex');\n    const primaryPicker = document.getElementById('primaryColorPicker');\n    const generateBtn = document.getElementById('generateBtn');\n    const resetBtn = document.getElementById('resetBtn');\n    const paletteResult = document.getElementById('paletteResult');\n    const paletteList = document.getElementById('paletteList');\n    const previewPlaceholder = document.getElementById('previewPlaceholder');\n    const previewCanvas = document.getElementById('previewCanvas');\n    const exportControls = document.getElementById('exportControls');\n    const copyCssBtn = document.getElementById('copyCssBtn');\n    const copyJsonBtn = document.getElementById('copyJsonBtn');\n    const copyMessage = document.getElementById('copyMessage');\n\n    if (!primaryHex) return;\n\n    \/\/ \u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u5165\u529b <-> Picker\u306e\u53cc\u65b9\u5411\u540c\u671f\uff08HEX \/ rgb() \/ hsl() \u5bfe\u5fdc\uff09\n    primaryHex.addEventListener('input', function () {\n      const parsed = parseColor(this.value);\n      if (parsed) {\n        primaryPicker.value = parsed.hex.toLowerCase();\n      }\n    });\n    primaryPicker.addEventListener('input', function () {\n      primaryHex.value = this.value.toUpperCase();\n    });\n\n    function generateFromInput() {\n      const parsed = parseColor(primaryHex.value);\n      if (!parsed) {\n        alert('HEX\uff08#314B91\uff09\u3001rgb(49, 75, 145)\u3001hsl(224, 49%, 38%) \u306e\u3044\u305a\u308c\u304b\u306e\u5f62\u5f0f\u3067\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\u3002');\n        return;\n      }\n      primaryHex.value = parsed.hex;\n      primaryPicker.value = parsed.hex.toLowerCase();\n      generatePalette(parsed.hex);\n    }\n\n    generateBtn.addEventListener('click', generateFromInput);\n    primaryHex.addEventListener('keydown', function (e) {\n      if (e.key === 'Enter') {\n        e.preventDefault();\n        generateFromInput();\n      }\n    });\n\n    resetBtn.addEventListener('click', function () {\n      primaryHex.value = '#314B91';\n      primaryPicker.value = '#314B91';\n      previewBg = '#FFFFFF';\n      if (previewBgInput) {\n        previewBgInput.value = previewBg;\n        previewBgInput.style.borderColor = '';\n      }\n      paletteResult.style.display = 'none';\n      previewPlaceholder.style.display = '';\n      previewCanvas.style.display = 'none';\n      exportControls.style.display = 'none';\n    });\n\n    copyCssBtn.addEventListener('click', function () {\n      const css =\n        ':root {\\n' +\n        '  --c-primary:   ' + hslToHex(palette.primary) + ';\\n' +\n        '  --c-secondary: ' + hslToHex(palette.secondary) + ';\\n' +\n        '  --c-tertiary:   ' + hslToHex(palette.tertiary) + ';\\n' +\n        '  --c-accent:    ' + hslToHex(palette.accent) + ';\\n' +\n        '}';\n      copyToClipboard(css, 'CSS\u5909\u6570\u3092\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f');\n    });\n\n    copyJsonBtn.addEventListener('click', function () {\n      const json = JSON.stringify({\n        primary:   hslToHex(palette.primary),\n        secondary: hslToHex(palette.secondary),\n        tertiary:   hslToHex(palette.tertiary),\n        accent:    hslToHex(palette.accent)\n      }, null, 2);\n      copyToClipboard(json, 'JSON\u3092\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f');\n    });\n\n\n    \/\/ ====================================\n    \/\/ \u30d1\u30ec\u30c3\u30c8\u751f\u6210\uff08Munsell\u7406\u8ad6\u30d9\u30fc\u30b9\uff09\n    \/\/ ====================================\n\n    function generatePalette(hex) {\n      const baseHsl = hexToHsl(hex);\n\n      \/\/ Primary = \u5165\u529b\u5024\u305d\u306e\u307e\u307e\n      palette.primary = { h: baseHsl.h, s: baseHsl.s, l: baseHsl.l };\n\n      \/\/ Secondary = \u660e\u308b\u3081\u30fb\u5f69\u5ea6\u4f4e\u3081\uff08Munsell: \u660e\u308b\u3044\u8272\u306f\u5f69\u5ea6\u4f4e\u3081\uff09\n      \/\/ \u660e\u5ea6\u3092\u9ad8\u3044\u65b9\u3078\u30b7\u30d5\u30c8\u3001\u5f69\u5ea6\u306f\u53cd\u6bd4\u4f8b\u7684\u306b\u4e0b\u3052\u308b\n      palette.secondary = {\n        h: baseHsl.h,\n        s: Math.max(15, baseHsl.s * 0.58),    \/\/ \u5f69\u5ea6\u3092\u7d0458%\u306b\n        l: Math.min(90, baseHsl.l + 45)       \/\/ \u660e\u5ea6\u3092+45\n      };\n\n      \/\/ Tertiary = \u6697\u3081\u30fb\u5f69\u5ea6\u9ad8\u3081\uff08Munsell: \u6697\u3044\u8272\u306f\u5f69\u5ea6\u9ad8\u3081\uff09\n      palette.tertiary = {\n        h: baseHsl.h,\n        s: Math.min(99, baseHsl.s * 1.15),    \/\/ \u5f69\u5ea6\u3092\u7d04115%\u306b\uff08\u4e0a\u965099\uff09\n        l: Math.max(10, baseHsl.l - 15)       \/\/ \u660e\u5ea6\u3092-15\n      };\n\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\n      palette.accent = {\n        h: (baseHsl.h + 180) % 360,\n        s: Math.min(99, Math.max(91, baseHsl.s)), \/\/ \u5f69\u5ea6\u3092\u6700\u4f4e91\u3001\u6700\u9ad899\u306b\n        l: 50 \/\/ \u4e2d\u660e\u5ea6\u3067\u8996\u8a8d\u6027\u3092\u78ba\u4fdd\n      };\n\n      renderPaletteSliders();\n      renderPreview();\n\n      paletteResult.style.display = '';\n      previewPlaceholder.style.display = 'none';\n      previewCanvas.style.display = '';\n      exportControls.style.display = '';\n    }\n\n\n    \/\/ ====================================\n    \/\/ \u30d1\u30ec\u30c3\u30c8UI\uff084\u8272 \u00d7 HSL\u30b9\u30e9\u30a4\u30c0\u30fc\uff09\n    \/\/ ====================================\n\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\n    const cardRefs = {};\n\n    function renderPaletteSliders() {\n      paletteList.innerHTML = '';\n      Object.keys(cardRefs).forEach(function (k) { delete cardRefs[k]; });\n\n      ['primary', 'secondary', 'tertiary', 'accent'].forEach(function (key) {\n        const c = palette[key];\n        const hex = hslToHex(c);\n\n        \/\/ \u30ab\u30fc\u30c9\u672c\u4f53\n        const card = document.createElement('div');\n        card.className = 'cp-card';\n        card.style.cssText = 'border:1px solid #ddd;border-radius:4px;padding:0.5rem 0.75rem;margin-bottom:0.5rem;background:#fff;';\n\n        \/\/ \u30d8\u30c3\u30c0\u30fc\u90e8\u5206\uff08\u30b9\u30ef\u30c3\u30c1 + \u540d\u524d + HEX\uff09\n        const header = document.createElement('div');\n        header.style.cssText = 'display:flex; align-items:center; gap:0.5rem;margin-bottom:0.4rem;';\n\n        const swatch = document.createElement('span');\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);';\n        swatch.style.background = hex;\n\n        const headerText = document.createElement('div');\n        headerText.style.cssText = 'flex:1; display:flex; align-items:center; flex-wrap:wrap; gap:0.25rem 0.5rem;';\n        const nameSpan = document.createElement('span');\n        nameSpan.style.cssText = 'font-weight:bold; font-size:0.85em; min-width:5em;';\n        nameSpan.textContent = LABELS[key];\n\n        \/\/ \u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u5165\u529b\u6b04\uff08HEX \/ rgb() \/ hsl()\u3001Enter\u3067\u53cd\u6620\uff09\n        const hexInput = document.createElement('input');\n        hexInput.type = 'text';\n        hexInput.className = 'input';\n        hexInput.value = hex;\n        hexInput.spellcheck = false;\n        hexInput.setAttribute('aria-label', LABELS[key] + ' \u306e\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9');\n        hexInput.placeholder = '#314B91 \/ rgb() \/ hsl()';\n        hexInput.style.cssText = 'font-family:monospace; font-size:0.85em; width:15em; max-width:100%; padding:0.15em 0.5em;';\n\n        headerText.appendChild(nameSpan);\n        headerText.appendChild(hexInput);\n\n        header.appendChild(swatch);\n        header.appendChild(headerText);\n        card.appendChild(header);\n\n        \/\/ \u5165\u529b\u7d50\u679c\u306e\u901a\u77e5\u7528\uff08\u30a8\u30e9\u30fc\u30fb\u30a2\u30eb\u30d5\u30a1\u5024\u7121\u8996\uff09\n        const msgEl = document.createElement('div');\n        msgEl.style.cssText = 'display:none; font-size:0.7em; margin:-0.2rem 0 0.4rem 2.7rem;';\n        card.appendChild(msgEl);\n        let msgTimer = null;\n        const flash = function (text, isError) {\n          msgEl.textContent = text;\n          msgEl.style.color = isError ? '#d33' : '#888';\n          msgEl.style.display = '';\n          clearTimeout(msgTimer);\n          msgTimer = setTimeout(function () { msgEl.style.display = 'none'; }, 3000);\n        };\n\n        \/\/ \u30b9\u30e9\u30a4\u30c0\u30fc\u90e8\u5206\uff08H\/S\/L \u5404\u884c\uff09\n        const sliderGrid = document.createElement('div');\n        sliderGrid.style.cssText = 'display:grid; grid-template-columns:auto 1fr auto; column-gap:0.5rem; align-items:center;  font-size:0.75em;';\n\n        const sliderRefs = {};\n        const valRefs = {};\n\n        [['h', 'H', 360, '\u00b0'], ['s', 'S', 100, '%'], ['l', 'L', 100, '%']].forEach(function (spec) {\n          const prop = spec[0], label = spec[1], maxVal = spec[2], unit = spec[3];\n\n          const labelEl = document.createElement('label');\n          labelEl.textContent = label;\n\n          const slider = document.createElement('input');\n          slider.type = 'range';\n          slider.min = '0';\n          slider.max = String(maxVal);\n          slider.step = '1';\n          slider.style.width = '100%';\n          slider.dataset.key = key;\n          slider.dataset.prop = prop;\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\n          const v = Math.round(c[prop]);\n          slider.value = String(v);\n          slider.setAttribute('value', String(v));\n\n          const valSpan = document.createElement('span');\n          valSpan.textContent = v + unit;\n          valSpan.style.minWidth = '3em';\n          valSpan.style.textAlign = 'right';\n\n          sliderGrid.appendChild(labelEl);\n          sliderGrid.appendChild(slider);\n          sliderGrid.appendChild(valSpan);\n\n          sliderRefs[prop] = slider;\n          valRefs[prop] = valSpan;\n\n          slider.addEventListener('input', function () {\n            palette[key][prop] = parseFloat(this.value);\n            const unitNow = (prop === 'h') ? '\u00b0' : '%';\n            valSpan.textContent = Math.round(this.value) + unitNow;\n\n            const newHex = hslToHex(palette[key]);\n            swatch.style.background = newHex;\n            hexInput.value = newHex;\n            hexInput.style.borderColor = '';\n\n            renderPreview();\n          });\n        });\n\n        card.appendChild(sliderGrid);\n        paletteList.appendChild(card);\n\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\n        ['h', 's', 'l'].forEach(function (p) {\n          sliderRefs[p].value = String(Math.round(c[p]));\n        });\n\n        \/\/ \u5165\u529b\u6b04\u306e\u5185\u5bb9\u3092\u30d1\u30ec\u30c3\u30c8\u306b\u53cd\u6620\uff08\u30b9\u30e9\u30a4\u30c0\u30fc\u30fb\u30b9\u30ef\u30c3\u30c1\u30fb\u5165\u529b\u6b04\u30fb\u30d7\u30ec\u30d3\u30e5\u30fc\u3092\u540c\u671f\uff09\n        const commitInput = function () {\n          const parsed = parseColor(hexInput.value);\n          if (!parsed) {\n            hexInput.style.borderColor = '#d33';\n            flash('HEX \/ rgb() \/ hsl() \u5f62\u5f0f\u3067\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044', true);\n            return false;\n          }\n          hexInput.style.borderColor = '';\n          palette[key] = { h: parsed.h, s: parsed.s, l: parsed.l };\n\n          const units = { h: '\u00b0', s: '%', l: '%' };\n          ['h', 's', 'l'].forEach(function (p) {\n            const r = Math.round(palette[key][p]);\n            sliderRefs[p].value = String(r);\n            valRefs[p].textContent = r + units[p];\n          });\n\n          const newHex = hslToHex(palette[key]);\n          swatch.style.background = newHex;\n          hexInput.value = newHex;\n\n          if (parsed.hasAlpha) {\n            flash('\u30a2\u30eb\u30d5\u30a1\u5024\u306f\u7121\u8996\u3057\u3066\u3001\u4e0d\u900f\u660e\u306e\u8272\u3068\u3057\u3066\u53cd\u6620\u3057\u307e\u3057\u305f', false);\n          }\n          renderPreview();\n          return true;\n        };\n\n        hexInput.addEventListener('keydown', function (e) {\n          if (e.key === 'Enter') {\n            e.preventDefault();\n            commitInput();\n          }\n        });\n        \/\/ \u5165\u529b\u9014\u4e2d\u306e\u307e\u307e\u5916\u3078\u51fa\u305f\u5834\u5408\uff1a\u6709\u52b9\u306a\u3089\u53cd\u6620\u3001\u7121\u52b9\u306a\u3089\u5143\u306e\u8272\u306b\u623b\u3059\n        hexInput.addEventListener('blur', function () {\n          const current = hslToHex(palette[key]);\n          const parsed = parseColor(hexInput.value);\n          if (parsed && parsed.hex !== current) {\n            commitInput();\n          } else if (!parsed) {\n            hexInput.value = current;\n            hexInput.style.borderColor = '';\n          }\n        });\n\n        cardRefs[key] = { swatch: swatch, hexInput: hexInput, sliders: sliderRefs, vals: valRefs };\n      });\n    }\n\n\n    \/\/ ====================================\n    \/\/ \u30b5\u30f3\u30d7\u30ebUI\u30d7\u30ec\u30d3\u30e5\u30fc\uff08ai-colors\u98a8\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\uff09\n    \/\/ ====================================\n\n    function renderPreview() {\n      const primary = hslToHex(palette.primary);\n      const secondary = hslToHex(palette.secondary);\n      const tertiary = hslToHex(palette.tertiary);\n      const accent = hslToHex(palette.accent);\n\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\n      const primaryText = bestTextOn(primary);\n      const secondaryText = bestTextOn(secondary);\n      const tertiaryText = bestTextOn(tertiary);\n      const accentText = bestTextOn(accent);\n\n      \/\/ \u30d8\u30c3\u30c0\u30fc\uff08Dashboard + Background\u5165\u529b\u6b04\uff09\u306f\u518d\u63cf\u753b\u3067\u6d88\u3048\u306a\u3044\u3088\u30461\u56de\u3060\u3051\u4f5c\u308b\n      ensurePreviewShell();\n      previewHeaderEl.style.background = primary;\n      previewHeaderEl.style.color = primaryText;\n\n      \/\/ \u672c\u4f53\u30bb\u30af\u30b7\u30e7\u30f3\uff08\u80cc\u666f\u8272\u306f Background \u5165\u529b\u6b04\u306e\u5024\uff09\u306e\u4e2d\u306e Total Balance \u306a\u3069\u306e\u30ab\u30fc\u30c9\n      const bodySectionHtml =\n        '<div style=\"background:' + previewBg + ';padding:1rem 1rem 0.5rem;\">' +\n          \/\/ \u898b\u51fa\u3057\u30c6\u30ad\u30b9\u30c8\uff08Deep\u8272\uff09\n          '<div style=\"color:' + tertiary + ';font-size:1.15em;font-weight:bold; margin-bottom:0.5rem;\">\u898b\u51fa\u3057\u30c6\u30ad\u30b9\u30c8\uff08Tertiary\uff09<\/div>' +\n          \/\/ \u672c\u6587\u30b5\u30f3\u30d7\u30eb\uff08Primary\u8272\uff09\n          '<div style=\"color:' + primary + ';font-size:0.85em;line-height:1.6;margin-bottom:1rem;\">\u672c\u6587\u30b5\u30f3\u30d7\u30eb\uff1aPrimary \u3092\u6587\u5b57\u3068\u3057\u3066\u4f7f\u7528\u3057\u305f\u5834\u5408\u306e\u898b\u3048\u65b9\u3067\u3059\u3002<\/div>' +\n\n          \/\/ Total Balance\u30ab\u30fc\u30c9\uff08Primary\u80cc\u666f\uff09\n          '<div style=\"background:' + tertiary + ';color:' + tertiaryText + ';padding:1rem;border-radius:6px;margin-bottom:0.9rem;\">' +\n            '<div style=\"font-size:0.75em;opacity:0.8;\">Total Balance<\/div>' +\n            '<div style=\"font-size:1.6em;font-weight:bold; letter-spacing:-0.5px;\">\u00a5 439,177<\/div>' +\n            \/\/ \u30df\u30cb\u30b0\u30e9\u30d5\u98a8\uff08SVG\uff09\n            '<svg viewBox=\"0 0 200 40\" style=\"width:100%;height:40px;margin-top:0.5rem;display:block;\">' +\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\"\/>' +\n              '<circle cx=\"125\" cy=\"8\" r=\"4\" fill=\"' + accent + '\"\/>' +\n            '<\/svg>' +\n          '<\/div>' +\n\n          \/\/ \u30ca\u30d3\u98a8\u30dc\u30bf\u30f3\n          '<div style=\"display:flex; gap:0.5rem;flex-wrap:wrap;\">' +\n            '<span style=\"background:' + primary + ';color:' + primaryText + ';padding:0.4rem 0.95rem;border-radius:99px;font-size:0.8em;\">Wallet<\/span>' +\n            '<span style=\"background:' + secondary + ';color:' + secondaryText + ';padding:0.4rem 0.95rem;border-radius:99px;font-size:0.8em;\">Portfolio<\/span>' +\n            '<span style=\"background:' + accent + ';color:' + accentText + ';padding:0.4rem 0.95rem;border-radius:99px;font-size:0.8em;font-weight:bold; \">Active<\/span>' +\n          '<\/div>' +\n        '<\/div>';\n\n      \/\/ WCAG\u30c6\u30fc\u30d6\u30eb\uff08\u672c\u4f53\u3068\u540c\u3058\u80cc\u666f\u8272\u306e\u4e0a\u306b\u767d\u30ab\u30fc\u30c9\uff09\n      const wcagSectionHtml =\n        '<div style=\"background:' + previewBg + ';padding:0.5rem 1rem 1rem;\">' +\n          buildWcagBlock() +\n        '<\/div>';\n\n      previewBodyEl.innerHTML = bodySectionHtml + wcagSectionHtml;\n    }\n\n    \/\/ \u30d7\u30ec\u30d3\u30e5\u30fc\u80cc\u666f\u8272\uff08Background\u5165\u529b\u6b04\u3067\u5909\u66f4\u3001\u521d\u671f\u5024\u306f\u767d\uff09\n    let previewBg = '#FFFFFF';\n    let previewHeaderEl = null;\n    let previewBodyEl = null;\n    let previewBgInput = null;\n\n    function ensurePreviewShell() {\n      if (previewHeaderEl) return;\n\n      previewHeaderEl = document.createElement('div');\n      previewHeaderEl.style.cssText = 'padding:0.85rem 1rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.4rem 0.75rem;';\n\n      const title = document.createElement('div');\n      title.style.cssText = 'font-weight:bold; font-size:1.1em;';\n      title.textContent = 'Dashboard';\n\n      const bgWrap = document.createElement('label');\n      bgWrap.style.cssText = 'display:flex; align-items:center; gap:0.4rem; font-size:0.75em;';\n      const bgLabel = document.createElement('span');\n      bgLabel.textContent = 'Background:';\n\n      previewBgInput = document.createElement('input');\n      previewBgInput.type = 'text';\n      previewBgInput.className = 'input';\n      previewBgInput.value = previewBg;\n      previewBgInput.spellcheck = false;\n      previewBgInput.placeholder = '#FFFFFF \/ rgb() \/ hsl()';\n      previewBgInput.setAttribute('aria-label', '\u30b5\u30f3\u30d7\u30ebUI\u306e\u80cc\u666f\u8272');\n      previewBgInput.style.cssText = 'font-family:monospace; font-size:1em; width:11em; max-width:100%; padding:0.15em 0.5em; color:#333; background:#fff;';\n\n      bgWrap.appendChild(bgLabel);\n      bgWrap.appendChild(previewBgInput);\n      previewHeaderEl.appendChild(title);\n      previewHeaderEl.appendChild(bgWrap);\n\n      previewBodyEl = document.createElement('div');\n\n      previewCanvas.innerHTML = '';\n      previewCanvas.appendChild(previewHeaderEl);\n      previewCanvas.appendChild(previewBodyEl);\n\n      \/\/ Enter\u3067\u53cd\u6620\uff08\u4e0d\u6b63\u306a\u5f62\u5f0f\u306f\u8d64\u67a0\uff09\u3002\u5165\u529b\u9014\u4e2d\u3067\u5916\u3078\u51fa\u305f\u5834\u5408\uff1a\u6709\u52b9\u306a\u3089\u53cd\u6620\u3001\u7121\u52b9\u306a\u3089\u5143\u306e\u8272\u306b\u623b\u3059\n      const commitBg = function () {\n        const parsed = parseColor(previewBgInput.value);\n        if (!parsed) {\n          previewBgInput.style.borderColor = '#d33';\n          return false;\n        }\n        previewBgInput.style.borderColor = '';\n        previewBg = parsed.hex;\n        previewBgInput.value = parsed.hex;\n        renderPreview();\n        return true;\n      };\n      previewBgInput.addEventListener('keydown', function (e) {\n        if (e.key === 'Enter') {\n          e.preventDefault();\n          commitBg();\n        }\n      });\n      previewBgInput.addEventListener('blur', function () {\n        const parsed = parseColor(previewBgInput.value);\n        if (parsed && parsed.hex !== previewBg) {\n          commitBg();\n        } else if (!parsed) {\n          previewBgInput.value = previewBg;\n          previewBgInput.style.borderColor = '';\n        }\n      });\n    }\n\n\n    \/\/ ====================================\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\n    \/\/ ====================================\n\n    function buildWcagBlock() {\n      \/\/ Background\uff08\u30d7\u30ec\u30d3\u30e5\u30fc\u80cc\u666f\uff09+ 4\u8272 = 5\u8272\u30022\u8272\u306e\u7d44\u307f\u5408\u308f\u305b\u306f 5C2 = 10\u901a\u308a\n      const colors = [\n        { key: 'background', label: 'Background', hex: previewBg },\n        { key: 'primary', label: 'Primary', hex: hslToHex(palette.primary) },\n        { key: 'secondary', label: 'Secondary', hex: hslToHex(palette.secondary) },\n        { key: 'tertiary', label: 'Tertiary', hex: hslToHex(palette.tertiary) },\n        { key: 'accent', label: 'Accent', hex: hslToHex(palette.accent) }\n      ];\n\n      let html = '<div style=\"background:#fff;border:1px solid #e5e5e5;border-radius:6px;padding:0.75rem;\">';\n      html += '<div style=\"font-weight:bold; font-size:0.9em;margin-bottom:0.5rem;\">WCAG\u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u6bd4<\/div>';\n      html += '<table style=\"width:100%;border-collapse:collapse;\">';\n      html += '<thead><tr style=\"background:#f5f5f5;\">' +\n        '<th style=\"padding:4px 6px;text-align:left;border:1px solid #ddd;font-size:0.75em;\">\u5bfe\u8c61<\/th>' +\n        '<th style=\"padding:4px 6px;text-align:center;border:1px solid #ddd;font-size:0.75em;\">\u6bd4\u7387<\/th>' +\n        '<th style=\"padding:4px 6px;text-align:center;border:1px solid #ddd;font-size:0.75em;\">AA<\/th>' +\n        '<th style=\"padding:4px 6px;text-align:center;border:1px solid #ddd;font-size:0.75em;\">AAA<\/th>' +\n        '<\/tr><\/thead><tbody>';\n\n      const passBadge = function (ok) {\n        return '<span style=\"display:inline-block;padding:1px 6px;border-radius:3px;font-size:0.7em;font-weight:bold; color:#fff;background:' +\n          (ok ? 'var(--c-success, hsl(123, 46%, 35%))' : 'var(--c-caution, hsl(13, 99%, 43%))') + ';\">' + (ok ? 'Pass' : 'Fail') + '<\/span>';\n      };\n\n      const makeRow = function (bgHex, fgHex, label) {\n        const ratio = contrastRatio(bgHex, fgHex);\n        const aa = ratio >= 4.5;\n        const aaa = ratio >= 7;\n        return '<tr>' +\n          '<td style=\"padding:4px 6px;border:1px solid #ddd;font-size:0.75em;\">' +\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>' +\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>' +\n          label +\n          '<\/td>' +\n          '<td style=\"padding:4px 6px;border:1px solid #ddd;text-align:center;font-family:monospace;font-size:0.75em; \">' + ratio.toFixed(2) + '<\/td>' +\n          '<td style=\"padding:4px 6px;border:1px solid #ddd;text-align:center;\">' + passBadge(aa) + '<\/td>' +\n          '<td style=\"padding:4px 6px;border:1px solid #ddd;text-align:center;\">' + passBadge(aaa) + '<\/td>' +\n          '<\/tr>';\n      };\n\n      \/\/ 5\u8272\u3059\u3079\u3066\u306e\u7d44\u307f\u5408\u308f\u305b\uff08Background \u00d7 4\u8272 \u2192 Primary \u00d7 3\u8272 \u2192 Secondary \u00d7 2\u8272 \u2192 Tertiary \u00d7 Accent\uff09\n      for (let i = 0; i < colors.length; i++) {\n        for (let j = i + 1; j < colors.length; j++) {\n          html += makeRow(colors[i].hex, colors[j].hex, colors[i].label + ' \u00d7 ' + colors[j].label);\n        }\n      }\n\n      html += '<\/tbody><\/table>';\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\u80cc\u666f\u3068\u6587\u5b57\u3092\u5165\u308c\u66ff\u3048\u3066\u3082\u540c\u3058\u5024\uff09<br>\u203b Background \u306f\u3001\u4e0a\u306e\u5165\u529b\u6b04\u3067\u6307\u5b9a\u3057\u305f\u80cc\u666f\u8272\u3067\u3059<\/p>';\n      html += '<\/div>';\n\n      return html;\n    }\n\n\n    \/\/ ====================================\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\n    \/\/ ====================================\n\n    function renderWcag() {\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\n      \/\/ \u5b9f\u969b\u306e\u63cf\u753b\u306frenderPreview\u5185\u306ebuildWcagBlock\u3067\u884c\u3046\n    }\n\n\n    \/\/ ====================================\n    \/\/ \u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u30b3\u30d4\u30fc\n    \/\/ ====================================\n\n    function copyToClipboard(text, msg) {\n      if (navigator.clipboard && navigator.clipboard.writeText) {\n        navigator.clipboard.writeText(text).then(function () {\n          showCopyMessage(msg);\n        }).catch(function () {\n          fallbackCopy(text, msg);\n        });\n      } else {\n        fallbackCopy(text, msg);\n      }\n    }\n\n    function fallbackCopy(text, msg) {\n      const ta = document.createElement('textarea');\n      ta.value = text;\n      ta.style.position = 'fixed';\n      ta.style.opacity = '0';\n      document.body.appendChild(ta);\n      ta.select();\n      try { document.execCommand('copy'); showCopyMessage(msg); }\n      catch (e) { alert('\u30b3\u30d4\u30fc\u306b\u5931\u6557\u3057\u307e\u3057\u305f'); }\n      document.body.removeChild(ta);\n    }\n\n    function showCopyMessage(msg) {\n      copyMessage.innerHTML = '<p style=\"color: var(--c-caution, hsl(13, 99%, 43%));;font-size:0.85em;margin-top:0.4rem;text-align:center;\">' + msg + '<\/p>';\n      setTimeout(function () { copyMessage.innerHTML = ''; }, 2000);\n    }\n\n\n    \/\/ \u521d\u671f\u5316\u6642\u306b1\u5ea6\u751f\u6210\u3057\u3066\u304a\u304f\n    generatePalette(primaryHex.value);\n  });\n\n\n  \/\/ ====================================\n  \/\/ \u8272\u5909\u63db\u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\n  \/\/ ====================================\n\n  function hexToRgb(hex) {\n    const m = hex.replace('#', '').match(\/.{2}\/g);\n    return { r: parseInt(m[0], 16), g: parseInt(m[1], 16), b: parseInt(m[2], 16) };\n  }\n\n  function rgbToHex(r, g, b) {\n    const c = function (v) {\n      const h = Math.max(0, Math.min(255, Math.round(v))).toString(16).toUpperCase();\n      return h.length === 1 ? '0' + h : h;\n    };\n    return '#' + c(r) + c(g) + c(b);\n  }\n\n  function rgbToHsl(r, g, b) {\n    r \/= 255; g \/= 255; b \/= 255;\n    const max = Math.max(r, g, b), min = Math.min(r, g, b);\n    let h = 0, s = 0;\n    const l = (max + min) \/ 2;\n    if (max !== min) {\n      const d = max - min;\n      s = l > 0.5 ? d \/ (2 - max - min) : d \/ (max + min);\n      switch (max) {\n        case r: h = (g - b) \/ d + (g < b ? 6 : 0); break;\n        case g: h = (b - r) \/ d + 2; break;\n        case b: h = (r - g) \/ d + 4; break;\n      }\n      h *= 60;\n    }\n    return { h: h, s: s * 100, l: l * 100 };\n  }\n\n  function hslToRgb(h, s, l) {\n    h = ((h % 360) + 360) % 360 \/ 360;\n    s = Math.max(0, Math.min(100, s)) \/ 100;\n    l = Math.max(0, Math.min(100, l)) \/ 100;\n    let r, g, b;\n    if (s === 0) {\n      r = g = b = l;\n    } else {\n      const hue2rgb = function (p, q, t) {\n        if (t < 0) t += 1;\n        if (t > 1) t -= 1;\n        if (t < 1 \/ 6) return p + (q - p) * 6 * t;\n        if (t < 1 \/ 2) return q;\n        if (t < 2 \/ 3) return p + (q - p) * (2 \/ 3 - t) * 6;\n        return p;\n      };\n      const q = l < 0.5 ? l * (1 + s) : l + s - l * s;\n      const p = 2 * l - q;\n      r = hue2rgb(p, q, h + 1 \/ 3);\n      g = hue2rgb(p, q, h);\n      b = hue2rgb(p, q, h - 1 \/ 3);\n    }\n    return { r: r * 255, g: g * 255, b: b * 255 };\n  }\n\n  function hexToHsl(hex) {\n    const rgb = hexToRgb(hex);\n    return rgbToHsl(rgb.r, rgb.g, rgb.b);\n  }\n\n  function hslToHex(hsl) {\n    const rgb = hslToRgb(hsl.h, hsl.s, hsl.l);\n    return rgbToHex(rgb.r, rgb.g, rgb.b);\n  }\n\n  \/\/ \u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u6587\u5b57\u5217\u3092\u89e3\u6790\u3057\u3066 { h, s, l, hex, hasAlpha } \u3092\u8fd4\u3059\uff08\u4e0d\u6b63\u306a\u3089 null\uff09\n  \/\/ \u5bfe\u5fdc\u5f62\u5f0f\uff1a#RGB \/ #RGBA \/ #RRGGBB \/ #RRGGBBAA\uff08#\u7701\u7565\u53ef\uff09\u3001rgb() \/ rgba()\u3001hsl() \/ hsla()\n  \/\/ \u30ab\u30f3\u30de\u533a\u5207\u308a\u30fb\u30b9\u30da\u30fc\u30b9\u533a\u5207\u308a\uff08rgb(49 75 145 \/ 0.5)\uff09\u306e\u4e21\u65b9\u306b\u5bfe\u5fdc\u3002\u30a2\u30eb\u30d5\u30a1\u5024\u306f\u89e3\u6790\u306e\u307f\u3067\u8272\u306b\u306f\u53cd\u6620\u3057\u306a\u3044\n  function parseColor(str) {\n    if (typeof str !== 'string') return null;\n    const s = str.trim();\n    if (!s) return null;\n\n    \/\/ HEX\n    const hexMatch = s.match(\/^#?([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$\/i);\n    if (hexMatch) {\n      let h = hexMatch[1];\n      const hasAlpha = (h.length === 4 || h.length === 8);\n      if (h.length <= 4) {\n        h = h.split('').map(function (c) { return c + c; }).join('');\n      }\n      const r = parseInt(h.slice(0, 2), 16);\n      const g = parseInt(h.slice(2, 4), 16);\n      const b = parseInt(h.slice(4, 6), 16);\n      const hsl = rgbToHsl(r, g, b);\n      return { h: hsl.h, s: hsl.s, l: hsl.l, hex: rgbToHex(r, g, b), hasAlpha: hasAlpha };\n    }\n\n    \/\/ rgb() \/ rgba() \/ hsl() \/ hsla()\n    const fnMatch = s.match(\/^(rgba?|hsla?)\\(\\s*(.+?)\\s*\\)$\/i);\n    if (!fnMatch) return null;\n    const fn = fnMatch[1].toLowerCase().slice(0, 3);\n    const args = fnMatch[2].split(\/[\\s,\\\/]+\/).filter(Boolean);\n    if (args.length < 3 || args.length > 4) return null;\n\n    const tok = function (a) {\n      const m = a.match(\/^([+-]?(?:\\d+\\.?\\d*|\\.\\d+))(%|deg)?$\/i);\n      return m ? { v: parseFloat(m[1]), unit: (m[2] || '').toLowerCase() } : null;\n    };\n    const t = args.map(tok);\n    if (t.some(function (x) { return x === null; })) return null;\n    const hasAlpha = args.length === 4;\n    const clamp = function (v, min, max) { return Math.max(min, Math.min(max, v)); };\n\n    if (fn === 'rgb') {\n      const ch = function (x) { return clamp(x.unit === '%' ? x.v * 2.55 : x.v, 0, 255); };\n      const r = ch(t[0]), g = ch(t[1]), b = ch(t[2]);\n      const hsl = rgbToHsl(r, g, b);\n      return { h: hsl.h, s: hsl.s, l: hsl.l, hex: rgbToHex(r, g, b), hasAlpha: hasAlpha };\n    }\n\n    \/\/ hsl\uff1a\u8272\u76f8\u306f%\u4e0d\u53ef\u3001\u5f69\u5ea6\u30fb\u660e\u5ea6\u306e%\u306f\u7701\u7565\u53ef\n    if (t[0].unit === '%') return null;\n    const hue = ((t[0].v % 360) + 360) % 360;\n    const sat = clamp(t[1].v, 0, 100);\n    const lig = clamp(t[2].v, 0, 100);\n    return { h: hue, s: sat, l: lig, hex: hslToHex({ h: hue, s: sat, l: lig }), hasAlpha: hasAlpha };\n  }\n\n\n  \/\/ ====================================\n  \/\/ WCAG \u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u6bd4\u8a08\u7b97\n  \/\/ ====================================\n\n  function relativeLuminance(hex) {\n    const rgb = hexToRgb(hex);\n    const channel = function (v) {\n      v \/= 255;\n      return v <= 0.03928 ? v \/ 12.92 : Math.pow((v + 0.055) \/ 1.055, 2.4);\n    };\n    return 0.2126 * channel(rgb.r) + 0.7152 * channel(rgb.g) + 0.0722 * channel(rgb.b);\n  }\n\n  function contrastRatio(hex1, hex2) {\n    const l1 = relativeLuminance(hex1);\n    const l2 = relativeLuminance(hex2);\n    const lighter = Math.max(l1, l2);\n    const darker = Math.min(l1, l2);\n    return (lighter + 0.05) \/ (darker + 0.05);\n  }\n\n  function bestTextOn(bgHex) {\n    const white = contrastRatio(bgHex, '#FFFFFF');\n    const black = contrastRatio(bgHex, '#000000');\n    return white > black ? '#FFFFFF' : '#000000';\n  }\n<\/script>","protected":false},"excerpt":{"rendered":"\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","protected":false},"author":1,"featured_media":12893,"parent":173,"menu_order":28,"comment_status":"closed","ping_status":"closed","template":"templates\/page-converter.php","meta":{"_acf_changed":false,"footnotes":""},"categories":[7,16],"tags":[],"group":[],"pg":[],"class_list":["post-12223","page","type-page","status-publish","has-post-thumbnail","category-html-css","category-tool"],"acf":[],"_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":0,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages\/12223\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages\/173"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media\/12893"}],"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"},{"taxonomy":"group","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/group?post=12223"},{"taxonomy":"pg","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pg?post=12223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}