{"id":11549,"date":"2026-03-27T20:23:10","date_gmt":"2026-03-27T11:23:10","guid":{"rendered":"https:\/\/code-plus.jp\/gp\/?page_id=11549"},"modified":"2026-04-14T13:11:33","modified_gmt":"2026-04-14T04:11:33","slug":"responsive-clamp-calculator","status":"publish","type":"page","link":"https:\/\/code-plus.jp\/gp\/tools\/responsive-clamp-calculator\/","title":{"rendered":"\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6 \u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u4e00\u62ec\u751f\u6210\u30c4\u30fc\u30eb - \u8907\u6570\u30d7\u30ed\u30d1\u30c6\u30a3\u5bfe\u5fdc"},"content":{"rendered":"<!-- \u25bc.page-\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6 \u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u4e00\u62ec\u751f\u6210\u30c4\u30fc\u30eb \uff08\/tools\/responsive-clamp-calculator\/\uff09\r\n* \u30da\u30fc\u30b8\u30af\u30e9\u30b9\uff1apg-saracnvtvkaa\uff08WordPress\u304c\u5c0f\u6587\u5b57\u3067\u3057\u304b\u51fa\u529b\u3067\u304d\u306a\u3044\u305f\u3081\uff09\r\n* \u8b58\u5225\u30b3\u30fc\u30c9\uff1acnvtVkaA\uff08section\/dept \u306e\u30af\u30e9\u30b9\u540d, \u753b\u50cf\u540d\u306b\u4f7f\u7528\uff09\r\n====================================== -->\r\n\r\n<div class=\"pg-saracnvtvkaa\">\r\n\r\n<!-- .mezzala\uff08\u4f59\u767d\u8abf\u6574\uff1apage\u4e0a\uff09 -->\r\n<hr class=\"spacer-mezzala\" \/>\r\n\r\n<hr id=\"ch-TextConverter\" anchor \/>\r\n  <header class=\"page-header mx-auto\">\r\n    <!-- \u30d1\u30f3\u304f\u305a\u30ea\u30b9\u30c8 --><div><!-- breadcrumb.php -->\n\n<nav class=\"breadcrumb leckermaul mx-auto py-0.5r\">\n  <ul class=\"breadcrumb-wrapper\">\n    <!-- \u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u3078\u306e\u30ea\u30f3\u30af\u3092\u8868\u793a -->\n    <li><a href=\"https:\/\/code-plus.jp\/gp\/\"><i><\/i>\u30c8\u30c3\u30d7<\/a><\/li>\n\n          <!-- \u56fa\u5b9a\u30da\u30fc\u30b8\uff08\u305d\u308c\u4ee5\u5916\uff09\uff1a \u5148\u7956\u30da\u30fc\u30b8\u540d\u3068\u3001\u73fe\u5728\u306e\u30da\u30fc\u30b8\u540d\u3092\u8868\u793a -->\n      <li><a href=\"https:\/\/code-plus.jp\/gp\/tools\/\">TOOLS\uff08\u30c4\u30fc\u30eb\u4e00\u89a7\uff09<\/a><\/li><li class=\"current_page_item\"><a>\u30c4\u30fc\u30eb<\/a><\/li>    <!-- \/\/\/if (is_page()) -->\n\n  <\/ul>\n<\/nav><\/div>\r\n  <\/header><!-- \/\/\/.inheader -->\r\n\r\n\r\n\r\n\r\n  <!-- .section -->\r\n  <section class=\"sect-cnvtVkaA-Intro\" style=\"contain-intrinsic-size:1000px;\">\r\n    <header class=\"section__inheader mx-auto scroll-fadeIn\">\r\n      <div class=\"hgroup-wrapper d-iblock mb-0.5r\">\r\n        <h1 class=\"fz-xxl hdg-page mb-0.25pc\"><span>\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6 \u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u4e00\u62ec\u751f\u6210\u30c4\u30fc\u30eb - \u8907\u6570\u30d7\u30ed\u30d1\u30c6\u30a3\u5bfe\u5fdc<\/span><\/h1>\r\n        <p class=\"page-foreword fz-ss\">\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u306a\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u5024\u3092\u4e00\u62ec\u751f\u6210\u3059\u308b\u30aa\u30f3\u30e9\u30a4\u30f3\u30c4\u30fc\u30eb\u3002\u30d3\u30e5\u30fc\u30dd\u30fc\u30c8\u306b\u5fdc\u3058\u305f clamp()\u5024\u3092\u51fa\u529b\u3057\u307e\u3059\u3002px \/ rem \/ em \/ pc \/ % \u306e\u5358\u4f4d\u306b\u5bfe\u5fdc\u3002<\/p>\r\n      <\/div><!-- \/\/\/.hgroup -->\r\n\r\n      <a class=\"fl-right badge is-outlined is-gray fz-xs bdrs-0.25r\" href=\"#ch-Explanation\">\r\n        <i class=\"icon mas ma-help\"><\/i>&nbsp;<span>\u4f7f\u3044\u65b9<\/span>\r\n      <\/a>\r\n    <\/header><!-- \/\/\/.inheader -->\r\n  <\/section>\r\n\r\n\r\n  <!-- .section -->\r\n  <hr id=\"ch-Converter\" anchor \/>\r\n  <section class=\"sect-cnvtVkaA-Converter\" style=\"contain-intrinsic-size:1000px;\">\r\n    <div class=\"section__interior fxd-row mx-auto\">\r\n\r\n      <!-- \u5de6\u30ec\u30fc\u30f3\uff1a\u5165\u529b -->\r\n      <figure class=\"section__leftlane\">\r\n        <div class=\"hgroup-wrapper\">\r\n          <h3 class=\"fz-rg hdg-section mb-0.25pc\"><span>\u25bc\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044<\/span><\/h3>\r\n        <\/div><!-- \/\/\/.hgroup -->\r\n\r\n        <!-- JSON\u5165\u529b\u30a8\u30ea\u30a2 -->\r\n        <div class=\"chest-wrapper relatived\">\r\n          <textarea id=\"encodeArea\" class=\"textarea\" style=\"height:17.5pc;\" placeholder='\u66f8\u5f0f\uff1a[\"\u30bb\u30ec\u30af\u30bf\", \"\u30d7\u30ed\u30d1\u30c6\u30a3\u540d\", \"\u6700\u5c0f\u5024+\u5358\u4f4d\", \"\u6700\u5927\u5024+\u5358\u4f4d\"]&#10;\u5358\u4f4d\u306f px \/ rem \/ em \/ pc \/ % \u306b\u5bfe\u5fdc\uff08\u7701\u7565\u6642\u306f px\uff09&#10;\u4f8b\uff09&#10;[\":root\", \"font-size\", \"15px\", \"16px\"]&#10;[\":root\", \"--fz-regular\", \"0.9375rem\", \"1rem\"]&#10;[\":root\", \"--fz-semismall\", \"0.8750rem\", \"0.9375rem\"]&#10;[\".mt-small\", \"margin-top\", \"0.8125rem\", \"0.8750rem\"]&#10;[\".pr-xsmall\", \"padding-right\", \"0.7500rem\", \"0.8125rem\"]&#10;[\".w-medium\", \"width\", \"62.5%\", \"100%\"]'>\r\n[\":root\", \"--fz-xs\", \"0.7500rem\", \"0.8125rem\"]\r\n[\":root\", \"--fz-sm\", \"0.8125rem, calc\", \"0.8750rem\"]\r\n[\":root\", \"--fz-ss\", \"0.8750rem\", \"0.9375rem\"]\r\n[\":root\", \"--fz-rg\", \"0.9375rem\", \"1rem\"]\r\n[\":root\", \"--fz-md\", \"0.9563rem\", \"1.0625rem\"]\r\n[\":root\", \"--fz-sl\", \"0.9750rem\", \"1.1250rem\"]\r\n[\":root\", \"--fz-ml\", \"1rem\", \"1.1875rem\"]\r\n[\":root\", \"--fz-lg\", \"1.0250rem\", \"1.3125rem\"]\r\n          <\/textarea>\r\n          <ins id=\"decodedMessage\"><\/ins>\r\n        <\/div><!-- \/\/\/.chest -->\r\n\r\n        <div class=\"colgroup w-full mt-1r\">\r\n          <h4 class=\"title is-outlined fz-sm\">\u30b0\u30ed\u30fc\u30d0\u30eb\u8a2d\u5b9a<\/h4>\r\n          <label class=\"label is-outlined fz-sm\">Viewport:&nbsp;\r\n            <input type=\"text\" id=\"globalMinVW\" class=\"input w-6e\" value=\"360\" inputmode=\"decimal\" placeholder=\"360\">&nbsp;\u301c&nbsp;\r\n            <input type=\"text\" id=\"globalMaxVW\" class=\"input w-6e\" value=\"1000\" inputmode=\"decimal\" placeholder=\"1000\">&nbsp;px\r\n          <\/label>\r\n        <\/div><!-- \/\/\/.colgroup -->\r\n      <\/figure><!-- \/\/\/.leftlane -->\r\n\r\n\r\n      <!-- \u4e2d\u592e\u30ec\u30fc\u30f3\uff1a\u5909\u63db\u30dc\u30bf\u30f3 -->\r\n      <figure class=\"section__centerlane\">\r\n        <aside class=\"sticky-sidebar fxd-column pc-center\" style=\"height:25pc;\">\r\n          <a class=\"button is-solided is-primary\" href=\"#ch-Converter\" onclick=\"generateClamp()\"><span>\u751f\u6210&nbsp;\u00bb<\/span><\/a>\r\n          <a class=\"button is-outlined is-gray mt-2r\" href=\"#ch-Converter\" onclick=\"clearAll()\"><span>\u30af\u30ea\u30a2<\/span><\/a>\r\n        <\/aside>\r\n      <\/figure><!-- \/\/\/.centerlane -->\r\n\r\n\r\n      <!-- \u53f3\u30ec\u30fc\u30f3\uff1a\u51fa\u529b -->\r\n      <figure class=\"section__rightlane\">\r\n        <div class=\"chest-wrapper relatived\">\r\n          <h3 class=\"fz-rg hdg-section mb-0.25pc\"><span>\u25bc\u751f\u6210\u3055\u308c\u305fCSS<\/span><\/h3>\r\n          <textarea class=\"textarea\" id=\"decodeArea\" style=\"height:17.5pc;\" placeholder=\"\u3053\u3053\u306b\u751f\u6210\u3055\u308c\u305fCSS clamp() \u304c\u8868\u793a\u3055\u308c\u307e\u3059\" readonly><\/textarea>\r\n          <ins id=\"encodedMessage\"><\/ins>\r\n        <\/div><!-- \/\/\/.chest -->\r\n\r\n      <\/figure><!-- \/\/\/.rightlane -->\r\n\r\n    <\/div><!-- \/\/\/.interior.fxd-row -->\r\n  <\/section><!-- \/\/\/.section -->\r\n\r\n\r\n  <!-- .section -->\r\n  <hr id=\"ch-Explanation\" anchor \/>\r\n  <section class=\"sect-cnvtVkaA-Explanation pt-3r\" style=\"contain-intrinsic-size:1000px;\">\r\n    <div class=\"section__interior mx-auto scroll-fadeIn\">\r\n      <div class=\"box is-broad is-solided c-text\">\r\n        <h4 class=\"hdg-explanation fz-md mb-0.25pc\">\u4f7f\u3044\u65b9<\/h4>\r\n        <p class=\"fz-ss mb-1r\">\r\n          \u5de6\u5074\u306e\u30c6\u30ad\u30b9\u30c8\u30a8\u30ea\u30a2\u306bJSON\u5f62\u5f0f\u3067\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u5165\u529b\u3057\u3001\u300c\u751f\u6210 \u00bb\u300d\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001\u53f3\u5074\u306bCSS <code>clamp()<\/code> \u304c\u51fa\u529b\u3055\u308c\u307e\u3059\u3002\r\n        <\/p>\r\n\r\n        <h5 class=\"hdg-subexplanation fz-rg mb-0.25pc mt-2r\">\ud83d\udcdd \u5165\u529b\u5f62\u5f0f<\/h5>\r\n        <p class=\"fz-ss mb-0.5r\">1\u884c\u306b\u3064\u304d1\u30d7\u30ed\u30d1\u30c6\u30a3\u3092 JSON \u914d\u5217\u5f62\u5f0f\u3067\u8a18\u8ff0\u3057\u307e\u3059\u3002\u5358\u4f4d\u306f\u5024\u306b\u542b\u3081\u3066\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\r\n        <pre><code class=\"language-\">[\"\u30bb\u30ec\u30af\u30bf\", \"\u30d7\u30ed\u30d1\u30c6\u30a3\u540d\", \"\u6700\u5c0f\u5024+\u5358\u4f4d\", \"\u6700\u5927\u5024+\u5358\u4f4d\"]\r\n\r\n\u4f8b\uff09\r\n[\":root\", \"font-size\", \"16px\", \"20px\"]\r\n[\":root\", \"--spacing-sm\", \"8px\", \"12px\"]\r\n[\":root\", \"font-size\", \"1rem\", \"1.25rem\"]\r\n[\".hero__title\", \"font-size\", \"1.75rem\", \"3.5rem\"]\r\n[\".section\", \"margin-bottom\", \"2em\", \"5em\"]<\/code><\/pre>\r\n        <p class=\"fz-ss mt-0.5r\">\u5bfe\u5fdc\u5358\u4f4d: <code>px<\/code> \/ <code>rem<\/code> \/ <code>em<\/code> \/ <code>pc<\/code> \/ <code>%<\/code>\uff08\u7701\u7565\u6642\u306f px \u6271\u3044\uff09<\/p>\r\n\r\n        <h5 class=\"hdg-subexplanation fz-rg mb-0.25pc mt-2r\">\u2699\ufe0f \u30b0\u30ed\u30fc\u30d0\u30eb\u8a2d\u5b9a<\/h5>\r\n        <ul class=\"fz-ss mb-1r\">\r\n          <li><b>\u6700\u5c0f\u30d3\u30e5\u30fc\u30dd\u30fc\u30c8\uff1a<\/b> \u30b9\u30b1\u30fc\u30eb\u3092\u958b\u59cb\u3059\u308b\u30d3\u30e5\u30fc\u30dd\u30fc\u30c8\u5e45\u30fbpx\uff08\u30c7\u30d5\u30a9\u30eb\u30c8: 360\uff09<\/li>\r\n          <li><b>\u6700\u5927\u30d3\u30e5\u30fc\u30dd\u30fc\u30c8\uff1a<\/b> \u30b9\u30b1\u30fc\u30eb\u3092\u7d42\u4e86\u3059\u308b\u30d3\u30e5\u30fc\u30dd\u30fc\u30c8\u5e45\u30fbpx\uff08\u30c7\u30d5\u30a9\u30eb\u30c8: 1000\uff09<\/li>\r\n        <\/ul>\r\n\r\n        <h5 class=\"hdg-subexplanation fz-rg mb-0.25pc mt-2r\">\ud83e\uddee \u8a08\u7b97\u5f0f<\/h5>\r\n        <pre><code class=\"language-\">multiplier  = round4( 100 \u00d7 (\u6700\u5927px \u2212 \u6700\u5c0fpx) \u00f7 (\u6700\u5927VW \u2212 \u6700\u5c0fVW) )\r\nvpOffset    = \u6700\u5c0fVW \u00f7 100  \u2190 \u5165\u529b\u5358\u4f4d\u306b\u5408\u308f\u305b\u3066\u8868\u73fe\r\n\r\nclamp(\u6700\u5c0f\u5024, calc(\u6700\u5c0f\u5024 + ((1vw \u2212 vpOffset) \u00d7 multiplier)), \u6700\u5927\u5024)<\/code><\/pre>\r\n        <p class=\"fz-ss mt-0.5r\">rem \/ em \/ pc \u306f\u5185\u90e8\u3067 1\u5358\u4f4d = 16px \u3068\u3057\u3066 px \u63db\u7b97\u3057\u305f\u3046\u3048\u3067 multiplier \u3092\u8a08\u7b97\u3057\u307e\u3059\u3002min \/ max \u306e\u51fa\u529b\u306f\u5165\u529b\u5024\u3092\u305d\u306e\u307e\u307e\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\r\n\r\n        <h5 class=\"hdg-subexplanation fz-rg mb-0.25pc mt-2r\">\ud83d\udca1 \u6d3b\u7528\u4f8b<\/h5>\r\n        <ul class=\"fz-ss\">\r\n          <li><b>\u30bf\u30a4\u30dd\u30b0\u30e9\u30d5\u30a3\u30b9\u30b1\u30fc\u30eb\uff1a<\/b> h1\u301ch6\u306e\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u3092\u30d3\u30e5\u30fc\u30dd\u30fc\u30c8\u306b\u5fdc\u3058\u3066\u81ea\u52d5\u8abf\u6574<\/li>\r\n          <li><b>\u4f59\u767d\u8a2d\u8a08\uff1a<\/b> padding \/ margin \/ gap \u3092\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u306b\u5909\u5316\u3055\u305b\u308b<\/li>\r\n          <li><b>CSS\u5909\u6570\u4e00\u62ec\u751f\u6210\uff1a<\/b> <code>:root<\/code> \u306b\u8907\u6570\u306e\u5909\u6570\u3092\u307e\u3068\u3081\u3066\u5b9a\u7fa9<\/li>\r\n        <\/ul>\r\n      <\/div><!-- \/\/\/.box -->\r\n    <\/div><!-- \/\/\/.interior -->\r\n  <\/section><!-- \/\/\/.section -->\r\n\r\n\r\n  <!-- .department -->\r\n  <hr id=\"ch-Relation\" anchor \/>\r\n  <section class=\"sect-cnvtVkaA-Relation pt-3r\" style=\"contain-intrinsic-size:1000px;\">\r\n    <div class=\"section__interior mx-auto scroll-fadeIn\">\r\n      <div class=\"hgroup-wrapper mb-0.5pc\">\r\n        <h5 class=\"hdg-relation fz-rg\"><span>\u95a2\u9023\u30c4\u30fc\u30eb<\/span><\/h5>\r\n      <\/div><!-- \/\/\/.hgroup -->\r\n\r\n      <ul class=\"shelf-wrapper_pc shelfA\" data-cols_pc=\"2\">\r\n        <li class=\"slide\">\r\n          <a href=\"https:\/\/code-plus.jp\/gp\/tools\/text-replacer-px-rem\/\" class=\"linkbox\">\r\n            <h4 class=\"linkbox-title\">px \u2194 rem \u4e00\u62ec\u5909\u63db\u30c4\u30fc\u30eb<\/h4>\r\n            <span class=\"linkbox-excerpt\">\r\n              CSS\u30b3\u30fc\u30c9\u5185\u306epx\u5024\u3092rem\u306b\u3001rem\u3092px\u306b\u4e00\u62ec\u5909\u63db\u3002\r\n              <u class=\"linkbox-more\">\u7d9a\u304d\u3092\u8aad\u3080<\/u>\r\n            <\/span>\r\n          <\/a>\r\n        <\/li>\r\n        <li class=\"slide\">\r\n          <a href=\"https:\/\/code-plus.jp\/gp\/tools\/rgb-converter\/\" class=\"linkbox\">\r\n            <h4 class=\"linkbox-title\">RGB \/ HEX \u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u5909\u63db\u30c4\u30fc\u30eb<\/h4>\r\n            <span class=\"linkbox-excerpt\">\r\n              rgb() \/ rgba() \u2194 HEX\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u3092\u76f8\u4e92\u5909\u63db\u3002\r\n              <u class=\"linkbox-more\">\u7d9a\u304d\u3092\u8aad\u3080<\/u>\r\n            <\/span>\r\n          <\/a>\r\n        <\/li>\r\n      <\/ul><!-- \/\/\/.shelf -->\r\n    <\/div><!-- \/\/\/.interior -->\r\n  <\/section><!-- \/\/\/.section -->\r\n\r\n\r\n<\/div><!-- \/\/\/.pg-saracnvtvkaa -->\r\n\r\n\r\n\r\n\r\n<script>\r\n\/* ============================================================\r\n   CSS clamp() \u4e00\u62ec\u751f\u6210\u30c4\u30fc\u30eb v2\r\n   \/tools\/clamp-calculator\/\r\n   ============================================================ *\/\r\n\r\n(function () {\r\n  'use strict';\r\n\r\n  \/* ---- \u5b9a\u6570 ---- *\/\r\n  const BASE_PX = 16; \/\/ rem \/ em \/ pc \u306e px \u63db\u7b97\u57fa\u6e96\r\n\r\n  \/* ---- \u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3 ---- *\/\r\n  const round4 = v => Math.round(v * 10000) \/ 10000;\r\n\r\n  const getNumVal = (id, fallback) => {\r\n    const el = document.getElementById(id);\r\n    if (!el) return fallback;\r\n    const v = parseFloat(el.value);\r\n    return isNaN(v) || v <= 0 ? fallback : v;\r\n  };\r\n\r\n  \/* ---- \u6570\u5024\u5165\u529b\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\uff08\u30c6\u30f3\u30ad\u30fc\u5bfe\u5fdc\uff09 ---- *\/\r\n  const allowNumeric = e => {\r\n    if (\r\n      (e.which === 65 && (e.ctrlKey || e.metaKey)) ||\r\n      (e.which === 67 && (e.ctrlKey || e.metaKey)) ||\r\n      (e.which === 86 && (e.ctrlKey || e.metaKey)) ||\r\n      (e.which > 36 && e.which < 41) ||\r\n      (e.which === 9 && e.shiftKey) ||\r\n      e.which === 8 || e.which === 9 || e.which === 13 || e.which === 46\r\n    ) return;\r\n\r\n    const isDigit =\r\n      (e.which >= 48 && e.which <= 57) ||  \/\/ \u4e0a\u6bb5\u6570\u5b57\r\n      (e.which >= 96 && e.which <= 105);   \/\/ \u30c6\u30f3\u30ad\u30fc\u6570\u5b57\r\n    const isPeriod =\r\n      (e.which === 190 || e.which === 110) &&\r\n      e.target.value.indexOf('.') === -1;\r\n\r\n    if (!isDigit && !isPeriod) e.preventDefault();\r\n  };\r\n\r\n  ['globalMinVW', 'globalMaxVW'].forEach(id => {\r\n    const el = document.getElementById(id);\r\n    if (el) el.addEventListener('keydown', allowNumeric);\r\n  });\r\n\r\n  \/* ---- \u5024\u306e\u30d1\u30fc\u30b9: \"16px\" \"1.25rem\" \"2em\" \"1pc\" \"62.5%\" \u2192 { num, unit } ---- *\/\r\n  const parseValue = raw => {\r\n    if (typeof raw === 'number') return { num: raw, unit: 'px' };\r\n    const m = String(raw).trim().match(\/^([0-9]*\\.?[0-9]+)\\s*(px|rem|em|pc|%)?$\/i);\r\n    if (!m) return null;\r\n    const num = parseFloat(m[1]);\r\n    if (isNaN(num) || num < 0) return null;\r\n    return { num, unit: (m[2] || 'px').toLowerCase() };\r\n  };\r\n\r\n  \/* ---- \u5358\u4f4d \u2192 px \u63db\u7b97\uff08\u5185\u90e8\u8a08\u7b97\u7528\u30fbBASE_PX=16 \u524d\u63d0\uff09 ---- *\/\r\n  const toPx = (num, unit) => {\r\n    if (unit === 'rem' || unit === 'em' || unit === 'pc') return num * BASE_PX;\r\n    if (unit === '%') return num \/ 100 * BASE_PX;\r\n    return num; \/\/ px\r\n  };\r\n\r\n  \/* ---- \u30d3\u30e5\u30fc\u30dd\u30fc\u30c8\u30aa\u30d5\u30bb\u30c3\u30c8\u6587\u5b57\u5217\uff08\u5e38\u306b px \u3067\u51fa\u529b\uff09 ---- *\/\r\n  \/\/ calc() \u5185\u3067\u306e px \u6df7\u5728\u306f\u6709\u52b9\u306a CSS\u3002\u5358\u4f4d\u5225 offset \u306f em\/% \u304c\u89aa\u4f9d\u5b58\u3067\u4e0d\u6b63\u78ba\u306a\u305f\u3081\u5e38\u306b px \u3092\u4f7f\u3046\r\n  const vpOffsetStr = minVW => `${round4(minVW \/ 100)}px`;\r\n\r\n  \/* ---- clamp() \u6587\u5b57\u5217\u3092\u751f\u6210 ---- *\/\r\n  const calcClamp = (minNum, minUnit, maxNum, maxUnit, minVW, maxVW) => {\r\n    const minPx  = toPx(minNum, minUnit);\r\n    const maxPx  = toPx(maxNum, maxUnit);\r\n    const mult   = round4(100 * (maxPx - minPx) \/ (maxVW - minVW));\r\n    const vpOff  = vpOffsetStr(minVW);\r\n    const minStr = `${minNum}${minUnit}`;\r\n    const maxStr = `${maxNum}${maxUnit}`;\r\n\r\n    \/\/ clamp(A, val, B) \u306f A \u2264 B \u304c\u5fc5\u9808\u3002\r\n    \/\/ min > max\uff08\u30b9\u30de\u30db\u5074\u304c\u5927\u304d\u3044\uff09\u306e\u5834\u5408\u306f clamp \u306e floor\/ceil \u3092\u5165\u308c\u66ff\u3048\u3001\r\n    \/\/ calc \u306e\u8d77\u70b9\u306f\u5165\u529b\u306e minStr\uff08\u30b9\u30de\u30db\u5074\u306e\u5927\u304d\u3044\u5024\uff09\u306e\u307e\u307e\u3002\r\n    const isReversed = minPx > maxPx;\r\n    const clampFloor = isReversed ? maxStr : minStr;\r\n    const clampCeil  = isReversed ? minStr : maxStr;\r\n    return `clamp(${clampFloor}, calc(${minStr} + ((1vw - ${vpOff}) * ${mult})), ${clampCeil})`;\r\n  };\r\n\r\n  \/* ---- 1\u884c\u306e\u30d1\u30fc\u30b9 ----\r\n     \u5bfe\u5fdc\u5f62\u5f0f\uff1a\r\n       [\":root\", \"font-size\", \"16px\", \"20px\"]\r\n       [\":root\", \"font-size\", 16px, 20px]       \u2190 \u5024\u304c\u672a\u30af\u30a9\u30fc\u30c8\u3067\u3082OK\r\n       [\":root\", \"font-size\", 16, 20]            \u2190 \u6570\u5024\u306e\u307f \u2192 px\u6271\u3044\r\n       [\":root\", \"font-size\", \"16px\", \"15px\"]    \u2190 \u30b9\u30de\u30db\u5074\u304c\u5927\u304d\u3044\u9006\u8ee2\u3082OK\r\n  ---- *\/\r\n  const parseLine = line => {\r\n    const t = line.trim();\r\n    if (!t || t.startsWith('\/\/') || t.startsWith('#')) return null;\r\n\r\n    \/\/ \u307e\u305a\u6b63\u898f\u306eJSON\u8a66\u884c\r\n    let arr = null;\r\n    try {\r\n      arr = JSON.parse(t);\r\n    } catch (_) {\r\n      \/\/ \u672a\u30af\u30a9\u30fc\u30c8\u5024\u306e\u6b63\u898f\u5316: , 16px \u2192 , \"16px\"\r\n      const normalized = t.replace(\r\n        \/,\\s*([0-9][0-9.]*(?:px|rem|em|pc|%)?)\\s*(?=[,\\]])\/gi,\r\n        (_, v) => `, \"${v}\"`\r\n      );\r\n      try { arr = JSON.parse(normalized); } catch (__) { return null; }\r\n    }\r\n\r\n    if (!Array.isArray(arr) || arr.length < 4) return null;\r\n    const [selector, prop, minRaw, maxRaw] = arr;\r\n    if (typeof selector !== 'string' || typeof prop !== 'string') return null;\r\n\r\n    const minV = parseValue(minRaw);\r\n    const maxV = parseValue(maxRaw);\r\n    if (!minV || !maxV) return null;\r\n\r\n    \/\/ min === max \u306f\u7121\u610f\u5473\u306a\u306e\u3067\u30b9\u30ad\u30c3\u30d7\r\n    if (toPx(minV.num, minV.unit) === toPx(maxV.num, maxV.unit)) return null;\r\n\r\n    return {\r\n      selector: selector.trim(),\r\n      prop: prop.trim(),\r\n      minNum: minV.num, minUnit: minV.unit,\r\n      maxNum: maxV.num, maxUnit: maxV.unit\r\n    };\r\n  };\r\n\r\n  \/* ---- \u30e1\u30a4\u30f3\u751f\u6210 ---- *\/\r\n  window.generateClamp = () => {\r\n    const textarea = document.getElementById('encodeArea');\r\n    const output   = document.getElementById('decodeArea');\r\n    if (!textarea || !output) return;\r\n\r\n    const minVW = getNumVal('globalMinVW', 375);\r\n    const maxVW = getNumVal('globalMaxVW', 1920);\r\n\r\n    if (minVW >= maxVW) {\r\n      showMessage('\u26a0 \u6700\u5c0f\u30d3\u30e5\u30fc\u30dd\u30fc\u30c8 < \u6700\u5927\u30d3\u30e5\u30fc\u30dd\u30fc\u30c8 \u306b\u3057\u3066\u304f\u3060\u3055\u3044', false, 'encodedMessage');\r\n      return;\r\n    }\r\n\r\n    const lines   = textarea.value.split('\\n');\r\n    const entries = [];\r\n    const errors  = [];\r\n\r\n    lines.forEach((line, i) => {\r\n      const parsed = parseLine(line);\r\n      if (parsed) {\r\n        entries.push(parsed);\r\n      } else if (line.trim() && !line.trim().startsWith('\/\/') && !line.trim().startsWith('#')) {\r\n        errors.push(`\u884c ${i + 1}`);\r\n      }\r\n    });\r\n\r\n    if (entries.length === 0) {\r\n      output.value = '';\r\n      showMessage(\r\n        errors.length ? `\u26a0 \u30d1\u30fc\u30b9\u3067\u304d\u307e\u305b\u3093\u3067\u3057\u305f\uff08${errors.join(', ')}\uff09` : '\u5165\u529b\u304c\u3042\u308a\u307e\u305b\u3093',\r\n        false, 'encodedMessage'\r\n      );\r\n      return;\r\n    }\r\n\r\n    let result = `\/* Viewport: @ ${minVW}px\\u2013${maxVW}px *\/\\n`;\r\n\r\n    \/\/ \u30bb\u30ec\u30af\u30bf\u3054\u3068\u306b\u307e\u3068\u3081\u308b\uff08\u5165\u529b\u9806\u3092\u4fdd\u6301\uff09\r\n    const selectorOrder = [];\r\n    const selectorMap   = new Map();\r\n\r\n    entries.forEach(e => {\r\n      if (!selectorMap.has(e.selector)) {\r\n        selectorOrder.push(e.selector);\r\n        selectorMap.set(e.selector, []);\r\n      }\r\n      selectorMap.get(e.selector).push(e);\r\n    });\r\n\r\n    selectorOrder.forEach(selector => {\r\n      result += `${selector} {\\n`;\r\n      selectorMap.get(selector).forEach(({ prop, minNum, minUnit, maxNum, maxUnit }) => {\r\n        const clampVal = calcClamp(minNum, minUnit, maxNum, maxUnit, minVW, maxVW);\r\n        result += `  ${prop}: ${clampVal};\\n`;\r\n      });\r\n      result += `}\\n`;\r\n    });\r\n\r\n    output.value = result.trimEnd();\r\n\r\n    \/\/ \u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u3078\u81ea\u52d5\u30b3\u30d4\u30fc\r\n    const errPart = errors.length ? `\u3000\u26a0 \u30b9\u30ad\u30c3\u30d7: ${errors.join(', ')}` : '';\r\n    copyToClipboard(result.trimEnd(), entries.length, errPart);\r\n  };\r\n\r\n  \/* ---- \u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u30b3\u30d4\u30fc ---- *\/\r\n  const copyToClipboard = (text, count, errPart) => {\r\n    navigator.clipboard.writeText(text).then(() => {\r\n      showMessage(`\u30c6\u30ad\u30b9\u30c8\u304c\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u30b3\u30d4\u30fc\u3055\u308c\u307e\u3057\u305f\uff01\uff08${count}\u4ef6\uff09${errPart}`, true, 'encodedMessage');\r\n    }, err => {\r\n      showMessage(`\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u3078\u306e\u30b3\u30d4\u30fc\u306b\u5931\u6557\u3057\u307e\u3057\u305f: ${err}`, false, 'encodedMessage');\r\n    });\r\n  };\r\n\r\n  \/* ---- \u30e1\u30c3\u30bb\u30fc\u30b8\u8868\u793a\uff08markdown-converter \u3068\u540c\u30d1\u30bf\u30fc\u30f3\uff09 ---- *\/\r\n  const showMessage = (msg, isSuccess, areaId) => {\r\n    const area = document.getElementById(areaId);\r\n    if (!area) return;\r\n    const html = isSuccess\r\n      ? `<p class=\"alert is-ghosted is-primary mt-0.5r\"><i class=\"icon mas ma-check_circle c-primary mr-0.5r\"><\/i><span>${msg}<\/span><\/p>`\r\n      : `<p class=\"alert is-ghosted is-error mt-0.5r\"><i class=\"icon mas ma-error c-error mr-0.5r\"><\/i><span>${msg}<\/span><\/p>`;\r\n    area.innerHTML = '';\r\n    area.insertAdjacentHTML('beforeend', html);\r\n    setTimeout(() => { area.innerHTML = ''; }, 3000);\r\n  };\r\n\r\n  \/* ---- \u30af\u30ea\u30a2 ---- *\/\r\n  window.clearAll = () => {\r\n    ['encodeArea', 'decodeArea', 'quickResult'].forEach(id => {\r\n      const el = document.getElementById(id);\r\n      if (el) el.value = '';\r\n    });\r\n    ['decodedMessage', 'encodedMessage'].forEach(id => {\r\n      const el = document.getElementById(id);\r\n      if (el) el.textContent = '';\r\n    });\r\n    const enc = document.getElementById('encodeArea');\r\n    if (enc) enc.focus();\r\n  };\r\n})();\r\n<\/script>","protected":false},"excerpt":{"rendered":"\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u306aCSS\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u5024\u3092 clamp() \u3067\u4e00\u62ec\u751f\u6210\u3059\u308b\u30aa\u30f3\u30e9\u30a4\u30f3\u30c4\u30fc\u30eb\u3002JSON\u5f62\u5f0f\u3067\u8907\u6570\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u6307\u5b9a\u3059\u308b\u3068\u3001\u30d3\u30e5\u30fc\u30dd\u30fc\u30c8\u306b\u5fdc\u3058\u305f clamp()\u5024\u3092\u51fa\u529b\u3057\u307e\u3059\u3002px \/ rem \/ em \/ pc \/ % \u306e\u5358\u4f4d\u306b\u5bfe\u5fdc\u3002","protected":false},"author":1,"featured_media":11594,"parent":173,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"page\/page-converter.php","meta":{"footnotes":""},"categories":[21],"tags":[],"class_list":{"0":"post-11549","1":"page","2":"type-page","3":"status-publish","4":"has-post-thumbnail","6":"category-tool"},"_links":{"self":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages\/11549","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=11549"}],"version-history":[{"count":10,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages\/11549\/revisions"}],"predecessor-version":[{"id":11729,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages\/11549\/revisions\/11729"}],"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\/11594"}],"wp:attachment":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media?parent=11549"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/categories?post=11549"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/tags?post=11549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}