{"id":26320,"date":"2026-08-08T14:06:04","date_gmt":"2026-08-08T05:06:04","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=26320"},"modified":"2026-08-08T14:08:18","modified_gmt":"2026-08-08T05:08:18","slug":"%e6%96%87%e5%ad%97%e6%95%b0%e3%82%ab%e3%82%a6%e3%83%b3%e3%83%88%e3%82%b5%e3%82%a4%e3%83%88","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=26320","title":{"rendered":"\u6587\u5b57\u6570\u30ab\u30a6\u30f3\u30c8\u30b5\u30a4\u30c8"},"content":{"rendered":"\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"ja\">\n&lt;head>\n  &lt;meta charset=\"UTF-8\">\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  &lt;title>\u6587\u5b57\u6570\u30ab\u30a6\u30f3\u30c8&lt;\/title>\n\n  &lt;style>\n    * {\n      box-sizing: border-box;\n    }\n\n    body {\n      margin: 0;\n      min-height: 100vh;\n      font-family: Arial, \"Hiragino Kaku Gothic ProN\", \"Yu Gothic\", sans-serif;\n      background: #f4f6f8;\n      color: #222;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding: 30px;\n    }\n\n    .container {\n      width: 100%;\n      max-width: 900px;\n      background: white;\n      padding: 30px;\n      border-radius: 16px;\n      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);\n    }\n\n    h1 {\n      margin-top: 0;\n      text-align: center;\n    }\n\n    textarea {\n      width: 100%;\n      height: 350px;\n      resize: vertical;\n      padding: 18px;\n      font-size: 16px;\n      line-height: 1.7;\n      border: 1px solid #ccc;\n      border-radius: 10px;\n      outline: none;\n    }\n\n    textarea:focus {\n      border-color: #555;\n    }\n\n    .counts {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n      gap: 12px;\n      margin-top: 20px;\n    }\n\n    .count-box {\n      background: #f7f7f7;\n      padding: 18px;\n      border-radius: 10px;\n      text-align: center;\n    }\n\n    .count-box strong {\n      display: block;\n      font-size: 28px;\n      margin-top: 5px;\n    }\n\n    .buttons {\n      margin-top: 20px;\n      display: flex;\n      gap: 10px;\n      justify-content: center;\n      flex-wrap: wrap;\n    }\n\n    button {\n      border: none;\n      padding: 12px 22px;\n      border-radius: 8px;\n      cursor: pointer;\n      font-size: 15px;\n      background: #222;\n      color: white;\n    }\n\n    button:hover {\n      opacity: 0.8;\n    }\n  &lt;\/style>\n&lt;\/head>\n\n&lt;body>\n\n&lt;div class=\"container\">\n\n  &lt;h1>\u6587\u5b57\u6570\u30ab\u30a6\u30f3\u30c8&lt;\/h1>\n\n  &lt;textarea\n    id=\"text\"\n    placeholder=\"\u3053\u3053\u306b\u6587\u7ae0\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\"\n  >&lt;\/textarea>\n\n  &lt;div class=\"counts\">\n\n    &lt;div class=\"count-box\">\n      \u6587\u5b57\u6570\n      &lt;strong id=\"characterCount\">0&lt;\/strong>\n    &lt;\/div>\n\n    &lt;div class=\"count-box\">\n      \u7a7a\u767d\u3092\u9664\u304f\n      &lt;strong id=\"noSpaceCount\">0&lt;\/strong>\n    &lt;\/div>\n\n    &lt;div class=\"count-box\">\n      \u884c\u6570\n      &lt;strong id=\"lineCount\">0&lt;\/strong>\n    &lt;\/div>\n\n  &lt;\/div>\n\n  &lt;div class=\"buttons\">\n\n    &lt;button id=\"copyButton\">\n      \u30b3\u30d4\u30fc\n    &lt;\/button>\n\n    &lt;button id=\"clearButton\">\n      \u3059\u3079\u3066\u524a\u9664\n    &lt;\/button>\n\n  &lt;\/div>\n\n&lt;\/div>\n\n&lt;script>\n\nconst textArea = document.getElementById(\"text\");\n\nconst characterCount =\ndocument.getElementById(\"characterCount\");\n\nconst noSpaceCount =\ndocument.getElementById(\"noSpaceCount\");\n\nconst lineCount =\ndocument.getElementById(\"lineCount\");\n\nconst copyButton =\ndocument.getElementById(\"copyButton\");\n\nconst clearButton =\ndocument.getElementById(\"clearButton\");\n\n\nfunction countText() {\n\n  const text = textArea.value;\n\n  \/\/ \u5168\u6587\u5b57\u6570\n  characterCount.textContent = text.length;\n\n  \/\/ \u7a7a\u767d\u30fb\u6539\u884c\u3092\u9664\u3044\u305f\u6587\u5b57\u6570\n  noSpaceCount.textContent =\n    text.replace(\/\\s\/g, \"\").length;\n\n  \/\/ \u884c\u6570\n  if (text.length === 0) {\n\n    lineCount.textContent = 0;\n\n  } else {\n\n    lineCount.textContent =\n      text.split(\"\\n\").length;\n\n  }\n\n}\n\n\ntextArea.addEventListener(\n  \"input\",\n  countText\n);\n\n\ncopyButton.addEventListener(\n  \"click\",\n  async () => {\n\n    await navigator.clipboard.writeText(\n      textArea.value\n    );\n\n    copyButton.textContent =\n      \"\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\";\n\n    setTimeout(() => {\n\n      copyButton.textContent =\n        \"\u30b3\u30d4\u30fc\";\n\n    }, 1500);\n\n  }\n);\n\n\nclearButton.addEventListener(\n  \"click\",\n  () => {\n\n    textArea.value = \"\";\n\n    countText();\n\n    textArea.focus();\n\n  }\n);\n\n\n&lt;\/script>\n\n&lt;\/body>\n&lt;\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[80,1],"tags":[3],"class_list":["post-26320","post","type-post","status-publish","format-standard","hentry","category-html","category-uncategorized","tag-programming"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26320","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=26320"}],"version-history":[{"count":1,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26320\/revisions"}],"predecessor-version":[{"id":26322,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26320\/revisions\/26322"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=26320"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=26320"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=26320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}