{"id":25793,"date":"2025-01-14T14:58:19","date_gmt":"2025-01-14T05:58:19","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25793"},"modified":"2025-01-14T14:58:21","modified_gmt":"2025-01-14T05:58:21","slug":"%e3%82%a2%e3%83%97%e3%83%aa%e3%82%b9%e3%83%88%e3%82%a2-html","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25793","title":{"rendered":"\u30a2\u30d7\u30ea\u30b9\u30c8\u30a2.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>\u30a2\u30d7\u30ea\u30b9\u30c8\u30a2<\/title>\n    <style>\n        \/* \u5168\u4f53\u306e\u30b9\u30bf\u30a4\u30eb *\/\n        body {\n            font-family: 'Roboto', sans-serif;\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n            background-color: #f9f9f9;\n            color: #333;\n        }\n\n        a {\n            text-decoration: none;\n            color: inherit;\n        }\n\n        ul {\n            list-style: none;\n            padding: 0;\n            margin: 0;\n        }\n\n        \/* \u30d8\u30c3\u30c0\u30fc *\/\n        header {\n            background-color: #0066cc;\n            color: white;\n            padding: 1rem 0;\n            position: sticky;\n            top: 0;\n            z-index: 1000;\n            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n        }\n\n        header .container {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            max-width: 1200px;\n            margin: 0 auto;\n            padding: 0 1rem;\n        }\n\n        header h1 a {\n            color: white;\n            font-size: 1.5rem;\n            font-weight: bold;\n        }\n\n        header nav ul {\n            display: flex;\n            gap: 1rem;\n        }\n\n        header nav a {\n            color: white;\n            font-size: 1rem;\n            font-weight: 500;\n            transition: color 0.3s;\n        }\n\n        header nav a:hover {\n            color: #ffcc00;\n        }\n\n        \/* \u30d2\u30fc\u30ed\u30fc\u30bb\u30af\u30b7\u30e7\u30f3 *\/\n        .hero {\n            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('hero-image.jpg') no-repeat center center\/cover;\n            color: white;\n            text-align: center;\n            padding: 6rem 1rem;\n        }\n\n        .hero h2 {\n            font-size: 3rem;\n            margin-bottom: 1rem;\n            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);\n        }\n\n        .hero p {\n            font-size: 1.5rem;\n            margin-bottom: 2rem;\n            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);\n        }\n\n        .hero .btn-primary {\n            background-color: #ffcc00;\n            color: #333;\n            padding: 1rem 2rem;\n            border-radius: 5px;\n            font-weight: bold;\n            font-size: 1.25rem;\n            transition: background-color 0.3s, transform 0.3s;\n        }\n\n        .hero .btn-primary:hover {\n            background-color: #e6b800;\n            transform: scale(1.05);\n        }\n\n        \/* \u30ab\u30c6\u30b4\u30ea\u30bb\u30af\u30b7\u30e7\u30f3 *\/\n        .categories {\n            background-color: #f1f1f1;\n            padding: 3rem 1rem;\n            text-align: center;\n        }\n\n        .categories h2 {\n            font-size: 2.5rem;\n            margin-bottom: 1.5rem;\n        }\n\n        .categories .category-list {\n            display: flex;\n            justify-content: center;\n            gap: 1.5rem;\n            flex-wrap: wrap;\n        }\n\n        .categories .category-list a {\n            background-color: #0066cc;\n            color: white;\n            padding: 0.75rem 1.5rem;\n            border-radius: 5px;\n            font-size: 1.25rem;\n            font-weight: bold;\n            transition: background-color 0.3s, transform 0.3s;\n        }\n\n        .categories .category-list a:hover {\n            background-color: #004d99;\n            transform: scale(1.1);\n        }\n\n        \/* \u30a2\u30d7\u30ea\u4e00\u89a7 *\/\n        .app-list {\n            padding: 3rem 1rem;\n            background-color: white;\n        }\n\n        .app-list h2 {\n            text-align: center;\n            font-size: 2.5rem;\n            margin-bottom: 2rem;\n        }\n\n        .apps-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n            gap: 2rem;\n            max-width: 1200px;\n            margin: 0 auto;\n        }\n\n        .app-card {\n            background-color: #f9f9f9;\n            border: 1px solid #ddd;\n            border-radius: 8px;\n            overflow: hidden;\n            transition: box-shadow 0.3s, transform 0.3s;\n        }\n\n        .app-card:hover {\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);\n            transform: translateY(-5px);\n        }\n\n        .app-card img {\n            width: 100%;\n            height: 200px;\n            object-fit: cover;\n        }\n\n        .app-card h3 {\n            font-size: 1.5rem;\n            margin: 1rem;\n        }\n\n        .app-card p {\n            margin: 0 1rem 1.5rem;\n            font-size: 1.125rem;\n        }\n\n        .app-card .btn-secondary {\n            display: block;\n            text-align: center;\n            margin: 0 1rem 1.5rem;\n            padding: 0.75rem;\n            background-color: #0066cc;\n            color: white;\n            font-size: 1rem;\n            border-radius: 5px;\n            transition: background-color 0.3s;\n        }\n\n        .app-card .btn-secondary:hover {\n            background-color: #004d99;\n        }\n\n        \/* \u30d5\u30c3\u30bf\u30fc *\/\n        footer {\n            background-color: #333;\n            color: white;\n            padding: 2rem 0;\n            text-align: center;\n            font-size: 1rem;\n        }\n\n        footer nav a {\n            color: #ffcc00;\n            margin: 0 0.5rem;\n            transition: color 0.3s;\n        }\n\n        footer nav a:hover {\n            color: white;\n        }\n\n    <\/style>\n<\/head>\n<body>\n    <header>\n        <div class=\"container\">\n            <h1><a href=\"#home\">\u30a2\u30d7\u30ea\u30b9\u30c8\u30a2<\/a><\/h1>\n            <nav>\n                <ul>\n                    <li><a href=\"#home\">\u30db\u30fc\u30e0<\/a><\/li>\n                    <li><a href=\"#categories\">\u30ab\u30c6\u30b4\u30ea<\/a><\/li>\n                    <li><a href=\"#apps\">\u30a2\u30d7\u30ea\u4e00\u89a7<\/a><\/li>\n                    <li><a href=\"#about\">\u3053\u306e\u30b5\u30a4\u30c8\u306b\u3064\u3044\u3066<\/a><\/li>\n                    <li><a href=\"#contact\">\u304a\u554f\u3044\u5408\u308f\u305b<\/a><\/li>\n                    <li><a href=\"#faq\">FAQ<\/a><\/li>\n                <\/ul>\n            <\/nav>\n        <\/div>\n    <\/header>\n\n    <main>\n        <section id=\"home\" class=\"hero\">\n            <div class=\"hero-content\">\n                <h2>\u304a\u6c17\u306b\u5165\u308a\u306e\u30a2\u30d7\u30ea\u3092\u898b\u3064\u3051\u307e\u3057\u3087\u3046\uff01<\/h2>\n                <p>\u6700\u65b0\u306e\u30a2\u30d7\u30ea\u3084\u4fbf\u5229\u306a\u30c4\u30fc\u30eb\u304c\u3053\u3053\u306b\u63c3\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n                <a href=\"#apps\" class=\"btn-primary\">\u30a2\u30d7\u30ea\u3092\u63a2\u3059<\/a>\n            <\/div>\n        <\/section>\n\n        <section id=\"categories\" class=\"categories\">\n            <h2>\u30ab\u30c6\u30b4\u30ea<\/h2>\n            <ul class=\"category-list\">\n                <li><a href=\"#games\">\ud83c\udfae \u30b2\u30fc\u30e0<\/a><\/li>\n                <li><a href=\"#productivity\">\ud83d\udcca \u751f\u7523\u6027\u5411\u4e0a<\/a><\/li>\n                <li><a href=\"#education\">\ud83d\udcda \u6559\u80b2<\/a><\/li>\n                <li><a href=\"#entertainment\">\ud83c\udfa5 \u30a8\u30f3\u30bf\u30fc\u30c6\u30a4\u30e1\u30f3\u30c8<\/a><\/li>\n                <li><a href=\"#health\">\ud83d\udcaa \u5065\u5eb7\u30fb\u30d5\u30a3\u30c3\u30c8\u30cd\u30b9<\/a><\/li>\n                <li><a href=\"#finance\">\ud83d\udcb0 \u30d5\u30a1\u30a4\u30ca\u30f3\u30b9<\/a><\/li>\n            <\/ul>\n        <\/section>\n\n        <section id=\"apps\" class=\"app-list\">\n            <h2>\u304a\u3059\u3059\u3081\u30a2\u30d7\u30ea<\/h2>\n            <div class=\"apps-grid\">\n                <div class=\"app-card\">\n                    <img src=\"app1.jpg\" alt=\"\u30a2\u30d7\u30ea\u540d1\">\n                    <h3>\u30a2\u30d7\u30ea\u540d1<\/h3>\n                    <p>\u8aac\u660e\u6587\u304c\u3053\u3053\u306b\u5165\u308a\u307e\u3059\u3002\u6700\u65b0\u6a5f\u80fd\u3068\u7d20\u6674\u3089\u3057\u3044\u30c7\u30b6\u30a4\u30f3\u3092\u5099\u3048\u3066\u3044\u307e\u3059\u3002<\/p>\n                    <a href=\"#\" class=\"btn-secondary\">\u8a73\u7d30\u3092\u898b\u308b<\/a>\n                <\/div>\n                <div class=\"app-card\">\n                    <img src=\"app2.jpg\" alt=\"\u30a2\u30d7\u30ea\u540d2\">\n                    <h3>\u30a2\u30d7\u30ea\u540d2<\/h3>\n                    <p>\u8aac\u660e\u6587\u304c\u3053\u3053\u306b\u5165\u308a\u307e\u3059\u3002\u65e5\u5e38\u751f\u6d3b\u3092\u8c4a\u304b\u306b\u3059\u308b\u30c4\u30fc\u30eb\u3067\u3059\u3002<\/p>\n                    <a href=\"#\" class=\"btn-secondary\">\u8a73\u7d30\u3092\u898b\u308b<\/a>\n                <\/div>\n            <\/div>\n        <\/section>\n    <\/main>\n\n    <footer>\n        <div class=\"container\">\n            <p>&copy; 2025 \u30a2\u30d7\u30ea\u30b9\u30c8\u30a2. \u5168\u8457\u4f5c\u6a29\u6240\u6709\u3002<\/p>\n            <nav>\n                <a href=\"#privacy\">\u30d7\u30e9\u30a4\u30d0\u30b7\u30fc\u30dd\u30ea\u30b7\u30fc<\/a> |\n                <a href=\"#terms\">\u5229\u7528\u898f\u7d04<\/a> |\n                <a href=\"#sitemap\">\u30b5\u30a4\u30c8\u30de\u30c3\u30d7<\/a>\n            <\/nav>\n        <\/div>\n    <\/footer>\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":[80],"tags":[3],"class_list":["post-25793","post","type-post","status-publish","format-standard","hentry","category-html","tag-programming"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25793","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=25793"}],"version-history":[{"count":2,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25793\/revisions"}],"predecessor-version":[{"id":25795,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25793\/revisions\/25795"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25793"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25793"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}