{"id":213,"date":"2025-07-23T08:01:35","date_gmt":"2025-07-22T23:01:35","guid":{"rendered":"https:\/\/kyum.chu.jp\/wp\/?p=213"},"modified":"2025-08-25T21:38:51","modified_gmt":"2025-08-25T12:38:51","slug":"border%e8%a8%ad%e5%ae%9a%e3%81%ae%e7%a2%ba%e8%aa%8d","status":"publish","type":"post","link":"https:\/\/achamaweb.tech\/?p=213","title":{"rendered":"Border\u8a2d\u5b9a\u306e\u78ba\u8a8d"},"content":{"rendered":"\n<style>\n    table {\n        width: 100%;\n        border-collapse: collapse; \/* \u30dc\u30fc\u30c0\u30fc\u3092\u91cd\u306d\u3066\u8868\u793a *\/\n        margin-top: 20px;\n        margin-bottom: 20px;\n    }\n\n    th, td {\n        border: 1px solid #ddd;\n        padding: 10px 15px;\n        text-align: left;\n        vertical-align: top;\n    }\n\n    th {\n        background-color: #e9ecef;\n        font-weight: bold;\n        color: #555;\n    }\n\n    code {\n        background-color: #f0f0f0;\n        padding: 2px 5px;\n        border-radius: 3px;\n        font-family: 'Consolas', 'Monaco', monospace;\n        color: #c7254e; \/* \u30b3\u30fc\u30c9\u306e\u8272 *\/\n        white-space: nowrap; \/* \u30b3\u30fc\u30c9\u304c\u9014\u4e2d\u3067\u6539\u884c\u3055\u308c\u306a\u3044\u3088\u3046\u306b *\/\n    }\n\n    pre {\n        background-color: #e9ecef;\n        padding: 15px;\n        border-radius: 5px;\n        overflow-x: auto; \/* \u306f\u307f\u51fa\u3057\u305f\u5834\u5408\u306b\u30b9\u30af\u30ed\u30fc\u30eb\u30d0\u30fc\u3092\u8868\u793a *\/\n        font-family: 'Consolas', 'Monaco', monospace;\n        color: #34495e; \/* \u30b3\u30fc\u30c9\u30d6\u30ed\u30c3\u30af\u306e\u8272 *\/\n        font-size: 0.9em;\n    }\n\n    \/* \u30d7\u30ec\u30d3\u30e5\u30fc\u30dc\u30c3\u30af\u30b9\u306e\u5171\u901a\u30b9\u30bf\u30a4\u30eb *\/\n    .preview-box {\n        width: 100px; \/* \u56fa\u5b9a\u5e45 *\/\n        height: 50px; \/* \u56fa\u5b9a\u9ad8\u3055 *\/\n        background-color: #fefefe;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        font-size: 0.9em;\n        color: #333;\n        margin: 0 auto; \/* \u4e2d\u592e\u5bc4\u305b *\/\n        box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n    }\n<\/style>\n\n<div class=\"block-group-box\">\n<table>\n    <thead>\n        <tr>\n            <th>\u30d7\u30ed\u30d1\u30c6\u30a3\u5024<\/th>\n            <th>CSS\u30b3\u30fc\u30c9\u4f8b<\/th>\n            <th>\u30d7\u30ec\u30d3\u30e5\u30fc<\/th>\n        <\/tr>\n    <\/thead>\n            <tbody>\n                <tr>\n                    <td class=\"property-value-cell\">none \/ hidden<div class=\"property-description\">\u30dc\u30fc\u30c0\u30fc\u3092\u8868\u793a\u3057\u306a\u3044<\/div><\/td>\n                    <td><code>border: 5px none red;<\/code><br><code>border: 5px hidden red;<\/code><\/td>\n                    <td><div class=\"preview-box\" style=\"border: 5px none red;\">none<\/div><\/td>\n                <\/tr>\n                <tr>\n                    <td class=\"property-value-cell\">solid<div class=\"property-description\">\u5b9f\u7dda<\/div><\/td>\n                    <td><code>border: 5px solid red;<\/code><\/td>\n                    <td><div class=\"preview-box\" style=\"border: 5px solid red;\">solid<\/div><\/td>\n                <\/tr>\n                <tr>\n                    <td class=\"property-value-cell\">dashed<div class=\"property-description\">\u7834\u7dda<\/div><\/td>\n                    <td><code>border: 5px dashed blue;<\/code><\/td>\n                    <td><div class=\"preview-box\" style=\"border: 5px dashed blue;\">dashed<\/div><\/td>\n                <\/tr>\n                <tr>\n                    <td class=\"property-value-cell\">dotted<div class=\"property-description\">\u70b9\u7dda<\/div><\/td>\n                    <td><code>border: 5px dotted green;<\/code><\/td>\n                    <td><div class=\"preview-box\" style=\"border: 5px dotted green;\">dotted<\/div><\/td>\n                <\/tr>\n                <tr>\n                    <td class=\"property-value-cell\">double<div class=\"property-description\">\u4e8c\u91cd\u7dda<\/div><\/td>\n                    <td><code>border: 8px double purple;<\/code><\/td>\n                    <td><div class=\"preview-box\" style=\"border: 8px double purple;\">double<\/div><\/td>\n                <\/tr>\n                <tr>\n                    <td class=\"property-value-cell\">groove<div class=\"property-description\">\u6e9d\u306e\u3088\u3046\u306a\u7acb\u4f53\u7684\u306a\u7dda<\/div><\/td>\n                    <td><code>border: 5px groove gray;<\/code><\/td>\n                    <td><div class=\"preview-box\" style=\"border: 5px groove gray;\">groove<\/div><\/td>\n                <\/tr>\n                <tr>\n                    <td class=\"property-value-cell\">ridge<div class=\"property-description\">\u9686\u8d77\u3057\u305f\u3088\u3046\u306a\u7acb\u4f53\u7684\u306a\u7dda<\/div><\/td>\n                    <td><code>border: 5px ridge brown;<\/code><\/td>\n                    <td><div class=\"preview-box\" style=\"border: 5px ridge brown;\">ridge<\/div><\/td>\n                <\/tr>\n                <tr>\n                    <td class=\"property-value-cell\">inset<div class=\"property-description\">\u8981\u7d20\u5168\u4f53\u304c\u5185\u5074\u306b\u51f9\u3093\u3067\u3044\u308b\u3088\u3046\u306b\u898b\u3048\u308b\u7dda<\/div><\/td>\n                    <td><code>border: 5px inset orange;<\/code><\/td>\n                    <td><div class=\"preview-box\" style=\"border: 5px inset orange;\">inset<\/div><\/td>\n                <\/tr>\n                <tr>\n                    <td class=\"property-value-cell\">outset<div class=\"property-description\">\u8981\u7d20\u5168\u4f53\u304c\u5916\u5074\u306b\u98db\u3073\u51fa\u3057\u3066\u3044\u308b\u3088\u3046\u306b\u898b\u3048\u308b\u7dda<\/div><\/td>\n                    <td><code>border: 5px outset teal;<\/code><\/td>\n                    <td><div class=\"preview-box\" style=\"border: 5px outset teal;\">outset<\/div><\/td>\n                <\/tr>\n            <\/tbody>\n<\/table>\n<\/div>\n\n\n\n\n    <style>\n\n        \/* \u5168\u4f53\u3092\u56f2\u3080\u30b3\u30f3\u30c6\u30ca *\/\n        .controls-box {\n            display: flex;\n            flex-direction: column; \/* \u30c7\u30d5\u30a9\u30eb\u30c8\u306f\u7e26\u4e26\u3073 *\/\n            gap: 20px; \/* \u5404\u30b3\u30f3\u30c6\u30ca\u9593\u306e\u30b9\u30da\u30fc\u30b9 *\/\n            padding: 20px;\n            background-color: #fff;\n            border-radius: 8px;\n            box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n        }\n\n        \/* ------------------------------------- *\/\n        \/* \u5404\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u57fa\u672c\u30b9\u30bf\u30a4\u30eb *\/\n        .controls-container {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 20px;\n            padding: 20px; \/* \u500b\u5225\u306e\u30d1\u30c7\u30a3\u30f3\u30b0\u3092\u7dad\u6301 *\/\n            background-color: #f9f9f9; \/* \u80cc\u666f\u8272\u3092\u5c11\u3057\u5909\u3048\u3066\u533a\u5225 *\/\n            border-radius: 8px;\n            box-shadow: inset 0 0 5px rgba(0,0,0,0.05); \/* \u8efd\u3044\u5185\u5074\u306e\u5f71 *\/\n        }\n        .control-group {\n            display: flex;\n            flex-direction: column;\n        }\n        .control-group label {\n            margin-bottom: 5px;\n            font-weight: bold;\n            color: #555;\n        }\n        .control-group select,\n        .control-group input[type=\"number\"],\n        .control-group input[type=\"color\"] {\n            padding: 8px;\n            border: 1px solid #ccc;\n            border-radius: 4px;\n            font-size: 1em;\n        }\n        \n        \/* \u67a0\u7dda(\u30dc\u30fc\u30c0\u30fc)\u8a2d\u5b9a\u30b0\u30eb\u30fc\u30d7 *\/\n        .border-settings-group {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 15px; \/* \u30dc\u30fc\u30c0\u30fc\u8a2d\u5b9a\u5185\u306e\u30a2\u30a4\u30c6\u30e0\u9593\u306e\u9699\u9593 *\/\n            padding: 15px;\n            border: 1px solid #e0e0e0; \/* \u30b0\u30eb\u30fc\u30d7\u3092\u56f2\u3080\u8584\u3044\u7dda *\/\n            border-radius: 5px;\n            background-color: #fefefe;\n            align-items: flex-end; \/* \u9805\u76ee\u3092\u4e0b\u63c3\u3048 *\/\n        }\n        .border-settings-group h4 {\n            width: 100%; \/* \u898b\u51fa\u3057\u3092\u4e00\u884c\u3067\u8868\u793a *\/\n            margin: 0 0 10px 0;\n            color: #444;\n            border-bottom: 1px solid #eee;\n            padding-bottom: 5px;\n        }\n\n        .code-apply-container {\n            display: flex;\n            flex-direction: column; \/* 590px\u672a\u6e80\u3067\u306f\u7e26\u4e26\u3073 *\/\n            align-items: flex-start; \/* \u5de6\u63c3\u3048 *\/\n            gap: 15px;\n            padding: 20px; \/* \u500b\u5225\u306e\u30d1\u30c7\u30a3\u30f3\u30b0\u3092\u7dad\u6301 *\/\n            background-color: #f9f9f9; \/* \u80cc\u666f\u8272\u3092\u5c11\u3057\u5909\u3048\u3066\u533a\u5225 *\/\n            border-radius: 8px;\n            box-shadow: inset 0 0 5px rgba(0,0,0,0.05); \/* \u8efd\u3044\u5185\u5074\u306e\u5f71 *\/\n        }\n        .code-area {\n            flex-grow: 1;\n            width: 100%; \/* \u7e26\u4e26\u3073\u6642\u306b\u5e45\u3092100%\u306b *\/\n            display: flex;\n            flex-direction: column;\n        }\n        #cssCode {\n            width: 100%;\n            padding: 10px;\n            border: 1px solid #ccc;\n            border-radius: 4px;\n            font-family: 'Consolas', 'Monaco', monospace;\n            font-size: 0.9em;\n            background-color: #fefefe;\n            resize: vertical;\n        }\n        #applyButton {\n            padding: 10px 20px;\n            background-color: #28a745;\n            color: white;\n            border: none;\n            border-radius: 5px;\n            cursor: pointer;\n            font-size: 1em;\n            transition: background-color 0.3s ease;\n            align-self: flex-start; \/* \u30dc\u30bf\u30f3\u3092\u5de6\u5bc4\u305b *\/\n        }\n        #applyButton:hover {\n            background-color: #218838;\n        }\n\n        .preview-container {\n            padding: 20px; \/* \u500b\u5225\u306e\u30d1\u30c7\u30a3\u30f3\u30b0\u3092\u7dad\u6301 *\/\n            background-color: #f9f9f9; \/* \u80cc\u666f\u8272\u3092\u5c11\u3057\u5909\u3048\u3066\u533a\u5225 *\/\n            border-radius: 8px;\n            box-shadow: inset 0 0 5px rgba(0,0,0,0.05); \/* \u8efd\u3044\u5185\u5074\u306e\u5f71 *\/\n            text-align: center;\n        }\n        #previewBox {\n            width: 200px;\n            height: 100px;\n            border: 5px solid #006400; \/* \u521d\u671f\u5024 *\/\n            border-radius: 0px; \/* \u521d\u671f\u5024 *\/\n            background-color: #f0f0f0; \/* \u521d\u671f\u5024 *\/\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            font-size: 1.2em;\n            font-weight: bold;\n            color: #555;\n            margin: 20px auto;\n            box-shadow: 0 4px 8px rgba(0,0,0,0.2);\n        }\n\n        \/* ------------------------------------- *\/\n        \/* \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u306e\u30e1\u30c7\u30a3\u30a2\u30af\u30a8\u30ea *\/\n\n        \/* \u753b\u9762\u304c590px\u304b\u3089800px\u672a\u6e80\u306e\u5834\u5408 *\/\n        @media (min-width: 590px) and (max-width: 799px) {\n            .controls-box {\n                flex-direction: column; \/* controls-box\u5168\u4f53\u306f\u7e26\u4e26\u3073\u3092\u7dad\u6301 *\/\n            }\n\n            \/* controls-container\u3068code-apply-container\u3092\u6a2a\u306b\u4e26\u3079\u308b *\/\n            .controls-container,\n            .code-apply-container {\n                flex-direction: row; \/* \u6a2a\u4e26\u3073 *\/\n                flex-wrap: wrap; \/* \u5fc5\u8981\u306b\u5fdc\u3058\u3066\u6298\u308a\u8fd4\u3057 *\/\n                padding: 15px; \/* \u5c11\u3057\u30d1\u30c7\u30a3\u30f3\u30b0\u3092\u6e1b\u3089\u3059 *\/\n            }\n            .code-apply-container {\n                align-items: flex-end; \/* \u30dc\u30bf\u30f3\u3068\u30c6\u30ad\u30b9\u30c8\u30a8\u30ea\u30a2\u306e\u4e0b\u3092\u63c3\u3048\u308b *\/\n            }\n            .code-area {\n                width: auto; \/* flex-grow\u304c\u512a\u5148\u3055\u308c\u308b\u3088\u3046\u306bauto\u306b *\/\n            }\n            #applyButton {\n                align-self: flex-end; \/* \u30dc\u30bf\u30f3\u3092\u4e0b\u63c3\u3048 *\/\n            }\n            \n            \/* \u30dc\u30fc\u30c0\u30fc\u8a2d\u5b9a\u30b0\u30eb\u30fc\u30d7\u3082\u6a2a\u4e26\u3073 *\/\n            .border-settings-group {\n                flex-direction: row;\n                align-items: flex-end;\n            }\n            .border-settings-group h4 {\n                width: 100%; \/* \u898b\u51fa\u3057\u306f\u305d\u306e\u307e\u307e *\/\n                text-align: left;\n                padding-bottom: 5px;\n            }\n        }\n\n        \/* \u753b\u9762\u304c800px\u4ee5\u4e0a\u306e\u5834\u5408 *\/\n        @media (min-width: 800px) {\n            .controls-box {\n                flex-direction: row; \/* \u5168\u3066\u6a2a\u4e26\u3073 *\/\n                align-items: flex-start; \/* \u4e0a\u63c3\u3048 *\/\n                flex-wrap: wrap; \/* \u5fc5\u8981\u306b\u5fdc\u3058\u3066\u6298\u308a\u8fd4\u3057 *\/\n            }\n\n            \/* \u5404\u30b3\u30f3\u30c6\u30ca\u304c\u5747\u7b49\u306b\u30b9\u30da\u30fc\u30b9\u3092\u4f7f\u3046\u3088\u3046\u306b *\/\n            .controls-container,\n            .code-apply-container,\n            .preview-container {\n                flex: 1; \/* \u5404\u8981\u7d20\u304c\u5229\u7528\u53ef\u80fd\u306a\u30b9\u30da\u30fc\u30b9\u3092\u5747\u7b49\u306b\u5206\u914d *\/\n                min-width: 280px; \/* \u6700\u5c0f\u5e45\u3092\u8a2d\u5b9a\u3057\u3066\u6f70\u308c\u3059\u304e\u306a\u3044\u3088\u3046\u306b *\/\n            }\n\n            .controls-container {\n                flex-direction: column; \/* \u8a2d\u5b9a\u9805\u76ee\u306f\u7e26\u306b\u4e26\u3079\u308b *\/\n                align-items: flex-start;\n            }\n\n            .code-apply-container {\n                flex-direction: column; \/* \u30b3\u30fc\u30c9\u30a8\u30ea\u30a2\u3068\u30dc\u30bf\u30f3\u306f\u7e26\u306b *\/\n                align-items: flex-start;\n            }\n            .code-area {\n                width: 100%;\n            }\n            #applyButton {\n                align-self: flex-start;\n            }\n\n            \/* \u30dc\u30fc\u30c0\u30fc\u8a2d\u5b9a\u30b0\u30eb\u30fc\u30d7\u3082\u6a2a\u4e26\u3073 *\/\n            .border-settings-group {\n                flex-direction: row; \/* \u6a2a\u4e26\u3073 *\/\n                align-items: flex-end; \/* \u9805\u76ee\u3092\u4e0b\u63c3\u3048 *\/\n            }\n            .border-settings-group h4 {\n                width: 100%; \/* \u898b\u51fa\u3057\u306f\u305d\u306e\u307e\u307e *\/\n                text-align: left;\n                padding-bottom: 5px;\n            }\n    <\/style>\n\n    <div class=\"controls-box\">\n        <div class=\"controls-container\">\n\t\t    <div class=\"border-settings-group\">\n\t\t        <h4>\u67a0\u7dda(\u30dc\u30fc\u30c0\u30fc)<\/h4>\n\t\t        <div class=\"control-group\">\n\t\t            <label for=\"borderStyle\">\u30b9\u30bf\u30a4\u30eb:<\/label>\n\t\t            <select id=\"borderStyle\">\n\t\t                <option value=\"none\">none<\/option>\n\t\t                <option value=\"solid\" selected>solid<\/option>\n\t\t                <option value=\"dashed\">dashed<\/option>\n\t\t                <option value=\"dotted\">dotted<\/option>\n\t\t                <option value=\"double\">double<\/option>\n\t\t                <option value=\"groove\">groove<\/option>\n\t\t                <option value=\"ridge\">ridge<\/option>\n\t\t                <option value=\"inset\">inset<\/option>\n\t\t                <option value=\"outset\">outset<\/option>\n\t\t            <\/select>\n\t\t        <\/div>\n\n\t\t        <div class=\"control-group\">\n\t\t            <label for=\"borderWidth\">\u5e45 (px):<\/label>\n\t\t            <input type=\"number\" id=\"borderWidth\" value=\"5\" min=\"0\" max=\"15\">\n\t\t        <\/div>\n\n\t\t        <div class=\"control-group\">\n\t\t            <label for=\"borderColor\">\u8272:<\/label>\n\t\t            <input type=\"color\" id=\"borderColor\" value=\"#006400\">\n\t\t        <\/div>\n\t\t    <\/div>\n\n            <div class=\"control-group\">\n                <label for=\"borderRadius\">\u89d2\u4e38\u3081 (px):<\/label>\n                <input type=\"number\" id=\"borderRadius\" value=\"0\" min=\"0\" max=\"50\">\n            <\/div>\n            \n            <div class=\"control-group\">\n                <label for=\"backgroundColor\">\u80cc\u666f\u8272:<\/label>\n                <input type=\"color\" id=\"backgroundColor\" value=\"#f0f0f0\">\n            <\/div>\n        <\/div>\n\n        <div class=\"code-apply-container\">\n            <h3>CSS\u30b3\u30fc\u30c9\u3068\u9069\u7528<\/h3>\n            <div class=\"code-area\">\n                <label for=\"cssCode\">\u53cd\u6620CSS\u30b3\u30fc\u30c9:<\/label>\n                <textarea id=\"cssCode\" rows=\"8\" readonly>\nborder: 5px solid #006400;\nborder-radius: 0px;\nbackground-color: #f0f0f0;<\/textarea>\n            <\/div>\n            <button id=\"applyButton\">\u9069\u7528<\/button>\n        <\/div>\n\n        <div class=\"preview-container\">\n            <h3>\u30d7\u30ec\u30d3\u30e5\u30fc<\/h3>\n            <div id=\"previewBox\">\n                \u30d7\u30ec\u30d3\u30e5\u30fc\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        \/\/ \u5404\u8981\u7d20\u3092\u53d6\u5f97\n        const borderStyleSelect = document.getElementById('borderStyle');\n        const borderWidthInput = document.getElementById('borderWidth');\n        const borderColorInput = document.getElementById('borderColor');\n        const borderRadiusInput = document.getElementById('borderRadius'); \/\/ \u65b0\u3057\u304f\u8ffd\u52a0\n        const backgroundColorInput = document.getElementById('backgroundColor'); \/\/ \u65b0\u3057\u304f\u8ffd\u52a0\n        const cssCodeTextArea = document.getElementById('cssCode');\n        const applyButton = document.getElementById('applyButton');\n        const previewBox = document.getElementById('previewBox');\n\n        \/\/ CSS\u30b3\u30fc\u30c9\u3092\u751f\u6210\u3057\u3066TextArea\u306b\u8868\u793a\u3059\u308b\u95a2\u6570\n        function updateCssCode() {\n            const style = borderStyleSelect.value;\n            let width = parseInt(borderWidthInput.value);\n            const color = borderColorInput.value;\n            let radius = parseInt(borderRadiusInput.value); \/\/ \u65b0\u3057\u304f\u8ffd\u52a0\n            const bgColor = backgroundColorInput.value; \/\/ \u65b0\u3057\u304f\u8ffd\u52a0\n\n            \/\/ \u5e45\u3068\u89d2\u4e38\u3081\u306e\u7bc4\u56f2\u3092\u5236\u9650\n            width = Math.max(0, Math.min(15, width));\n            borderWidthInput.value = width; \n            radius = Math.max(0, Math.min(50, radius)); \/\/ \u89d2\u4e38\u3081\u306e\u7bc4\u56f2\u3092\u5236\u9650\n            borderRadiusInput.value = radius; \n\n            const cssString = \n`border: ${width}px ${style} ${color};\nborder-radius: ${radius}px;\nbackground-color: ${bgColor};`; \/\/ CSS\u6587\u5b57\u5217\u306b\u89d2\u4e38\u3081\u3068\u80cc\u666f\u8272\u3092\u8ffd\u52a0\n            cssCodeTextArea.value = cssString;\n        }\n\n        \/\/ \u30dc\u30fc\u30c0\u30fc\u3092\u30d7\u30ec\u30d3\u30e5\u30fc\u306b\u53cd\u6620\u3059\u308b\u95a2\u6570\n        function applyBorderToPreview() {\n            const cssString = cssCodeTextArea.value;\n            \/\/ cssText \u3092\u4f7f\u3046\u3068\u3001\u65e2\u5b58\u306e\u30b9\u30bf\u30a4\u30eb\u304c\u3059\u3079\u3066\u4e0a\u66f8\u304d\u3055\u308c\u308b\u305f\u3081\u3001\n            \/\/ \u30d7\u30ec\u30d3\u30e5\u30fc\u30dc\u30c3\u30af\u30b9\u306e\u57fa\u672c\u7684\u306a\u30b9\u30bf\u30a4\u30eb\u3082\u518d\u6307\u5b9a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002\n            previewBox.style.cssText = cssString + `\n                                       width: 200px; height: 100px; \n                                       display: flex; justify-content: center; align-items: center; \n                                       font-size: 1.2em; font-weight: bold; color: #555; \n                                       margin: 20px auto; box-shadow: 0 4px 8px rgba(0,0,0,0.2);`;\n        }\n\n        \/\/ \u5404\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u306e\u5909\u66f4\u3092\u76e3\u8996\u3057\u3001CSS\u30b3\u30fc\u30c9\u3092\u66f4\u65b0\n        borderStyleSelect.addEventListener('change', updateCssCode);\n        borderWidthInput.addEventListener('input', updateCssCode); \n        borderColorInput.addEventListener('input', updateCssCode);\n        borderRadiusInput.addEventListener('input', updateCssCode); \/\/ \u65b0\u3057\u304f\u8ffd\u52a0\n        backgroundColorInput.addEventListener('input', updateCssCode); \/\/ \u65b0\u3057\u304f\u8ffd\u52a0\n\n        \/\/ \u9069\u7528\u30dc\u30bf\u30f3\u304c\u62bc\u3055\u308c\u305f\u3089\u30d7\u30ec\u30d3\u30e5\u30fc\u306b\u53cd\u6620\n        applyButton.addEventListener('click', applyBorderToPreview);\n\n        \/\/ \u30da\u30fc\u30b8\u8aad\u307f\u8fbc\u307f\u6642\u306b\u4e00\u5ea6\u66f4\u65b0\u3057\u3066\u521d\u671f\u8868\u793a\u3092\u9069\u7528\n        updateCssCode(); \/\/ \u307e\u305aCSS\u30b3\u30fc\u30c9\u3092\u751f\u6210\n        applyBorderToPreview(); \/\/ \u305d\u306eCSS\u30b3\u30fc\u30c9\u3092\u30d7\u30ec\u30d3\u30e5\u30fc\u306b\u9069\u7528\n    <\/script>\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u30d7\u30ed\u30d1\u30c6\u30a3\u5024 CSS\u30b3\u30fc\u30c9\u4f8b \u30d7\u30ec\u30d3\u30e5\u30fc none \/ hidden \u30dc\u30fc\u30c0\u30fc\u3092\u8868\u793a\u3057\u306a\u3044 border: 5px none red;border: 5px hidden red; none solid \u5b9f\u7dda borde [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[10,15],"tags":[],"class_list":["post-213","post","type-post","status-publish","format-standard","hentry","category-css","category-web-development"],"acf":[],"_links":{"self":[{"href":"https:\/\/achamaweb.tech\/index.php?rest_route=\/wp\/v2\/posts\/213","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/achamaweb.tech\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=213"}],"version-history":[{"count":6,"href":"https:\/\/achamaweb.tech\/index.php?rest_route=\/wp\/v2\/posts\/213\/revisions"}],"predecessor-version":[{"id":344,"href":"https:\/\/achamaweb.tech\/index.php?rest_route=\/wp\/v2\/posts\/213\/revisions\/344"}],"wp:attachment":[{"href":"https:\/\/achamaweb.tech\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=213"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/achamaweb.tech\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=213"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/achamaweb.tech\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}