.works.css　.works.html

.works.css ヘッダー下部に余白 .works.html　.works１.html ハンバーガーメニューの挿入 .works1.css ハンバーガーメニュー位置の調整
juliecogley · Mar 13, 2024 · b373e1e · b373e1e
1 parent ddb3427
commit b373e1e
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 38 deletions.
diff --git a/works.css b/works.css
@@ -1,5 +1,8 @@
 @charset "UTF-8";
 
+#nav-open{
+	top: -144px;
+	}
 .section-works__top{
 width: 100%;
 height: 375px;
@@ -11,6 +14,7 @@ height: 375px;
     background-position:-145px 390px;
 	background-image: url("photo/obi.JPG");
 	/*transform: rotate(90deg);*/
+	margin-top: 20px;
 }
 
 

diff --git a/works.html b/works.html
@@ -28,31 +28,45 @@
 <body>
   <header class="header">
     <div class="header-content-wrapper">
-		<div class="label">
-      <p class="nakahara-nami"> 
+      <div class="label">
+        <p class="nakahara-nami">
           <span class="n">N</span>
           <span class="another">akahara
-		  <br/>
-		  </span>
+            <br />
+          </span>
           <span class="n">N</span>
           <span class="another">ami
-            <br/>PORTFOLIO</span>
-		  </p>
-	</div>
-
-			 
-       <div class="hamburger" >
-         <div class="line-1"></div>
-         <div class="line-2"></div>
-         <div class="line-3"></div>
-     </div>
-	   </div> 
-     <div class="contents-rectangle">
+            <br />PORTFOLIO</span>
+        </p>
+      </div>
+      <!-- ハンバーガーアイコン(旧式)
+      <div class="hamburger">
+        <div class="line-1"></div>
+        <div class="line-2"></div>
+        <div class="line-3"></div>
+      </div>
+    --> 
+    </div>
+    <div class="contents-rectangle">
       <div class="contents-text">
         作品集</div>
-       </div>
-
-  </header>
+    </div>
+    <div id="nav-drawer">
+      <input id="nav-input" class="none" type="checkbox">
+      <label id="nav-open" for="nav-input"><span></span></label>
+      <label id="nav-close" class="none" for="nav-input"></label>
+      <nav id="nav-content" class="header__navigation">
+        <div class="nav-drawer__title none"></div>
+        <ul>
+          <li><a class="nav-drawer__link-top none" href="#top">目　次</a></li>
+          <li><a href="#profile">プロフィール</a></li>
+          <li><a href="#works">作品集</a></li>
+          <li><a href="#kotobagaki">ことばがき</a></li>
+          <li><a href="#contact">お問い合わせ</a></li>
+        </ul>
+      </nav>
+      </div>
+      </header>
   <main class="main">
     <section class="section-works__top">
       <div class="section-works__top-image"></div>

diff --git a/works1.css b/works1.css
@@ -6,6 +6,9 @@
 	margin: 0 auto;
 }
 
+#nav-open{
+	top: -144px;
+	}
 .section-works1__top {
 	padding: 0 24px 0 24px;
 	margin: 80px 0 120px 0;

diff --git a/works1.html b/works1.html
@@ -27,31 +27,45 @@
 <body>
   <header class="header">
     <div class="header-content-wrapper">
-		<div class="label">
-      <p class="nakahara-nami"> 
+      <div class="label">
+        <p class="nakahara-nami">
           <span class="n">N</span>
           <span class="another">akahara
-		  <br/>
-		  </span>
+            <br />
+          </span>
           <span class="n">N</span>
           <span class="another">ami
-            <br/>PORTFOLIO</span>
-		  </p>
-	</div>
-
-			 
-       <div class="hamburger" >
-         <div class="line-1"></div>
-         <div class="line-2"></div>
-         <div class="line-3"></div>
-     </div>
-	   </div> 
-     <div class="contents-rectangle">
+            <br />PORTFOLIO</span>
+        </p>
+      </div>
+      <!-- ハンバーガーアイコン(旧式)
+      <div class="hamburger">
+        <div class="line-1"></div>
+        <div class="line-2"></div>
+        <div class="line-3"></div>
+      </div>
+    --> 
+    </div>
+    <div class="contents-rectangle">
       <div class="contents-text">
         作品集</div>
-       </div>
-
-  </header>
+    </div>
+    <div id="nav-drawer">
+      <input id="nav-input" class="none" type="checkbox">
+      <label id="nav-open" for="nav-input"><span></span></label>
+      <label id="nav-close" class="none" for="nav-input"></label>
+      <nav id="nav-content" class="header__navigation">
+        <div class="nav-drawer__title none"></div>
+        <ul>
+          <li><a class="nav-drawer__link-top none" href="#top">目　次</a></li>
+          <li><a href="#profile">プロフィール</a></li>
+          <li><a href="#works">作品集</a></li>
+          <li><a href="#kotobagaki">ことばがき</a></li>
+          <li><a href="#contact">お問い合わせ</a></li>
+        </ul>
+      </nav>
+      </div>
+      </header>
   <main class="main">
 
     <section class="section-works1__top">