{"id":1175,"date":"2026-02-15T08:40:19","date_gmt":"2026-02-14T23:40:19","guid":{"rendered":"https:\/\/kyum.chu.jp\/wp\/?p=1175"},"modified":"2026-02-16T06:23:08","modified_gmt":"2026-02-15T21:23:08","slug":"css-%e8%89%b2%e6%8c%87%e5%ae%9a%e3%81%ae%e5%ae%9a%e7%be%a9%e6%96%b9%e6%b3%95","status":"publish","type":"post","link":"https:\/\/achamaweb.tech\/?p=1175","title":{"rendered":"CSS \u8272\u6307\u5b9a\u306e\u5b9a\u7fa9\u65b9\u6cd5"},"content":{"rendered":"\n<div class=\"block-group-box\">\n\n\n\n<h2 class=\"wp-block-heading\">RGB(#XXXXXX)\u306e\u66f8\u304d\u65b9<\/h2>\n\n\n\n<h4>1. 16\u9032\u6570\uff08Hex\uff09\u3068\u306e\u76f8\u4e92\u5909\u63db\u306e\u30b3\u30c4<\/h4>\nRGB\u306e\u5404\u5024\uff080\u301c255\uff09\u306f\u300116\u9032\u6570\uff0800\u301cFF\uff09\u3068\u5bfe\u5fdc\u3057\u3066\u3044\u307e\u3059\u3002 <br>\n\u7279\u306b**\u300c\u540c\u3058\u6570\u5b57\u306e\u4e26\u3073\u300d**\u3092\u899a\u3048\u308b\u3068\u3001\u30b3\u30fc\u30c9\u3092\u66f8\u304f\u30b9\u30d4\u30fc\u30c9\u304c\u4e0a\u304c\u308a\u307e\u3059\u3002<br>\n\n\u7121\u5f69\u8272\uff08\u30b0\u30ec\u30fc\u7cfb\uff09\u306e\u6cd5\u5247: R=G=B \u304c\u540c\u3058\u6570\u5024\u306a\u3089\u5fc5\u305a\u30b0\u30ec\u30fc\u306b\u306a\u308a\u307e\u3059\u3002<br>\nrgb(50, 50, 50)\uff1a\u6fc3\u3044\u30b0\u30ec\u30fc<br>\nrgb(200, 200, 200)\uff1a\u8584\u3044\u30b0\u30ec\u30fc<br>\n\nWeb\u5b89\u5168\u8272\u306e\u30b7\u30e7\u30fc\u30c8\u30ab\u30c3\u30c8: #336699 \u306e\u3088\u3046\u306a16\u9032\u6570\u306f\u3001RGB\u3060\u3068 rgb(51, 102, 153) \u306b\u306a\u308a\u307e\u3059\uff0851\u306e\u500d\u6570\uff09\u3002\n\n<h4>2. \u8272\u3092\u300c\u660e\u308b\u304f\u300d\u307e\u305f\u306f\u300c\u6697\u304f\u300d\u3059\u308b\u8a08\u7b97\u8853<\/h4>\nHSL\u3092\u4f7f\u308f\u305a\u306bRGB\u3060\u3051\u3067\u660e\u5ea6\u3092\u8abf\u6574\u3059\u308b\u5834\u5408\u3001\u6bd4\u7387\u3092\u610f\u8b58\u3057\u307e\u3059\u3002<br>\n\u660e\u308b\u304f\u3059\u308b: \u5404\u5024\u3092\u540c\u3058\u6bd4\u7387\u3067255\u306b\u8fd1\u3065\u3051\u308b\u3002<br>\n\n\u4f8b\uff1argb(100, 0, 0)\uff08\u6697\u3044\u8d64\uff09 \u2192 rgb(200, 100, 100)\uff08\u660e\u308b\u3044\u8d64\uff09<br>\n\n\u30b3\u30c4\uff1a\u5143\u306e\u8272\u306b\u300c\u767d rgb(255, 255, 255)\u300d\u3092\u6df7\u305c\u308b\u30a4\u30e1\u30fc\u30b8\u3067\u3059\u3002<br>\n\n\u6697\u304f\u3059\u308b: \u5404\u5024\u3092\u540c\u3058\u6bd4\u7387\u30670\u306b\u8fd1\u3065\u3051\u308b\u3002<br>\n\n\u4f8b\uff1argb(0, 255, 255)\uff08\u30b7\u30a2\u30f3\uff09 \u2192 rgb(0, 128, 128)\uff08\u6df1\u7dd1\u306b\u8fd1\u3044\u30b7\u30a2\u30f3\uff09<br>\n\n\u30b3\u30c4\uff1a\u5404\u5024\u3092\u534a\u5206\uff080.5\u500d\uff09\u306b\u3059\u308b\u3068\u3001\u8272\u5473\u3092\u4fdd\u3063\u305f\u307e\u307e\u6697\u304f\u3067\u304d\u307e\u3059\u3002<br>\n\n\n<h4>3. \u52a0\u6cd5\u6df7\u8272\u306e\u4ed5\u7d44\u307f\u3092\u5229\u7528\u3059\u308b<\/h4>\nRGB\u306f\u300c\u5149\u306e\u4e09\u539f\u8272\u300d\u306a\u306e\u3067\u3001\u6df7\u305c\u308b\u3068\u660e\u308b\u304f\u306a\u308a\u307e\u3059\u3002\u3053\u306e\u95a2\u4fc2\u3092\u77e5\u3063\u3066\u304a\u304f\u3068\u3001\u5fae\u8abf\u6574\u304c\u30b9\u30e0\u30fc\u30ba\u3067\u3059\u3002<br>\n\n\u88dc\u8272\uff08\u53cd\u5bfe\u306e\u8272\uff09\u306e\u898b\u3064\u3051\u65b9: 255\u304b\u3089\u4eca\u306e\u5024\u3092\u5f15\u304f\u3068\u3001\u305d\u306e\u8272\u306e\u53cd\u5bfe\u8272\uff08\u88dc\u8272\uff09\u304c\u4f5c\u308c\u307e\u3059\u3002<br>\n\n\u5143\u306e\u8272\uff1argb(255, 0, 0)\uff08\u8d64\uff09<br>\n\u88dc\u8272\uff1argb(0, 255, 255)\uff08\u30b7\u30a2\u30f3\uff09 \u203b 255 &#8211; 255 = 0, 255 &#8211; 0 = 255<br>\n\n\u9ec4\u8272\u3092\u4f5c\u308a\u305f\u3044\u3068\u304d: \u300c\u8d64\u300d\u3068\u300c\u7dd1\u300d\u3092\u6700\u5927\u306b\u3057\u307e\u3059\u3002 rgb(255, 255, 0)<br>\n\n<h4>4. \u30e2\u30c0\u30f3\u306a\u300c\u30ab\u30f3\u30de\u306a\u3057\u300d\u8a18\u6cd5\u3068\u900f\u660e\u5ea6<\/h4>\n\u6700\u65b0\u306eCSS\u3067\u306f\u3001rgba() \u3092\u4f7f\u308f\u306a\u304f\u3066\u3082 rgb() \u3060\u3051\u3067\u900f\u660e\u5ea6\u304c\u6271\u3048\u307e\u3059\u3002<br>\n\n\nCSS\n\/* \u5f93\u6765\u306e\u66f8\u304d\u65b9 *\/\nbackground-color: rgba(255, 0, 0, 0.5);<br>\n\n\n\/* \u30e2\u30c0\u30f3\u306a\u66f8\u304d\u65b9\uff08\u30b9\u30da\u30fc\u30b9\u533a\u5207\u308a\uff09 *\/<br>\n\nbackground-color: rgb(255 0 0 \/ 0.5);<br>\n\n\u3053\u306e\u300c\u30b9\u30e9\u30c3\u30b7\u30e5\u533a\u5207\u308a\u300d\u306e\u8a18\u6cd5\u306f\u3001\u5f8c\u8ff0\u3059\u308b CSS\u5909\u6570\uff08\u30ab\u30b9\u30bf\u30e0\u30d7\u30ed\u30d1\u30c6\u30a3\uff09 \u3068\u975e\u5e38\u306b\u76f8\u6027\u304c\u826f\u3044\u3067\u3059\u3002\n\n\n\n<style>\n        .picker-container { \n            display: flex; \n            flex-direction: row; \n            gap: 40px; \n            margin-top: 20px; \n        }\n        .picker-unit { \n            text-align: center; \n            background: white; \n            padding: 10px; \n            border-radius: 8px; \n            shadow: 0 4px 6px rgba(0,0,0,0.1); \n        }\n        \/* \u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u30ad\u30e3\u30f3\u30d0\u30b9 *\/\n        canvas { border: 1px solid #000; cursor: crosshair; display: block; }\n        .blue-slider { width: 256px; margin: 10px 0; }\n        \n        \/* \u30b5\u30f3\u30d7\u30eb\u8868\u793a\u30a8\u30ea\u30a2 *\/\n        #preview-area {\n            margin-top: 30px;\n            width: 200px;\n            height: 40px;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            border: 2px solid #333;\n            font-size: 24px;\n            font-weight: bold;\n            transition: 0.1s;\n        }\n                .info { \n\t\t\tfont-family: monospace; font-size: 14px; color: #333; line-height: 1.6; \n\t\t\tbackground-color: #f0f0f0; \/* \u5c11\u3057\u6697\u3081\u306e\u80cc\u666f *\/\n            border-radius: 6px;\n            border: 1px solid #dcdcdc;\n            box-shadow: \n                inset 2px 2px 5px rgba(0, 0, 0, 0.1), \/* \u5185\u5074\u306e\u5f71 *\/\n                inset -1px -1px 2px rgba(255, 255, 255, 0.7); \/* \u53cd\u5bfe\u5074\u306e\u30cf\u30a4\u30e9\u30a4\u30c8 *\/\n\t\t}\n\n<\/style>\n<div class=\"picker-container\">\n        <div class=\"picker-unit\">\n            <h3>\u80cc\u666f\u8272 (Background)<\/h3>\n            <canvas id=\"bgCanvas\" width=\"256\" height=\"256\"><\/canvas>\n            <input type=\"range\" id=\"bgBlue\" class=\"blue-slider\" min=\"0\" max=\"255\" value=\"255\">\n\t\t\t<div>\n\t            <span id=\"bgTextD\" class=\"info\">rgb(255, 255, 255)<\/span>\n\t            <span id=\"bgTextH\" class=\"info\">rgb(#FFFFFF)<\/span>\n\t        <\/div>\n        <\/div>\n\n        <div class=\"picker-unit\">\n            <h3>\u524d\u666f\u8272 (Foreground)<\/h3>\n            <canvas id=\"fgCanvas\" width=\"256\" height=\"256\"><\/canvas>\n            <input type=\"range\" id=\"fgBlue\" class=\"blue-slider\" min=\"0\" max=\"255\" value=\"0\">\n\t\t\t<div>\n\t            <span id=\"fgTextD\" class=\"info\">rgb(0, 0, 0)<\/span>\n\t            <span id=\"fgTextH\" class=\"info\">rgb(#000000)<\/span>\n\t\t\t<\/div>\n        <\/div>\n    <\/div>\n\n    <div id=\"preview-area\">Sample<\/div>\n\n    <script>\n        const bgState = { r: 255, g: 255, b: 255 };\n        const fgState = { r: 0, g: 0, b: 0 };\n\n\t\t\/\/ RGB\u3092HEX(16\u9032\u6570)\u306b\u5909\u63db\u3059\u308b\u95a2\u6570\n        function rgbToHex(r, g, b) {\n            return \"#\" + [r, g, b].map(x => {\n                const hex = x.toString(16).toUpperCase();\n                return hex.length === 1 ? \"0\" + hex : hex;\n            }).join(\"\");\n        }\n\n\t\t\/\/ \u8272\u6307\u5b9a\n        function initPicker(canvasId, sliderId, textId, state, isBg) {\n            const canvas = document.getElementById(canvasId);\n            const ctx = canvas.getContext('2d');\n            const slider = document.getElementById(sliderId);\n            const textDisplayDec = document.getElementById(textId + 'D');\n            const textDisplayHex = document.getElementById(textId + 'H');\n\n            \/\/ \u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u3092\u63cf\u753b (X=Red, Y=Green)\n            function drawCanvas() {\n                const b = slider.value;\n                for (let g = 0; g < 256; g++) {\n                    const gradient = ctx.createLinearGradient(0, 0, 256, 0);\n                    gradient.addColorStop(0, `rgb(0, ${g}, ${b})`);\n                    gradient.addColorStop(1, `rgb(255, ${g}, ${b})`);\n                    ctx.fillStyle = gradient;\n                    ctx.fillRect(0, g, 256, 1);\n                }\n            }\n\n            function updateColor(x, y) {\n                state.r = x;\n                state.g = y;\n                state.b = parseInt(slider.value);\n\t\t\t\tconst rgbStr = `rgb(${state.r}, ${state.g}, ${state.b})`;\n                textDisplayDec.textContent = rgbStr;\n\n\t\t\t\tconst hexStr = rgbToHex(state.r, state.g, state.b);\n\t\t\t\ttextDisplayHex.textContent = `rgb(${hexStr})`;\n\n                const preview = document.getElementById('preview-area');\n                if (isBg) {\n                    preview.style.backgroundColor = rgbStr;\n                } else {\n                    preview.style.color = rgbStr;\n                }\n            }\n\n            canvas.addEventListener('mousedown', (e) => {\n                const rect = canvas.getBoundingClientRect();\n                updateColor(Math.floor(e.clientX - rect.left), Math.floor(e.clientY - rect.top));\n            });\n\n            slider.addEventListener('input', () => {\n                drawCanvas();\n                updateColor(state.r, state.g);\n            });\n\n            drawCanvas();\n        }\n\n        \/\/ \u521d\u671f\u5316\n        initPicker('bgCanvas', 'bgBlue', 'bgText', bgState, true);\n        initPicker('fgCanvas', 'fgBlue', 'fgText', fgState, false);\n        \n        \/\/ \u521d\u56de\u306e\u898b\u305f\u76ee\u3092\u53cd\u6620\n        document.getElementById('preview-area').style.backgroundColor = \"rgb(255,255,255)\";\n        document.getElementById('preview-area').style.color = \"rgb(0,0,0)\";\n    <\/script>\n\n\n\n<\/div>\n<div class=\"block-group-box\">\n\n\n\n<h2 class=\"wp-block-heading\">HSLA(<strong>Hue<\/strong>,<strong>Saturation<\/strong>,<strong>Lightness<\/strong>,Alpha)\u306e\u66f8\u304d\u65b9<\/h2>\n\n\n\nHSLA\u306f\u3001\u76f4\u611f\u7684\u306b\u8272\u3092\u8abf\u6574\u3067\u304d\u308b\u975e\u5e38\u306b\u4fbf\u5229\u306a\u6307\u5b9a\u65b9\u6cd5\u3067\u3059\u3002<br>\nRGB\uff08\u8d64\u30fb\u7dd1\u30fb\u9752\uff09\u304c\u300c\u5149\u306e\u6df7\u3056\u308a\u5177\u5408\u300d\u3067\u8003\u3048\u308b\u306e\u306b\u5bfe\u3057\u3001HSLA\u306f**\u300c\u8272\u5473\u3001\u9bae\u3084\u304b\u3055\u3001\u660e\u308b\u3055\u300d**\u3068\u3044\u3046\u4eba\u9593\u304c\u8272\u3092\u611f\u3058\u308b\u8981\u7d20\u3067\u6307\u5b9a\u3057\u307e\u3059\u3002<br><br>\nHSLA\u306e\u57fa\u672c\u66f8\u5f0fCSS\u3067\u306f\u6b21\u306e\u3088\u3046\u306b\u8a18\u8ff0\u3057\u307e\u3059\u3002<br>\nhsla(H, S, L, A)\u5404\u30d1\u30e9\u30e1\u30fc\u30bf\u306e\u610f\u5473\u3068\u7bc4\u56f2\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002<br>\n\n<strong>1. H: Hue\uff08\u8272\u76f8\uff09<\/strong><br>\u8272\u306e\u7a2e\u985e\u30920\u301c360\u306e\u89d2\u5ea6\u3067\u6307\u5b9a\u3057\u307e\u3059\u3002\u30ab\u30e9\u30fc\u30db\u30a4\u30fc\u30eb\uff08\u8272\u76f8\u74b0\uff09\u3092\u30a4\u30e1\u30fc\u30b8\u3057\u3066\u304f\u3060\u3055\u3044\u3002<br>\n0 or 360: \u8d64120: \u7dd1240: \u9752\uff08\u5358\u4f4d\u306e deg \u306f\u7701\u7565\u53ef\u80fd\u3067\u3059\uff09<br>\n<strong>2. S: Saturation\uff08\u5f69\u5ea6\uff09<\/strong><br>\u8272\u306e\u9bae\u3084\u304b\u3055\u3092**0%\u301c100%**\u3067\u6307\u5b9a\u3057\u307e\u3059\u3002100%: \u6700\u3082\u9bae\u3084\u304b\uff08\u7d14\u8272\uff090%: \u5b8c\u5168\u306b\u304f\u3059\u3093\u3060\u8272\uff08\u7070\u8272\uff09<br>\n<strong>3. L: Lightness\uff08\u8f1d\u5ea6\/\u660e\u5ea6\uff09<\/strong><br>\u8272\u306e\u660e\u308b\u3055\u3092**0%\u301c100%**\u3067\u6307\u5b9a\u3057\u307e\u3059\u3002100%: \u771f\u3063\u767d50%: \u6700\u3082\u304d\u308c\u3044\u306b\u767a\u8272\u3059\u308b\u72b6\u614b0%: \u771f\u3063\u9ed2<br>\n<strong>4. A: Alpha\uff08\u4e0d\u900f\u660e\u5ea6\uff09<\/strong><br>\u8272\u306e\u900f\u3051\u5177\u5408\u30920\u301c1\u3001\u307e\u305f\u306f**0%\u301c100%**\u3067\u6307\u5b9a\u3057\u307e\u3059\u30021 (100%): \u5b8c\u5168\u306b\u4e0d\u900f\u660e0.5 (50%): \u534a\u900f\u660e0 (0%): \u5b8c\u5168\u306b\u900f\u660e\n\n\n\n<style>\n\/* \u89aa\u8981\u7d20\uff1a\u3053\u3053\u3092Flexbox\u306b\u3059\u308b *\/\n        .container {\n            display: flex;       \/* \u6a2a\u4e26\u3073\u306b\u3059\u308b *\/\n            flex-wrap: wrap;    \/* \u753b\u9762\u5e45\u304c\u72ed\u3044\u6642\u306b\u6298\u308a\u8fd4\u3059\uff08\u4efb\u610f\uff09 *\/\n            gap: 15px;          \/* \u5404\u30dc\u30c3\u30af\u30b9\u306e\u9593\u9694 *\/\n            padding: 20px;\n        }\n\n        .color-sample {\n            width: 200px;       \/* \u6a2a\u4e26\u3073\u7528\u306b\u5c11\u3057\u5e45\u3092\u8abf\u6574 *\/\n            padding: 15px;\n            border-radius: 8px;\n            color: white;\n            font-weight: bold;\n            text-shadow: 1px 1px 2px rgba(0,0,0,0.8);\n            text-align: center;\n            font-size: 0.9rem;\n        }\n\n        \/* \u5404\u8272\u306e\u5b9a\u7fa9 *\/\n        .red { background-color: hsla(0, 100%, 50%, 1); }\n        .blue-alpha { background-color: hsla(240, 100%, 50%, 0.5); }\n        .muted-green { background-color: hsla(120, 30%, 40%, 1); }\n        .pastel-pink { background-color: hsla(350, 100%, 88%, 1); color: #333; text-shadow: none; }\n<\/style>\n<div class=\"container\">\n        <div class=\"color-sample red\">hsla(0, 100%, 50%, 1)<br>\u7d14\u8272<\/div>\n        <div class=\"color-sample blue-alpha\">hsla(240, 100%, 50%, 0.5)<br>\u534a\u900f\u660e<\/div>\n        <div class=\"color-sample muted-green\">hsla(120, 30%, 40%, 1)<br>\u304f\u3059\u307f\u30ab\u30e9\u30fc<\/div>\n        <div class=\"color-sample pastel-pink\">hsla(350, 100%, 88%, 1)<br>\u30d1\u30b9\u30c6\u30eb<\/div>\n    <\/div>\n\n\n\n<style>\n        .control-panel {\n            background: white;\n            padding: 16px;\n            border-radius: 8px;\n            box-shadow: 0 4px 20px rgba(0,0,0,0.08);\n            display: flex;\n            flex-direction: column;\n            gap: 0px;\n            width: 240px;\n        }\n\n        .input-group {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n        }\n\n        .input-group label {\n            font-weight: bold;\n            color: #555;\n            flex: 1;\n        }\n\n        .input-group input {\n            width: 60px;\n            padding: 2px;\n            border: 1px solid #ccc;\n            border-radius: 6px;\n            font-family: monospace;\n            text-align: center;\n        }\n\n        \/* \u51f9\u307f\u578b\u306e\u8868\u793a\u67a0 *\/\n        .result-code {\n            margin-top: 10px;\n            padding: 12px;\n            background-color: #e9ecef;\n            border-radius: 8px;\n            border: 1px solid #ced4da;\n            box-shadow: inset 2px 2px 5px rgba(0,0,0,0.05);\n            font-family: monospace;\n            font-size: 1.1rem;\n            text-align: center;\n            color: #333;\n        }\n\n        \/* \u7d50\u679c\u30d7\u30ec\u30d3\u30e5\u30fc *\/\n        #hsla-preview {\n            margin-top: 4px;\n            width: 100%;\n            height: 40px;\n            border-radius: 12px;\n            border: 1px solid #ddd;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            font-size: 24px;\n            font-weight: bold;\n            transition: background-color 0.2s;\n            background-color: hsla(350, 100%, 88%, 1);\n        }\n    <\/style>\n\n<div class=\"control-panel\">\n        <div>HSLA \u30b3\u30f3\u30c8\u30ed\u30fc\u30eb<\/div>\n        \n        <div class=\"input-group\">\n            <label>H (\u8272\u76f8: 0-360)<\/label>\n            <input type=\"number\" id=\"h-val\" value=\"350\" min=\"0\" max=\"360\">\n        <\/div>\n        \n        <div class=\"input-group\">\n            <label>S (\u5f69\u5ea6: %)<\/label>\n            <input type=\"number\" id=\"s-val\" value=\"100\" min=\"0\" max=\"100\">\n        <\/div>\n        \n        <div class=\"input-group\">\n            <label>L (\u8f1d\u5ea6: %)<\/label>\n            <input type=\"number\" id=\"l-val\" value=\"88\" min=\"0\" max=\"100\">\n        <\/div>\n        \n        <div class=\"input-group\">\n            <label>A (\u4e0d\u900f\u660e\u5ea6: 0-1)<\/label>\n            <input type=\"number\" id=\"a-val\" value=\"1\" min=\"0\" max=\"1\" step=\"0.1\">\n        <\/div>\n\n        <div id=\"result-text\" class=\"result-code\">\n            hsla(350, 100%, 88%, 1)\n        <\/div>\n\n        <div id=\"hsla-preview\">SAMPLE<\/div>\n    <\/div>\n\n    <script>\n        const inputs = ['h-val', 's-val', 'l-val', 'a-val'].map(id => document.getElementById(id));\n        const resultText = document.getElementById('result-text');\n        const preview = document.getElementById('hsla-preview');\n\n        function updateHSLA() {\n            const h = inputs[0].value;\n            const s = inputs[1].value;\n            const l = inputs[2].value;\n            const a = inputs[3].value;\n\n            const hslaString = `hsla(${h}, ${s}%, ${l}%, ${a})`;\n            \n            \/\/ \u30c6\u30ad\u30b9\u30c8\u3068\u30d7\u30ec\u30d3\u30e5\u30fc\u3092\u66f4\u65b0\n            resultText.textContent = hslaString;\n            preview.style.backgroundColor = hslaString;\n\n            \/\/ \u80cc\u666f\u304c\u660e\u308b\u3059\u304e\u308b\u3068\u304d\u306f\u6587\u5b57\u8272\u3092\u9ed2\u306b\u3001\u6697\u3044\u3068\u304d\u306f\u767d\u306b\u3059\u308b\u7c21\u6613\u5224\u5b9a\n            preview.style.color = (l > 60) ? '#333' : '#fff';\n        }\n\n        \/\/ \u3059\u3079\u3066\u306e\u5165\u529b\u9805\u76ee\u306b\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\u3092\u8ffd\u52a0\n        inputs.forEach(input => {\n            input.addEventListener('input', updateHSLA);\n        });\n    <\/script>\n\n\n\n<\/div>\r\n<div class=\"block-group-box\">\n\n\n\n<h2 class=\"wp-block-heading\">\u8272\u306e\u76f4\u63a5\u6307\u5b9a<\/h2>\n\n\n\n<style>\n\/* \u89aa\u8981\u7d20\u3092\u8ffd\u52a0\u3057\u3066\u4e2d\u8eab\u3092\u6a2a\u4e26\u3073\u306b\u3059\u308b *\/\n    .color-list-wrapper {\n        display: flex;\n        flex-wrap: wrap; \/* \u753b\u9762\u5e45\u306b\u5408\u308f\u305b\u3066\u6298\u308a\u8fd4\u3059 *\/\n        gap: 10px;       \/* \u8981\u7d20\u9593\u306e\u4f59\u767d *\/\n        padding: 10px;\n        background-color: #f0f0f0;\n    }\n.color-container {\n            display: flex;\n            align-items: center;\n            margin-bottom: 2px;\n            background: white;\n            padding: 5px;\n            border-radius: 4px;\n            box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n            width: fit-content;\n            min-width: 300px;\n        }\n        \/* \u5de6\u5074\u306e100px\u56db\u89d2\u67a0 *\/\n        .color-box {\n            width: 100px;\n            height: 1rem;\n            border: 1px solid #ddd;\n            margin-right: 20px;\n            border-radius: 2px;\n        }\n        \/* \u53f3\u5074\u306e\u5b9a\u7fa9\u540d *\/\n        .color-name {\n            font-size: 1.1rem;\n            font-weight: bold;\n            color: #333;\n        }\n<\/style>\n\n<div class=\"color-list-wrapper\">\n\n    <div class=\"color-container\">\n        <div class=\"color-box\" style=\"background-color: Black;\"><\/div>\n        <div class=\"color-name\">Black<\/div>\n    <\/div>\n\n    <div class=\"color-container\">\n        <div class=\"color-box\" style=\"background-color: White;\"><\/div>\n        <div class=\"color-name\">White<\/div>\n    <\/div>\n\n    <div class=\"color-container\">\n        <div class=\"color-box\" style=\"background-color: Red;\"><\/div>\n        <div class=\"color-name\">Red<\/div>\n    <\/div>\n\n    <div class=\"color-container\">\n        <div class=\"color-box\" style=\"background-color: Blue;\"><\/div>\n        <div class=\"color-name\">Blue<\/div>\n    <\/div>\n\n    <div class=\"color-container\">\n        <div class=\"color-box\" style=\"background-color: Green;\"><\/div>\n        <div class=\"color-name\">Green<\/div>\n    <\/div>\n\n    <div class=\"color-container\">\n        <div class=\"color-box\" style=\"background-color: Yellow;\"><\/div>\n        <div class=\"color-name\">Yellow<\/div>\n    <\/div>\n\n    <div class=\"color-container\">\n        <div class=\"color-box\" style=\"background-color: Cyan;\"><\/div>\n        <div class=\"color-name\">Cyan \/ Aqua<\/div>\n    <\/div>\n\n    <div class=\"color-container\">\n        <div class=\"color-box\" style=\"background-color: Magenta;\"><\/div>\n        <div class=\"color-name\">Magenta \/ Fuchsia<\/div>\n    <\/div>\n\n    <div class=\"color-container\">\n        <div class=\"color-box\" style=\"background-color: Silver;\"><\/div>\n        <div class=\"color-name\">Silver<\/div>\n    <\/div>\n\n    <div class=\"color-container\">\n        <div class=\"color-box\" style=\"background-color: Gray;\"><\/div>\n        <div class=\"color-name\">Gray<\/div>\n    <\/div>\n\n    <div class=\"color-container\">\n        <div class=\"color-box\" style=\"background-color: Orange;\"><\/div>\n        <div class=\"color-name\">Orange<\/div>\n    <\/div>\n\n    <div class=\"color-container\">\n        <div class=\"color-box\" style=\"background-color: Purple;\"><\/div>\n        <div class=\"color-name\">Purple<\/div>\n    <\/div>\n\n    <div class=\"color-container\">\n        <div class=\"color-box\" style=\"background-color: Brown;\"><\/div>\n        <div class=\"color-name\">Brown<\/div>\n    <\/div>\n\n    <div class=\"color-container\">\n        <div class=\"color-box\" style=\"background-color: Pink;\"><\/div>\n        <div class=\"color-name\">Pink<\/div>\n    <\/div>\n\n    <div class=\"color-container\">\n        <div class=\"color-box\" style=\"background-color: Gold;\"><\/div>\n        <div class=\"color-name\">Gold<\/div>\n    <\/div>\n<\/div>\n\n\n\n\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>RGB(#XXXXXX)\u306e\u66f8\u304d\u65b9 1. 16\u9032\u6570\uff08Hex\uff09\u3068\u306e\u76f8\u4e92\u5909\u63db\u306e\u30b3\u30c4 RGB\u306e\u5404\u5024\uff080\u301c255\uff09\u306f\u300116\u9032\u6570\uff0800\u301cFF\uff09\u3068\u5bfe\u5fdc\u3057\u3066\u3044\u307e\u3059\u3002 \u7279\u306b**\u300c\u540c\u3058\u6570\u5b57\u306e\u4e26\u3073\u300d**\u3092\u899a\u3048\u308b\u3068\u3001\u30b3\u30fc\u30c9\u3092\u66f8\u304f\u30b9\u30d4\u30fc\u30c9\u304c\u4e0a\u304c\u308a [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[10],"tags":[],"class_list":["post-1175","post","type-post","status-publish","format-standard","hentry","category-css"],"acf":[],"_links":{"self":[{"href":"https:\/\/achamaweb.tech\/index.php?rest_route=\/wp\/v2\/posts\/1175","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/achamaweb.tech\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/achamaweb.tech\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/achamaweb.tech\/index.php?rest_route=\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/achamaweb.tech\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1175"}],"version-history":[{"count":36,"href":"https:\/\/achamaweb.tech\/index.php?rest_route=\/wp\/v2\/posts\/1175\/revisions"}],"predecessor-version":[{"id":1212,"href":"https:\/\/achamaweb.tech\/index.php?rest_route=\/wp\/v2\/posts\/1175\/revisions\/1212"}],"wp:attachment":[{"href":"https:\/\/achamaweb.tech\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1175"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/achamaweb.tech\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1175"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/achamaweb.tech\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}