diff --git a/change.js b/change.js
index 9b2dbf7..5105162 100644
--- a/change.js
+++ b/change.js
@@ -1,10 +1,19 @@
 document.addEventListener("DOMContentLoaded", () => {
     var head = document.querySelector("head");
     var newcss;
-    //let cssbtn1 = document.getElementById("css1");
+    let cssbtn1 = document.getElementById("css1");
     let cssbtn2 = document.getElementById("css2");
     let cssbtn3 = document.getElementById("css3");
     
+    //function bg1(){
+    cssbtn1.addEventListener("click", (e) => {  
+	if (newcss) return;
+	newcss = document.createElement("link");
+	newcss.rel = "stylesheet";
+	newcss.href = "new1.css";
+	head.appendChild(newcss);	// link要素を追加
+    });
+
     cssbtn2.addEventListener("click", (e) => {  
         if (newcss) return;
         newcss = document.createElement("link");
diff --git a/index.html b/index.html
index f874989..6c7d7da 100644
--- a/index.html
+++ b/index.html
@@ -21,20 +21,29 @@
       <button id="logout">Logout</button>
       </p>
 
-      <div class="menu-content">
-        <ul>
-            <li>
-                <p><button type="button" id="unl" class="bg-change">背景1</button></p>
-            </li>
-            <li>
-                <p><button type="button" id="css2" class="bg-change">背景2</button></p>
-            </li>
-            <li>
-              <p><button type="button" id="css3" class="bg-change">背景3</button></p>
-          </li>
-        </ul>
+      <div class="hamburger-menu">
+        <input type="checkbox" id="menu-btn-check">
+        <label for="menu-btn-check" class="menu-btn"><span></span></label>
+        <!--ここからメニュー-->
+        <div class="menu-content">
+            <ul>
+                <li>
+                    <p><button type="button" id="unl" class="bg-change">アンロード</button></p>
+                </li>
+                <li>
+                    <p><button type="button" id="css1" class="bg-change">背景1</button></p>
+                </li>
+                <li>
+                    <p><button type="button" id="css2" class="bg-change">背景2</button></p>
+                </li>
+                <li>
+                  <p><button type="button" id="css3" class="bg-change">背景3</button></p>
+              </li>
+            </ul>
+        </div>
+        <!--ここまでメニュー-->
     </div>
-
+    
       <p>TEXT: <span id="text"></span></p>
       <p>RANK: <button type="button" id="ranking">Total</button>
       <button type="button" id="ranking:today">Today</button>
diff --git a/jstrr.css b/jstrr.css
index e3ad10e..7ee31eb 100644
--- a/jstrr.css
+++ b/jstrr.css
@@ -87,6 +87,7 @@
     background-repeat: no-repeat;
     background-size: cover;
     width: 100%;
+    display: none;
 }
 div.login-item{
     position: absolute;
@@ -130,50 +131,58 @@
 #ranking-table tr.me {background: #fee;}
 .warn {background: #f99;}
 
-label.menu-btn {
+.menu-btn {
   position: fixed;
   top: 10px;
   right: 10px;
   display: flex;
-  height: px;
+  height: 60px;
   width: 60px;
   justify-content: center;
   align-items: center;
   z-index: 90;
   background-color: #59b0ee;
 }
-label.menu-btn span{
-  color: #fff;
+.menu-btn span,
+.menu-btn span:before,
+.menu-btn span:after {
+  content: '';
+  display: block;
+  height: 3px;
+  width: 25px;
+  border-radius: 3px;
+  background-color: #ffffff;
+  position: absolute;
 }
-label.menu-btn span:before {
+.menu-btn span:before {
   bottom: 8px;
 }
-label.menu-btn span:after {
+.menu-btn span:after {
   top: 8px;
 }
-input#menu-btn-check{
+#menu-btn-check{
   display: none;
 }
-input#menu-btn-check:checked ~ label.menu-btn span {
+#menu-btn-check:checked ~ .menu-btn span {
   background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
 }
-input#menu-btn-check:checked ~ label.menu-btn span::before {
+#menu-btn-check:checked ~ .menu-btn span::before {
   bottom: 0;
   transform: rotate(45deg);
 }
-input#menu-btn-check:checked ~ label.menu-btn span::after {
+#menu-btn-check:checked ~ .menu-btn span::after {
   top: 0;
   transform: rotate(-45deg);
 }
 
-div.menu-content ul {
+.menu-content ul {
   padding: 70px 10px 0;
 }
-div.menu-content ul li {
+.menu-content ul li {
   border-bottom: solid 1px #000;
   list-style: none;
 }
-div.menu-content ul li a {
+.menu-content ul li a {
   display: block;
   width: 30%;
   font-size: 15px;