{"id":25441,"date":"2024-08-02T18:01:56","date_gmt":"2024-08-02T09:01:56","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25441"},"modified":"2024-08-02T18:01:58","modified_gmt":"2024-08-02T09:01:58","slug":"myblog-html","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25441","title":{"rendered":"myblog.html"},"content":{"rendered":"\n
<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>\u79c1\u306e\u30d6\u30ed\u30b0<\/title>\n  <style>\n    body {\n      font-family: Arial, sans-serif;\n      margin: 0;\n      padding: 0;\n    }\n    .navbar {\n      background-color: #333;\n      color: #fff;\n      padding: 15px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n    .navbar a {\n      color: #fff;\n      text-decoration: none;\n      padding: 0 15px;\n    }\n    .navbar a:hover {\n      text-decoration: underline;\n    }\n    .navbar .menu-toggle {\n      display: none;\n    }\n    .navbar .menu {\n      display: flex;\n    }\n    .navbar .menu .dropdown {\n      position: relative;\n      display: inline-block;\n    }\n    .navbar .menu .dropdown-content {\n      display: none;\n      position: absolute;\n      background-color: #444;\n      min-width: 160px;\n      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n      z-index: 1;\n    }\n    .navbar .menu .dropdown-content a {\n      color: #fff;\n      padding: 12px 16px;\n      text-decoration: none;\n      display: block;\n    }\n    .navbar .menu .dropdown-content a:hover {\n      background-color: #555;\n    }\n    .navbar .menu .dropdown:hover .dropdown-content {\n      display: block;\n    }\n    .custom-banner {\n      background-color: #f0f0f0;\n      text-align: center;\n      padding: 60px 20px;\n    }\n    .custom-banner h1 {\n      color: #333;\n      margin: 0;\n      font-size: 2.5em;\n    }\n    .content {\n      padding: 20px;\n    }\n    .post {\n      border-bottom: 1px solid #ddd;\n      padding: 20px 0;\n      transition: background-color 0.3s;\n    }\n    .post:hover {\n      background-color: #f9f9f9;\n    }\n    .post h2 {\n      margin: 0;\n      color: #333;\n    }\n    .post p {\n      margin: 10px 0 0;\n      color: #666;\n    }\n    .footer {\n      background-color: #333;\n      color: #fff;\n      text-align: center;\n      padding: 10px;\n      position: fixed;\n      width: 100%;\n      bottom: 0;\n    }\n    .contact-form {\n      max-width: 600px;\n      margin: 20px auto;\n      padding: 20px;\n      border: 1px solid #ddd;\n      border-radius: 5px;\n      background-color: #fff;\n    }\n    .contact-form label {\n      display: block;\n      margin-bottom: 5px;\n      color: #333;\n    }\n    .contact-form input, .contact-form textarea {\n      width: 100%;\n      padding: 10px;\n      margin-bottom: 10px;\n      border: 1px solid #ddd;\n      border-radius: 3px;\n    }\n    .contact-form button {\n      background-color: #333;\n      color: #fff;\n      padding: 10px 20px;\n      border: none;\n      border-radius: 3px;\n      cursor: pointer;\n    }\n    .contact-form button:hover {\n      background-color: #555;\n    }\n    @media (max-width: 600px) {\n      .navbar .menu-toggle {\n        display: block;\n        cursor: pointer;\n      }\n      .navbar .menu {\n        display: none;\n        flex-direction: column;\n        width: 100%;\n      }\n      .navbar .menu a {\n        padding: 10px;\n        border-top: 1px solid #444;\n      }\n      .navbar .menu.open {\n        display: flex;\n      }\n    }\n  <\/style>\n<\/head>\n<body>\n  <div class=\"navbar\">\n    <div>\u79c1\u306e\u30d6\u30ed\u30b0<\/div>\n    <div class=\"menu-toggle\">\u30e1\u30cb\u30e5\u30fc<\/div>\n    <div class=\"menu\">\n      <a href=\"#home\">\u30db\u30fc\u30e0<\/a>\n      <a href=\"#about\">\u7d39\u4ecb<\/a>\n      <a href=\"#posts\">\u8a18\u4e8b<\/a>\n      <a href=\"#contact\">\u304a\u554f\u3044\u5408\u308f\u305b<\/a>\n      <div class=\"dropdown\">\n        <a href=\"#more\">\u3082\u3063\u3068<\/a>\n        <div class=\"dropdown-content\">\n          <a href=\"#link1\">\u30ea\u30f3\u30af 1<\/a>\n          <a href=\"#link2\">\u30ea\u30f3\u30af 2<\/a>\n          <a href=\"#link3\">\u30ea\u30f3\u30af 3<\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"custom-banner\">\n    <h1>\u79c1\u306e\u30d6\u30ed\u30b0\u3078\u3088\u3046\u3053\u305d<\/h1>\n  <\/div>\n\n  <div class=\"content\" id=\"home\">\n    <h2>\u30db\u30fc\u30e0<\/h2>\n    <p>\u3053\u3053\u306f\u30db\u30fc\u30e0\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002<\/p>\n  <\/div>\n\n  <div class=\"content\" id=\"about\">\n    <h2>\u7d39\u4ecb<\/h2>\n    <p>\u3053\u3053\u306f\u7d39\u4ecb\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002<\/p>\n  <\/div>\n\n  <div class=\"content\" id=\"posts\">\n    <h2>\u8a18\u4e8b<\/h2>\n    <div class=\"post\">\n      <h2>\u8a18\u4e8b\u30bf\u30a4\u30c8\u30eb 1<\/h2>\n      <p>\u3053\u306e\u8a18\u4e8b\u306e\u6982\u8981\u3084\u5185\u5bb9\u304c\u3053\u3053\u306b\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n    <\/div>\n    <div class=\"post\">\n      <h2>\u8a18\u4e8b\u30bf\u30a4\u30c8\u30eb 2<\/h2>\n      <p>\u3053\u306e\u8a18\u4e8b\u306e\u6982\u8981\u3084\u5185\u5bb9\u304c\u3053\u3053\u306b\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n    <\/div>\n    <!-- \u8ffd\u52a0\u306e\u8a18\u4e8b\u3092\u3053\u3053\u306b\u8ffd\u52a0 -->\n  <\/div>\n\n  <div class=\"content\" id=\"contact\">\n    <h2>\u304a\u554f\u3044\u5408\u308f\u305b<\/h2>\n    <form class=\"contact-form\">\n      <label for=\"name\">\u540d\u524d:<\/label>\n      <input type=\"text\" id=\"name\" name=\"name\" required>\n\n      <label for=\"email\">\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9:<\/label>\n      <input type=\"email\" id=\"email\" name=\"email\" required>\n\n      <label for=\"message\">\u30e1\u30c3\u30bb\u30fc\u30b8:<\/label>\n      <textarea id=\"message\" name=\"message\" rows=\"5\" required><\/textarea>\n\n      <button type=\"submit\">\u9001\u4fe1<\/button>\n    <\/form>\n  <\/div>\n\n  <div class=\"footer\">\n    &copy; 2024 \u79c1\u306e\u30d6\u30ed\u30b0. All rights reserved.\n  <\/div>\n\n  <script>\n    document.addEventListener('DOMContentLoaded', function() {\n      const menuToggle = document.querySelector('.menu-toggle');\n      const menu = document.querySelector('.menu');\n      const contactForm = document.querySelector('.contact-form');\n\n      menuToggle.addEventListener('click', function() {\n        menu.classList.toggle('open');\n      });\n\n      contactForm.addEventListener('submit', function(event) {\n        event.preventDefault();\n        alert('\u30d5\u30a9\u30fc\u30e0\u304c\u9001\u4fe1\u3055\u308c\u307e\u3057\u305f\uff01');\n        \/\/ \u3053\u3053\u3067\u30d5\u30a9\u30fc\u30e0\u306e\u30c7\u30fc\u30bf\u3092\u9001\u4fe1\u3059\u308b\u51e6\u7406\u3092\u8ffd\u52a0\u3067\u304d\u307e\u3059\n      });\n\n      alert('\u30d6\u30ed\u30b0\u3078\u3088\u3046\u3053\u305d\uff01');\n    });\n  <\/script>\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":[81,80,78],"tags":[3],"class_list":["post-25441","post","type-post","status-publish","format-standard","hentry","category-css","category-html","category-javascript","tag-programming"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25441","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=25441"}],"version-history":[{"count":2,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25441\/revisions"}],"predecessor-version":[{"id":25453,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25441\/revisions\/25453"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25441"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25441"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}