{"id":6124,"date":"2024-10-06T06:46:30","date_gmt":"2024-10-05T21:46:30","guid":{"rendered":"https:\/\/code-plus.jp\/gp\/?page_id=6124"},"modified":"2024-10-06T06:46:30","modified_gmt":"2024-10-05T21:46:30","slug":"text-replacer-px-rem","status":"publish","type":"page","link":"https:\/\/code-plus.jp\/gp\/tools\/text-replacer-px-rem\/","title":{"rendered":"px \u2194 rem \u4e00\u62ec\u5909\u63db\u30c4\u30fc\u30eb\uff5cCSS\u306e\u5358\u4f4d\u3092\u307e\u3068\u3081\u3066\u7f6e\u63db"},"content":{"rendered":"<!-- \u0f3b\u273f\ud835\udc0f\ud835\udc00\ud835\udc06\ud835\udc04\u0f3a -->\n<!-- \u0f3b.mezzala\uff08\u4f59\u767d\u8abf\u6574\uff1apage\u4e0a\uff09\u0f3a -->\n<hr class=\"spacer-mezzala\" \/>\n\n\n\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: 3rem;\n\tline-height: initial;\n\tfont-size: 0;\n\tletter-spacing: 0;\n\toverflow: hidden;\n}\n\n.zaratan .breadcrumb.leckermaul li {\n\tdisplay: inline;\n\tline-height: 1.6;\n\tfont-size: clamp(0.775rem, calc(0.775rem + ((1vw - 0.225rem) * 0.1563)), 0.8750rem);\n}\n\n.zaratan .breadcrumb.leckermaul li>*,\n.zaratan .breadcrumb.leckermaul li::before {\n\tposition: relative;\n\ttop: 0.125em;\n\tdisplay: inline-flex;\n\talign-items: center;\n}\n\n.zaratan .breadcrumb.leckermaul a {\n\tdisplay: inline;\n\tcolor: var(--c-notice-600, hsl(240, 32%, 53%));\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-600, hsl(224, 6%, 43%));\n}\n\n@media (any-hover:hover) {\n\t.zaratan .breadcrumb.leckermaul a:hover {\n\t\tcolor: var(--c-notice-600, hsl(240, 32%, 53%));\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-notice-600, hsl(240, 32%, 53%))\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\">px \u2194 rem \u4e00\u62ec\u5909\u63db\u30c4\u30fc\u30eb\uff5cCSS\u306e\u5358\u4f4d\u3092\u307e\u3068\u3081\u3066\u7f6e\u63db<\/span><\/li>    <!-- \/\/\/if (is_page()) -->\n\n  <\/ul>\n<\/nav><\/div>\n  <\/header><!-- \/\/\/.inheader -->\n\n\n\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\" style=\"contain-intrinsic-size:1000px;\">\n    <header class=\"section__inheader mx-auto\">\n      <div class=\"hgroup-wrapper d-iblock mb-0.5r\">\n        <h1 class=\"fz-xxl hdg-page mb-0.25pc\"><span>px \u2194 rem \u4e00\u62ec\u5909\u63db\u30c4\u30fc\u30eb\uff5cCSS\u306e\u5358\u4f4d\u3092\u307e\u3068\u3081\u3066\u7f6e\u63db<\/span><\/h1>\n        <p class=\"page-foreword fz-ss\">\u8907\u6570\u306e\u7f6e\u63db\u30eb\u30fc\u30eb\uff08JSON\u914d\u5217\u30c7\u30fc\u30bf\uff09\u304b\u3089\u3001\u30c6\u30ad\u30b9\u30c8\u3092\u4e00\u62ec\u3067\u7f6e\u63db\u3057\u307e\u3059\u3002<\/p>\n      <\/div><!-- \/\/\/.hgroup -->\n\n      <p class=\"rowgroup fl-right bdrs-0.25r\">\n        <a class=\"badge is-outlined is-gray fz-xs bdrsl-0.25r\" href=\"\/gp\/https:\/\/code-plus.jp\/gp\/tools\/text-replacer-px-rem\/\"><span>px \u2194 rem<\/span><\/a>\n        <a class=\"badge is-outlined is-gray fz-xs\" href=\"\/gp\/https:\/\/code-plus.jp\/gp\/tools\/text-replacer-pc-rem\/\"><span>pc \u2194 rem<\/span><\/a>\n        <a class=\"badge is-outlined is-gray fz-xs\" href=\"\/gp\/https:\/\/code-plus.jp\/gp\/tools\/text-replacer-em-rem\/\"><span>em \u2194 rem<\/span><\/a>\n        <a class=\"badge is-outlined is-gray fz-xs\" href=\"\/gp\/https:\/\/code-plus.jp\/gp\/tools\/text-replacer-rem-calc\/\"><span>rem \u2194 calc<\/span><\/a>\n        <a class=\"badge is-outlined is-gray fz-xs bdrsr-0.25r\" href=\"#ch-Explanation\"><i class=\"icon mas ma-help\"><\/i>&nbsp;<span>\u4f7f\u3044\u65b9<\/span><\/a>\n      <\/p>\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\" style=\"contain-intrinsic-size:1000px;\">\n    <div class=\"section__interior fxd-row mx-auto\">\n\n      <!-- \u5de6\u30ec\u30fc\u30f3\uff1a\u5165\u529b -->\n      <figure class=\"section__leftlane\">\n        <div class=\"hgroup-wrapper\">\n          <h3 class=\"fz-rg hdg-section mb-0.25pc\"><span>\u25bc\u30c6\u30ad\u30b9\u30c8\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044<\/span><\/h3>\n        <\/div><!-- \/\/\/.hgroup -->\n\n        <div class=\"chest-wrapper relatived\">\n          <textarea id=\"encodeArea\" class=\"textarea\" style=\"height:17.5pc;\" placeholder=\"\u3053\u3053\u306bCSS\u30b3\u30fc\u30c9\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044&#10;\u4f8b\uff09margin: 16px; padding: calc(32px + 1vw);\"><\/textarea>\n          <ins id=\"decodedMessage\"><\/ins>\n        <\/div><!-- \/\/\/.chest -->\n\n        <!-- \u7f6e\u63db\u30eb\u30fc\u30eb\uff08px \u2192 rem\uff09 -->\n        <div class=\"hgroup-wrapper mt-2r\">\n          <h4 class=\"fz-md hdg-subsection mb-0.5pc\">\n            <span>\u25bc\u7f6e\u63db\u30eb\u30fc\u30eb\uff08px \u2192 rem\uff09<\/span>\n            <button type=\"button\" class=\"button is-outlined is-xs ml-1r\" onclick=\"toggleRuleArea('replace-rulearea')\">\u8868\u793a\/\u975e\u8868\u793a<\/button>\n          <\/h4>\n        <\/div><!-- \/\/\/.hgroup -->\n\n        <div class=\"chest-wrapper relatived\">\n          <textarea class=\"textarea\" id=\"replace-rulearea\" style=\"height:10pc; display:none;\" placeholder=\"\u7f6e\u63db\u30eb\u30fc\u30eb\uff08JSON\u914d\u5217\u5f62\u5f0f\uff09\"><\/textarea>\n          <p class=\"fz-xs c-gray mt-0.25r\">\u30eb\u30fc\u30eb\u6570: <span id=\"rule-count-encode\">0<\/span>\u4ef6\uff08\u301c2000px\u5bfe\u5fdc\uff09<\/p>\n        <\/div><!-- \/\/\/.chest -->\n      <\/figure><!-- \/\/\/.leftlane -->\n\n\n      <!-- \u4e2d\u592e\u30ec\u30fc\u30f3\uff1a\u5909\u63db -->\n      <figure class=\"section__centerlane\">\n        <aside class=\"sticky-sidebar fxd-column pc-center\" style=\"height:25rem;\">\n          <a class=\"button is-solided is-primary\" href=\"#ch-Converter\" onclick=\"encodeText()\"><span>\u5909\u63db&nbsp;\u00bb<\/span><\/a>\n          <a class=\"button is-solided is-primary mt-2r\" href=\"#ch-Converter\" onclick=\"decodeText()\"><span>\u00ab&nbsp;\u5909\u63db<\/span><\/a>\n        <\/aside>\n      <\/figure><!-- \/\/\/.centerlane -->\n\n\n      <!-- \u53f3\u30ec\u30fc\u30f3\uff1a\u51fa\u529b -->\n      <figure class=\"section__rightlane\">\n        <div class=\"hgroup-wrapper\">\n          <h3 class=\"fz-rg hdg-section mb-0.25pc\"><span>\u25bc\u5909\u63db\u7d50\u679c<\/span><\/h3>\n        <\/div><!-- \/\/\/.hgroup -->\n\n        <div class=\"chest-wrapper relatived\">\n          <textarea id=\"decodeArea\" class=\"textarea\" style=\"height:17.5pc;\" placeholder=\"\u5909\u63db\u7d50\u679c\u304c\u3053\u3053\u306b\u8868\u793a\u3055\u308c\u307e\u3059\"><\/textarea>\n          <ins id=\"encodedMessage\"><\/ins>\n        <\/div><!-- \/\/\/.chest -->\n\n        <!-- \u9006\u5909\u63db\u30eb\u30fc\u30eb\uff08rem \u2192 px\uff09 -->\n        <div class=\"hgroup-wrapper mt-2r\">\n          <h4 class=\"fz-md hdg-subsection mb-0.5pc\">\n            <span>\u25bc\u9006\u5909\u63db\u30eb\u30fc\u30eb\uff08rem \u2192 px\uff09<\/span>\n            <button type=\"button\" class=\"button is-outlined is-xs ml-1r\" onclick=\"toggleRuleArea('deplace-rulearea')\">\u8868\u793a\/\u975e\u8868\u793a<\/button>\n          <\/h4>\n        <\/div><!-- \/\/\/.hgroup -->\n\n        <div class=\"chest-wrapper relatived\">\n          <textarea class=\"textarea\" id=\"deplace-rulearea\" style=\"height:10pc; display:none;\" placeholder=\"\u9006\u5909\u63db\u30eb\u30fc\u30eb\uff08JSON\u914d\u5217\u5f62\u5f0f\uff09\"><\/textarea>\n          <p class=\"fz-xs c-gray mt-0.25r\">\u30eb\u30fc\u30eb\u6570: <span id=\"rule-count-decode\">0<\/span>\u4ef6<\/p>\n        <\/div><!-- \/\/\/.chest -->\n      <\/figure><!-- \/\/\/.rightlane -->\n\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\" style=\"contain-intrinsic-size:1000px;\">\n    <div class=\"section__interior 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          \u5de6\u5074\u306e\u30c6\u30ad\u30b9\u30c8\u30a8\u30ea\u30a2\u306bCSS\u30b3\u30fc\u30c9\u3092\u5165\u529b\u3057\u3001\u300c\u5909\u63db\u300d\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001\u53f3\u5074\u306b\u5909\u63db\u7d50\u679c\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002\u9006\u5909\u63db\u3082\u53ef\u80fd\u3067\u3059\u3002\n        <\/p>\n\n        <h5 class=\"hdg-subexplanation fz-rg mb-0.25pc mt-2r\">\ud83d\udca1 \u4e3b\u306a\u6a5f\u80fd<\/h5>\n        <ul class=\"fz-ss mb-1r\">\n          <li><b>px \u2192 rem \u5909\u63db\uff1a<\/b> CSS\u306e\u5358\u4f4d\u3092\u4e00\u62ec\u5909\u63db\uff0816px = 1rem\uff09<\/li>\n          <li><b>rem \u2192 px \u5909\u63db\uff1a<\/b> \u9006\u65b9\u5411\u306e\u5909\u63db\u3082\u53ef\u80fd<\/li>\n          <li><b>\u5e83\u7bc4\u56f2\u5bfe\u5fdc\uff1a<\/b> 0.1px\u301c2000px\uff080\u301c160px\u306f0.1px\u523b\u307f\u3001161\u301c2000px\u306f1px\u523b\u307f\uff09<\/li>\n          <li><b>calc()\u5bfe\u5fdc\uff1a<\/b> <code>calc(16px + 2rem)<\/code> \u306e\u3088\u3046\u306a\u8907\u96d1\u306a\u8a18\u8ff0\u3082\u5909\u63db<\/li>\n          <li><b>clamp()\u5bfe\u5fdc\uff1a<\/b> <code>clamp(15px, 5vw, 30px)<\/code> \u3082\u5909\u63db\u53ef\u80fd<\/li>\n          <li><b>\u81ea\u52d5\u30b3\u30d4\u30fc\uff1a<\/b> \u5909\u63db\u7d50\u679c\u306f\u81ea\u52d5\u3067\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u30b3\u30d4\u30fc<\/li>\n        <\/ul>\n\n        <h5 class=\"hdg-subexplanation fz-rg mb-0.25pc mt-2r\">\ud83c\udfaf \u6d3b\u7528\u4f8b<\/h5>\n        <ul class=\"fz-ss mb-1r\">\n          <li><b>\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\uff1a<\/b> px\u6307\u5b9a\u306eCSS\u3092rem\u5358\u4f4d\u306b\u5909\u63db\u3057\u3066\u30a2\u30af\u30bb\u30b7\u30d3\u30ea\u30c6\u30a3\u5411\u4e0a<\/li>\n          <li><b>\u30c7\u30b6\u30a4\u30f3\u30ab\u30f3\u30d7\u53cd\u6620\uff1a<\/b> Figma\/XD\u306epx\u5024\u3092rem\u5024\u306b\u4e00\u62ec\u5909\u63db<\/li>\n          <li><b>\u65e2\u5b58CSS\u6539\u4fee\uff1a<\/b> \u53e4\u3044px\u6307\u5b9a\u306eCSS\u3092\u30e2\u30c0\u30f3\u306arem\u6307\u5b9a\u306b\u79fb\u884c<\/li>\n          <li><b>\u78ba\u8a8d\u7528\u9006\u5909\u63db\uff1a<\/b> rem\u5024\u304c\u4f55px\u304b\u78ba\u8a8d\u3057\u305f\u3044\u3068\u304d\u306b\u9006\u5909\u63db<\/li>\n        <\/ul>\n\n        <h5 class=\"hdg-subexplanation fz-rg mb-0.25pc mt-2r\">\u2699\ufe0f \u5bfe\u5fdc\u30d1\u30bf\u30fc\u30f3<\/h5>\n        <pre><code class=\"language-\">margin: 16px; \u2192 margin: 1rem;\npadding: 32px 16px; \u2192 padding: 2rem 1rem;\ncalc(100% - 32px) \u2192 calc(100% - 2rem)\nclamp(16px, 5vw, 32px) \u2192 clamp(1rem, 5vw, 2rem)\nfont-size:16px; \u2192 font-size:1rem;  \/* \u30b3\u30ed\u30f3\u76f4\u5f8c\u3082\u5bfe\u5fdc *\/\n<\/code><\/pre>\n      <\/div><!-- \/\/\/.box -->\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  <hr id=\"ch-Relation\" anchor \/>\n  <section class=\"sect-cnvtVkaA-Relation pt-3r\" style=\"contain-intrinsic-size:1000px;\">\n    <div class=\"section__interior mx-auto scroll-fadeIn\">\n      <div class=\"hgroup-wrapper 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\/markdown-converter\/\" class=\"linkbox\">\n            <picture class=\"linkbox-thumbnail\">\n              <img decoding=\"async\" width=\"300\" height=\"200\" src=\"https:\/\/code-plus.jp\/gp\/wp-content\/uploads\/70f9700c6f6883a60f60277286884e28.png?ver=20261027192351\" alt=\"Markdown \u2192 HTML \u5909\u63db\u30c4\u30fc\u30eb\" loading=\"lazy\" \/>\n            <\/picture>\n            <h4 class=\"linkbox-title\">Markdown \u2192 HTML \u5909\u63db\u30c4\u30fc\u30eb<\/h4>\n            <span class=\"linkbox-excerpt\">\n              Markdown\u3092HTML\u306b\u5909\u63db\u3002\u30d6\u30ed\u30b0\u6295\u7a3f\u3001\u6280\u8853\u6587\u66f8\u4f5c\u6210\u306b\u3002\n              <u class=\"linkbox-more\">\u7d9a\u304d\u3092\u8aad\u3080<\/u>\n            <\/span>\n          <\/a>\n        <\/li>\n        <li class=\"slide\">\n          <a href=\"https:\/\/code-plus.jp\/gp\/tools\/eyecatch-generator\/\" class=\"linkbox\">\n            <picture class=\"linkbox-thumbnail\">\n              <img decoding=\"async\" width=\"300\" height=\"200\" src=\"https:\/\/code-plus.jp\/gp\/wp-content\/uploads\/9f123ad809acd36a5d71db4bb292d52e.jpg?ver=20261027192351\" alt=\"\u30bf\u30a4\u30c8\u30eb\u4ed8\u304d\u306e\u30a2\u30a4\u30ad\u30e3\u30c3\u30c1\u753b\u50cf\u751f\u6210\u30c4\u30fc\u30eb\" loading=\"lazy\" \/>\n            <\/picture>\n            <h4 class=\"linkbox-title\">\u30bf\u30a4\u30c8\u30eb\u4ed8\u304d\u306e\u30a2\u30a4\u30ad\u30e3\u30c3\u30c1\u753b\u50cf\u751f\u6210\u30c4\u30fc\u30eb<\/h4>\n            <span class=\"linkbox-excerpt\">\n              \u30c6\u30ad\u30b9\u30c8\u3092\u753b\u50cf\u306b\u5909\u63db\u3002SNS\u6295\u7a3f\u3001\u30d0\u30ca\u30fc\u4f5c\u6210\u306b\u6700\u9069\u3002\n              <u class=\"linkbox-more\">\u7d9a\u304d\u3092\u8aad\u3080<\/u>\n            <\/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\" style=\"contain-intrinsic-size:1000px;\">\n    <div class=\"section__interior mx-auto scroll-fadeIn\">\n      <div class=\"hgroup-wrapper mb-0.5pc\">\n\n      <\/div><!-- \/\/\/.hgroup -->\n\n\n    <\/div><!-- \/\/\/.interior -->\n  <\/section><!-- \/\/\/.section -->\n\n\n\n\n  <!-- \u0f3b.mediano\uff08\u4f59\u767d\u8abf\u6574\uff1apage\u4e0b\uff09\u0f3a -->\n  <hr class=\"spacer-mediano\" \/>\n\n<\/div><!-- \/\/\/\u25b2.page  -->\n\n\n\n\n<script>\n  \/\/ ========================================\n  \/\/ \u6539\u826f\u7248 \u7f6e\u63db\u30ed\u30b8\u30c3\u30af\n  \/\/ ========================================\n\n  \/\/ \u7f6e\u63db\u30eb\u30fc\u30eb\u3092\u30d1\u30fc\u30b9\u3059\u308b\u95a2\u6570\n  function parseReplaceRules(ruleText) {\n    try {\n      return ruleText.split('\\n')\n        .filter(line => line.trim() !== '')\n        .map(line => JSON.parse(line));\n    } catch (error) {\n      console.error('\u7f6e\u63db\u30eb\u30fc\u30eb\u306e\u30d1\u30fc\u30b9\u306b\u5931\u6557\u3057\u307e\u3057\u305f:', error);\n      return null;\n    }\n  }\n\n  \/\/ \u6539\u826f\u7248\uff1a\u533a\u5207\u308a\u6587\u5b57\u3092\u81ea\u52d5\u8a8d\u8b58\u3057\u3066\u30c6\u30ad\u30b9\u30c8\u3092\u7f6e\u63db\n  function replaceText(text, rules) {\n    return rules.reduce((currentText, [from, to]) => {\n      \/\/ \u7279\u6b8a\u6587\u5b57\u3092\u30a8\u30b9\u30b1\u30fc\u30d7\n      const escapedFrom = from.replace(\/[.*+?^${}()|[\\]\\\\]\/g, '\\\\$&');\n\n      \/\/ \u524d\u65b9\u306e\u533a\u5207\u308a\u6587\u5b57: \u884c\u982d\u3001\u30b9\u30da\u30fc\u30b9\u3001(\u3001:\u3001,\n      \/\/ \u5f8c\u65b9\u306e\u533a\u5207\u308a\u6587\u5b57: \u884c\u672b\u3001\u30b9\u30da\u30fc\u30b9\u3001)\u3001;\u3001,\n      const regex = new RegExp(\n        `(^|[:\\\\s(,])${escapedFrom}(?=$|[\\\\s);,])`,\n        'gm'\n      );\n\n      return currentText.replace(regex, `$1${to}`);\n    }, text);\n  }\n\n  \/\/ px \u2192 rem \u5909\u63db\n  function encodeText() {\n    const inputText = document.getElementById('encodeArea').value;\n    const ruleText = document.getElementById('replace-rulearea').value;\n    const outputArea = document.getElementById('decodeArea');\n\n    const rules = parseReplaceRules(ruleText);\n    if (!rules || !rules.length) {\n      showEncodedMessage('\u7f6e\u63db\u30eb\u30fc\u30eb\u304c\u6b63\u3057\u304f\u3042\u308a\u307e\u305b\u3093\u3002', false);\n      return;\n    }\n\n    const result = replaceText(inputText, rules);\n    outputArea.value = result;\n    copyToClipboard(result);\n  }\n\n  \/\/ rem \u2192 px \u5909\u63db\n  function decodeText() {\n    const inputText = document.getElementById('decodeArea').value;\n    const ruleText = document.getElementById('deplace-rulearea').value;\n    const outputArea = document.getElementById('encodeArea');\n\n    const rules = parseReplaceRules(ruleText);\n    if (!rules || !rules.length) {\n      showDecodedMessage('\u9006\u5909\u63db\u30eb\u30fc\u30eb\u304c\u6b63\u3057\u304f\u3042\u308a\u307e\u305b\u3093\u3002', false);\n      return;\n    }\n\n    const result = replaceText(inputText, rules);\n    outputArea.value = result;\n    copyToClipboard(result, true);\n  }\n\n  \/\/ \u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u30b3\u30d4\u30fc\n  function copyToClipboard(text, isDecode = false) {\n    navigator.clipboard.writeText(text).then(function () {\n      if (isDecode) {\n        showDecodedMessage(\"\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\uff01\", true);\n      } else {\n        showEncodedMessage(\"\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\uff01\", true);\n      }\n    }, function (err) {\n      if (isDecode) {\n        showDecodedMessage(\"\u30b3\u30d4\u30fc\u306b\u5931\u6557\u3057\u307e\u3057\u305f: \" + err, false);\n      } else {\n        showEncodedMessage(\"\u30b3\u30d4\u30fc\u306b\u5931\u6557\u3057\u307e\u3057\u305f: \" + err, false);\n      }\n    });\n  }\n\n  \/\/ \u30e1\u30c3\u30bb\u30fc\u30b8\u8868\u793a\uff08\u53f3\u5074\uff09\n  function showEncodedMessage(msg, isSuccess) {\n    let messageArea = document.getElementById('encodedMessage');\n    const messageHTML = isSuccess ?\n      `<p class=\"alert is-ghosted is-primary mt-0.5r\">\n        <i class=\"icon mas ma-check_circle c-primary mr-0.5r\"><\/i>\n        <span>${msg}<\/span>\n      <\/p>` :\n      `<p class=\"alert is-ghosted is-caution mt-0.5r\">\n        <i class=\"icon mas ma-error c-caution mr-0.5r\"><\/i>\n        <span>${msg}<\/span>\n      <\/p>`;\n\n    messageArea.innerHTML = '';\n    messageArea.insertAdjacentHTML('beforeend', messageHTML);\n\n    setTimeout(() => {\n      messageArea.innerHTML = '';\n    }, 3000);\n  }\n\n  \/\/ \u30e1\u30c3\u30bb\u30fc\u30b8\u8868\u793a\uff08\u5de6\u5074\uff09\n  function showDecodedMessage(msg, isSuccess) {\n    let messageArea = document.getElementById('decodedMessage');\n    const messageHTML = isSuccess ?\n      `<p class=\"alert is-ghosted is-primary mt-0.5r\">\n        <i class=\"icon mas ma-check_circle c-primary mr-0.5r\"><\/i>\n        <span>${msg}<\/span>\n      <\/p>` :\n      `<p class=\"alert is-ghosted is-caution mt-0.5r\">\n        <i class=\"icon mas ma-error c-caution mr-0.5r\"><\/i>\n        <span>${msg}<\/span>\n      <\/p>`;\n\n    messageArea.innerHTML = '';\n    messageArea.insertAdjacentHTML('beforeend', messageHTML);\n\n    setTimeout(() => {\n      messageArea.innerHTML = '';\n    }, 3000);\n  }\n\n  \/\/ \u30eb\u30fc\u30eb\u30a8\u30ea\u30a2\u306e\u8868\u793a\/\u975e\u8868\u793a\u5207\u308a\u66ff\u3048\n  function toggleRuleArea(areaId) {\n    const area = document.getElementById(areaId);\n    area.style.display = area.style.display === 'none' ? 'block' : 'none';\n  }\n\n  \/\/ \u30eb\u30fc\u30eb\u6570\u3092\u30ab\u30a6\u30f3\u30c8\n  function updateRuleCount() {\n    const encodeRules = document.getElementById('replace-rulearea').value;\n    const decodeRules = document.getElementById('deplace-rulearea').value;\n\n    const encodeCount = encodeRules.split('\\n').filter(line => line.trim()).length;\n    const decodeCount = decodeRules.split('\\n').filter(line => line.trim()).length;\n\n    document.getElementById('rule-count-encode').textContent = encodeCount.toLocaleString();\n    document.getElementById('rule-count-decode').textContent = decodeCount.toLocaleString();\n  }\n\n  \/\/ \u7f6e\u63db\u30eb\u30fc\u30eb\u3092 JSON \u30d5\u30a1\u30a4\u30eb\u304b\u3089\u8aad\u307f\u8fbc\u3080\uff08HTML \u3092\u8efd\u304f\u3059\u308b\u305f\u3081\u3001\u30eb\u30fc\u30eb\u306f \/gp\/assets\/json\/ \u306b\u7f6e\u3044\u3066\u3044\u308b\uff09\n  \/\/ \u9006\u5909\u63db\u30eb\u30fc\u30eb\u306f\u3001\u540c\u3058\u30eb\u30fc\u30eb\u306e\u5de6\u53f3\u3092\u5165\u308c\u66ff\u3048\u3066\u4f5c\u308b\n  function loadReplaceRules() {\n    fetch('\/gp\/assets\/json\/text-replacer-px-rem.json')\n      .then(res => res.json())\n      .then(rules => {\n        document.getElementById('replace-rulearea').value = rules.map(rule => JSON.stringify(rule)).join('\\n');\n        document.getElementById('deplace-rulearea').value = rules.map(([from, to]) => JSON.stringify([to, from])).join('\\n');\n        updateRuleCount();\n      })\n      .catch(error => console.error('\u7f6e\u63db\u30eb\u30fc\u30eb\u306e\u8aad\u307f\u8fbc\u307f\u306b\u5931\u6557\u3057\u307e\u3057\u305f:', error));\n  }\n  loadReplaceRules();\n\n  \/\/ \u30da\u30fc\u30b8\u8aad\u307f\u8fbc\u307f\u6642\n  window.addEventListener('load', function () {\n    \/\/ \u4fdd\u5b58\u3055\u308c\u305f\u30c6\u30ad\u30b9\u30c8\u3092\u5fa9\u5143\n    const savedText = localStorage.getItem('pxRemConverter_input');\n    if (savedText) {\n      document.getElementById('encodeArea').value = savedText;\n    }\n\n    \/\/ \u30eb\u30fc\u30eb\u6570\u3092\u8868\u793a\n    updateRuleCount();\n  });\n\n  \/\/ \u5165\u529b\u30c6\u30ad\u30b9\u30c8\u3092\u81ea\u52d5\u4fdd\u5b58\n  document.getElementById('encodeArea').addEventListener('input', function () {\n    localStorage.setItem('pxRemConverter_input', this.value);\n  });\n<\/script>","protected":false},"excerpt":{"rendered":"CSS\u306epx\u6307\u5b9a\u3092rem\uff0816px=1rem\uff09\u306b\u4e00\u62ec\u5909\u63db\u3059\u308b\u30c4\u30fc\u30eb\u3002rem\u2192px\u306e\u9006\u5909\u63db\u3084\u3001calc()\u30fbclamp()\u306e\u4e2d\u306e\u5024\u306b\u3082\u5bfe\u5fdc\u30020.1px\u301c2000px\u307e\u3067\u5909\u63db\u3067\u304d\u307e\u3059\u3002","protected":false},"author":1,"featured_media":15568,"parent":173,"menu_order":22,"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-6124","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\/6124","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=6124"}],"version-history":[{"count":0,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages\/6124\/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\/15568"}],"wp:attachment":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media?parent=6124"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/categories?post=6124"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/tags?post=6124"},{"taxonomy":"group","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/group?post=6124"},{"taxonomy":"pg","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pg?post=6124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}