{"id":25686,"date":"2024-11-24T10:41:45","date_gmt":"2024-11-24T01:41:45","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25686"},"modified":"2024-11-24T10:41:47","modified_gmt":"2024-11-24T01:41:47","slug":"amazon%e9%a2%a8ec%e3%82%b5%e3%82%a4%e3%83%88","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25686","title":{"rendered":"Amazon\u98a8EC\u30b5\u30a4\u30c8"},"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>Amazon\u98a8EC\u30b5\u30a4\u30c8<\/title>\n    <style>\n        \/* === \u5168\u4f53\u306e\u30ea\u30bb\u30c3\u30c8\u3068\u57fa\u672c\u30b9\u30bf\u30a4\u30eb === *\/\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        body {\n            font-family: Arial, sans-serif;\n            background-color: #f8f9fa;\n            color: #333;\n        }\n\n        img {\n            max-width: 100%;\n            height: auto;\n        }\n\n        button {\n            cursor: pointer;\n            border: none;\n            padding: 10px 15px;\n            border-radius: 5px;\n        }\n\n        a {\n            text-decoration: none;\n            color: inherit;\n        }\n\n        \/* === \u30d8\u30c3\u30c0\u30fc\u90e8\u5206 === *\/\n        header {\n            background-color: #232f3e;\n            color: white;\n            padding: 10px 20px;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n        }\n\n        header .logo {\n            font-size: 24px;\n            font-weight: bold;\n        }\n\n        header .search-bar {\n            flex: 1;\n            margin: 0 20px;\n            display: flex;\n        }\n\n        header .search-bar input {\n            width: 100%;\n            padding: 8px;\n            font-size: 16px;\n            border-radius: 4px 0 0 4px;\n            border: none;\n        }\n\n        header .search-bar button {\n            background-color: #ff9900;\n            color: white;\n            font-size: 16px;\n            border-radius: 0 4px 4px 0;\n        }\n\n        header .user-actions {\n            display: flex;\n            align-items: center;\n            gap: 15px;\n        }\n\n        header .user-actions a {\n            color: white;\n            font-size: 16px;\n        }\n\n        header .cart-icon {\n            position: relative;\n        }\n\n        header .cart-count {\n            position: absolute;\n            top: -5px;\n            right: -10px;\n            background-color: red;\n            color: white;\n            font-size: 12px;\n            border-radius: 50%;\n            padding: 4px 7px;\n        }\n\n        \/* === \u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u30d0\u30fc === *\/\n        nav {\n            background-color: #37475a;\n            padding: 10px 20px;\n            display: flex;\n            justify-content: space-around;\n        }\n\n        nav a {\n            color: white;\n            font-size: 16px;\n        }\n\n        \/* === \u30d0\u30ca\u30fc\u30bb\u30af\u30b7\u30e7\u30f3 === *\/\n        .banner {\n            background-image: url('https:\/\/via.placeholder.com\/1200x400');\n            background-size: cover;\n            background-position: center;\n            height: 400px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            text-align: center;\n            color: white;\n        }\n\n        .banner h1 {\n            font-size: 36px;\n            margin-bottom: 10px;\n        }\n\n        .banner button {\n            background-color: #ff9900;\n            border: none;\n            color: white;\n            font-size: 16px;\n            padding: 10px 20px;\n        }\n\n        \/* === \u5546\u54c1\u30bb\u30af\u30b7\u30e7\u30f3 === *\/\n        .products {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 20px;\n            justify-content: center;\n            padding: 20px;\n        }\n\n        .product {\n            width: 23%;\n            background-color: white;\n            border-radius: 8px;\n            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n            padding: 15px;\n            text-align: center;\n        }\n\n        .product img {\n            height: 150px;\n            object-fit: cover;\n            border-radius: 8px;\n        }\n\n        .product h3 {\n            font-size: 18px;\n            margin: 10px 0;\n        }\n\n        .product .price {\n            font-size: 16px;\n            color: #ff9900;\n            margin-bottom: 10px;\n        }\n\n        .product button {\n            background-color: #ff9900;\n            color: white;\n            font-size: 14px;\n        }\n\n        .product .favorite {\n            background-color: #e0e0e0;\n            color: #333;\n            font-size: 14px;\n            margin-top: 10px;\n        }\n\n        \/* === \u30ab\u30fc\u30c8\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7 === *\/\n        .cart-popup {\n            position: fixed;\n            top: 70px;\n            right: 20px;\n            background-color: white;\n            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n            border-radius: 8px;\n            width: 300px;\n            padding: 20px;\n            display: none;\n            z-index: 1000;\n        }\n\n        .cart-popup h3 {\n            margin-bottom: 10px;\n            font-size: 18px;\n        }\n\n        .cart-popup .cart-item {\n            display: flex;\n            justify-content: space-between;\n            margin-bottom: 10px;\n        }\n\n        .cart-popup .cart-item span {\n            font-size: 14px;\n        }\n\n        .cart-popup button {\n            width: 100%;\n            background-color: #ff9900;\n            border: none;\n            color: white;\n            padding: 10px;\n            font-size: 16px;\n        }\n\n        \/* === \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc === *\/\n        @media (max-width: 768px) {\n            .product {\n                width: 48%;\n            }\n\n            header .search-bar {\n                flex-direction: column;\n                gap: 10px;\n            }\n        }\n\n        @media (max-width: 480px) {\n            .product {\n                width: 100%;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n    <header>\n        <div class="logo">Amazon\u98a8EC\u30b5\u30a4\u30c8<\/div>\n        <div class="search-bar">\n            <input type="text" placeholder="\u5546\u54c1\u3092\u691c\u7d22">\n            <button>\u691c\u7d22<\/button>\n        <\/div>\n        <div class="user-actions">\n            <a href="#">\u30ed\u30b0\u30a4\u30f3<\/a>\n            <div class="cart-icon" onclick="toggleCartPopup()">\n                <img src="https:\/\/via.placeholder.com\/32" alt="\u30ab\u30fc\u30c8">\n                <div class="cart-count">0<\/div>\n            <\/div>\n        <\/div>\n    <\/header>\n    <nav>\n        <a href="#">\u30db\u30fc\u30e0<\/a>\n        <a href="#">\u30ab\u30c6\u30b4\u30ea<\/a>\n        <a href="#">\u30bb\u30fc\u30eb<\/a>\n        <a href="#">\u304a\u3059\u3059\u3081<\/a>\n    <\/nav>\n    <div class="banner">\n        <div>\n            <h1>\u30d3\u30c3\u30b0\u30bb\u30fc\u30eb\u958b\u50ac\u4e2d\uff01<\/h1>\n            <button>\u30bb\u30fc\u30eb\u3092\u898b\u308b<\/button>\n        <\/div>\n    <\/div>\n    <div class="products">\n        <div class="product">\n            <img src="https:\/\/via.placeholder.com\/200" alt="\u5546\u54c11">\n            <h3>\u5546\u54c11<\/h3>\n            <div class="price">\u00a53,000<\/div>\n            <button onclick="addToCart('\u5546\u54c11', '\u00a53,000')">\u30ab\u30fc\u30c8\u306b\u8ffd\u52a0<\/button>\n            <button class="favorite" onclick="addToFavorite('\u5546\u54c11')">\u304a\u6c17\u306b\u5165\u308a<\/button>\n        <\/div>\n        <div class="product">\n            <img src="https:\/\/via.placeholder.com\/200" alt="\u5546\u54c12">\n            <h3>\u5546\u54c12<\/h3>\n            <div class="price">\u00a55,000<\/div>\n            <button onclick="addToCart('\u5546\u54c12', '\u00a55,000')">\u30ab\u30fc\u30c8\u306b\u8ffd\u52a0<\/button>\n            <button class="favorite" onclick="addToFavorite('\u5546\u54c12')">\u304a\u6c17\u306b\u5165\u308a<\/button>\n        <\/div>\n    <\/div>\n    <div class="cart-popup" id="cart-popup">\n        <h3>\u30ab\u30fc\u30c8\u306e\u4e2d\u8eab<\/h3>\n        <div id="cart-items"><\/div>\n        <button onclick="checkout()">\u8cfc\u5165\u624b\u7d9a\u304d\u3078<\/button>\n    <\/div>\n    <script>\n        let cart = [];\n        let favorites = [];\n        \n        function addToCart(name, price) {\n            cart.push({ name, price });\n            updateCart();\n            alert(`${name} \u3092\u30ab\u30fc\u30c8\u306b\u8ffd\u52a0\u3057\u307e\u3057\u305f\uff01`);\n        }\n\n        function addToFavorite(name) {\n            if (!favorites.includes(name)) {\n                favorites.push(name);\n                alert(`${name} \u3092\u304a\u6c17\u306b\u5165\u308a\u306b\u8ffd\u52a0\u3057\u307e\u3057\u305f\uff01`);\n            } else {\n                alert(`${name} \u306f\u3059\u3067\u306b\u304a\u6c17\u306b\u5165\u308a\u306b\u8ffd\u52a0\u3055\u308c\u3066\u3044\u307e\u3059\uff01`);\n            }\n        }\n\n        function updateCart() {\n            const cartCount = document.querySelector('.cart-count');\n            const cartItems = document.getElementById('cart-items');\n\n            cartCount.textContent = cart.length;\n            cartItems.innerHTML = '';\n\n            cart.forEach(item => {\n                const div = document.createElement('div');\n                div.className = 'cart-item';\n                div.innerHTML = `<span>${item.name}<\/span><span>${item.price}<\/span>`;\n                cartItems.appendChild(div);\n            });\n        }\n\n        function toggleCartPopup() {\n            const cartPopup = document.getElementById('cart-popup');\n            cartPopup.style.display = cartPopup.style.display === 'block' ? 'none' : 'block';\n        }\n\n        function checkout() {\n            alert('\u8cfc\u5165\u624b\u7d9a\u304d\u3092\u958b\u59cb\u3057\u307e\u3059\uff01');\n            cart = [];\n            updateCart();\n            toggleCartPopup();\n        }\n    <\/script>\n<\/body>\n<\/html>\n\n<\/pre><\/div>","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-25686","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\/25686","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=25686"}],"version-history":[{"count":2,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25686\/revisions"}],"predecessor-version":[{"id":25688,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25686\/revisions\/25688"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25686"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25686"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25686"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}