{"id":25942,"date":"2025-03-31T01:24:45","date_gmt":"2025-03-30T16:24:45","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25942"},"modified":"2025-03-31T01:24:46","modified_gmt":"2025-03-30T16:24:46","slug":"%e5%87%ba%e4%bc%9a%e3%81%84%e7%b3%bb%e3%82%b5%e3%82%a4%e3%83%88","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25942","title":{"rendered":"\u51fa\u4f1a\u3044\u7cfb\u30b5\u30a4\u30c8"},"content":{"rendered":"\n
<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>\u51fa\u4f1a\u3044\u5e83\u5834 - \u30de\u30c3\u30c1\u30f3\u30b0<\/title>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    body {\n      font-family: 'Arial', sans-serif;\n      background: #f2f2f2;\n      margin: 0;\n      padding: 0;\n    }\n    header {\n      background-color: #ff4d6d;\n      color: white;\n      padding: 20px;\n      text-align: center;\n      font-size: 24px;\n    }\n    .container {\n      max-width: 800px;\n      margin: 20px auto;\n      padding: 20px;\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n    }\n    label {\n      display: block;\n      margin-top: 10px;\n    }\n    input, textarea, select {\n      width: 100%;\n      padding: 10px;\n      margin-top: 5px;\n      border-radius: 4px;\n      border: 1px solid #ccc;\n    }\n    button {\n      margin-top: 15px;\n      background: #ff4d6d;\n      color: white;\n      border: none;\n      padding: 10px 20px;\n      border-radius: 4px;\n      cursor: pointer;\n    }\n    .user-card {\n      background: #fff0f3;\n      padding: 10px;\n      margin-bottom: 10px;\n      border-radius: 6px;\n      display: flex;\n      align-items: center;\n    }\n    .user-card img {\n      width: 80px;\n      height: 80px;\n      border-radius: 50%;\n      margin-right: 15px;\n      object-fit: cover;\n    }\n    @media (max-width: 600px) {\n      .user-card {\n        flex-direction: column;\n        align-items: flex-start;\n      }\n      .user-card img {\n        margin-bottom: 10px;\n      }\n    }\n  <\/style>\n<\/head>\n<body>\n\n<header>\u51fa\u4f1a\u3044\u5e83\u5834<\/header>\n\n<div class=\"container\">\n  <h2>\u30d7\u30ed\u30d5\u30a3\u30fc\u30eb\u767b\u9332<\/h2>\n  <form id=\"profileForm\">\n    <label>\u30cb\u30c3\u30af\u30cd\u30fc\u30e0<\/label>\n    <input type=\"text\" id=\"nickname\" required>\n\n    <label>\u30d7\u30ed\u30d5\u30a3\u30fc\u30eb\u753b\u50cfURL<\/label>\n    <input type=\"url\" id=\"avatar\" placeholder=\"https:\/\/example.com\/avatar.jpg\">\n\n    <label>\u5e74\u9f62<\/label>\n    <input type=\"number\" id=\"age\" required>\n\n    <label>\u6027\u5225<\/label>\n    <select id=\"gender\">\n      <option value=\"\u7537\u6027\">\u7537\u6027<\/option>\n      <option value=\"\u5973\u6027\">\u5973\u6027<\/option>\n      <option value=\"\u305d\u306e\u4ed6\">\u305d\u306e\u4ed6<\/option>\n    <\/select>\n\n    <label>\u81ea\u5df1\u7d39\u4ecb<\/label>\n    <textarea id=\"bio\" rows=\"3\" required><\/textarea>\n\n    <button type=\"submit\">\u767b\u9332\u3059\u308b<\/button>\n  <\/form>\n<\/div>\n\n<div class=\"container\">\n  <h2>\u30e6\u30fc\u30b6\u30fc\u4e00\u89a7<\/h2>\n\n  <label>\u6027\u5225\u3067\u7d5e\u308a\u8fbc\u3080:<\/label>\n  <select id=\"filterGender\">\n    <option value=\"\u3059\u3079\u3066\">\u3059\u3079\u3066<\/option>\n    <option value=\"\u7537\u6027\">\u7537\u6027<\/option>\n    <option value=\"\u5973\u6027\">\u5973\u6027<\/option>\n    <option value=\"\u305d\u306e\u4ed6\">\u305d\u306e\u4ed6<\/option>\n  <\/select>\n\n  <div id=\"userList\" style=\"margin-top:20px;\"><\/div>\n<\/div>\n\n<script>\n  const form = document.getElementById('profileForm');\n  const userList = document.getElementById('userList');\n  const filterGender = document.getElementById('filterGender');\n  let users = [];\n\n  form.addEventListener('submit', function(e) {\n    e.preventDefault();\n\n    const user = {\n      nickname: document.getElementById('nickname').value,\n      age: document.getElementById('age').value,\n      gender: document.getElementById('gender').value,\n      bio: document.getElementById('bio').value,\n      avatar: document.getElementById('avatar').value || 'https:\/\/via.placeholder.com\/80'\n    };\n\n    users.push(user);\n    form.reset();\n    renderUsers();\n  });\n\n  filterGender.addEventListener('change', renderUsers);\n\n  function renderUsers() {\n    const filter = filterGender.value;\n    userList.innerHTML = '';\n\n    users\n      .filter(user => filter === '\u3059\u3079\u3066' || user.gender === filter)\n      .forEach(user => {\n        const card = document.createElement('div');\n        card.className = 'user-card';\n        card.innerHTML = `\n          <img src=\"${user.avatar}\" alt=\"avatar\">\n          <div>\n            <strong>${user.nickname}<\/strong>\uff08${user.age}\u6b73\u30fb${user.gender}\uff09<br>\n            <p>${user.bio}<\/p>\n          <\/div>\n        `;\n        userList.appendChild(card);\n      });\n  }\n<\/script>\n\n<\/body>\n<\/html>\n<\/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,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[87],"tags":[],"class_list":["post-25942","post","type-post","status-publish","format-standard","hentry","category-web"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25942","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=25942"}],"version-history":[{"count":2,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25942\/revisions"}],"predecessor-version":[{"id":25944,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25942\/revisions\/25944"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25942"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25942"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25942"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}