<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>二四家(にしのや)</title> <style> body { font-family: "Helvetica Neue", Arial, sans-serif; background-color: #f2f2f2; margin: 0; padding: 0; } header { background-color: orange; padding: 10px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } #logo-container { display: flex; align-items: center; } #logo { margin-bottom: 5px; } h2 { margin: 0; font-size: 36px; color: #333; } /* トグルボタンのスタイル */ .menu-toggle { display: none; } .menu-toggle-label { display: block; cursor: pointer; padding: 10px; color: #fff; font-size: 24px; } /* メニューのスタイル */ .menu { display: none; position: absolute; top: 100%; right: 0; background-color: #f26522; padding: 0; list-style-type: none; text-align: right; } .menu li { margin-top: 10px; } .menu li a { display: block; padding: 10px; color: #fff; text-decoration: none; transition: background-color 0.3s ease; } .menu li a:hover { background-color: #e1561c; } #content { max-width: 800px; margin: 20px auto; padding: 20px; background-color: #fff; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } h2 { margin: 0 0 20px; font-size: 24px; color: #333; } p { margin-bottom: 20px; font-size: 16px; line-height: 1.5; color: #555; } .product { display: grid; grid-template-columns: 1fr 2fr; grid-gap: 20px; margin-bottom: 20px; } .product img { width: 100%; max-width: 400px; border-radius: 5px; } .product h3 { margin: 0; font-size: 24px; color: #333; } footer { background-color: #333; padding: 20px; text-align: center; color: #fff; } </style> </head> <body> <header> <div id="logo-container"> <img id="logo" src="1686296908880.jpg" alt="二四家ロゴ" width="200px"> <h2> </h2> </div> <input type="checkbox" id="menu-toggle" class="menu-toggle"> <label for="menu-toggle" class="menu-toggle-label">☰</label> <nav> <ul id="menu" class="menu"> <li><a href="menu_details.html">メニューの詳細</a></li> <li><a href="specialty.html">御来店の際のご注意</a></li> <li><a href="class.html">2年4組について</a></li> <li><a href="photo_booth.html">フォトブース</a></li> </ul> </nav> </header> <img id="top-image" src="1686401596506.jpg" alt="トップページ画像" width="100%" style="display: block; margin: 20px auto;"> <div id="content"> <h2>販売商品</h2> <div class="product"> <img src="168648729145000000.jpg" alt="極限豚丼"> <div> <h3>極限豚丼 300円</h3> <p>濃厚な味わいが特徴の極限豚丼です。</p> </div> </div> <div class="product"> <img src="168648729942700000.jpg" alt="みたらし団子"> <div> <h3>みたらし団子 100円</h3> <p>優しい甘さが魅力のみたらし団子です。</p> </div> </div> <h2>キャッチコピー - 邦を開く味わい</h2> <p>「開邦雄飛」 開邦高校の校訓であるこの言葉のよう、邦を開き世界へ羽ばたく私たちの志を表現しています。</p> </div> <p>アクセスカウンター: <span id="counter">0</span></p> <p>累計アクセス数: <span id="total-counter">0</span></p> <script> document.addEventListener('DOMContentLoaded', function() { const menuToggle = document.getElementById('menu-toggle'); const menu = document.getElementById('menu'); menuToggle.addEventListener('change', function() { if (menuToggle.checked) { menu.style.display = 'block'; } else { menu.style.display = 'none'; } }); }); // ロゴマークをクリックしたときにホームに戻るイベントを追加 const logoElement = document.getElementById("logo"); logoElement.addEventListener("click", function() { window.location.href = "nishinoya.html"; }); // アクセスカウンターのプログラム let counter = 0; const counterElement = document.getElementById("counter"); const totalCounterElement = document.getElementById("total-counter"); function incrementCounter() { counter++; counterElement.textContent = counter; // ブラウザのローカルストレージにカウンターの値を保存 localStorage.setItem("accessCounter", counter); } // ページが読み込まれた時にカウンターを初期化 window.addEventListener("load", function() { // ローカルストレージからカウンターの値を取得 const storedCounter = localStorage.getItem("accessCounter"); if (storedCounter) { counter = parseInt(storedCounter); counterElement.textContent = counter; } }); // ウィンドウが閉じられる時に累計アクセス数を更新 window.addEventListener("beforeunload", function() { // ブラウザのローカルストレージから累計アクセス数を取得 const storedTotalCounter = localStorage.getItem("totalAccessCounter"); let totalCounter = 0; if (storedTotalCounter) { totalCounter = parseInt(storedTotalCounter); } totalCounter += counter; totalCounterElement.textContent = totalCounter; // 更新した累計アクセス数をブラウザのローカルストレージに保存 localStorage.setItem("totalAccessCounter", totalCounter); }); </script> <footer> © 2023 二四家 All rights reserved. </footer> </body> </html>