全ページに追従するバナー作成

juliecogley · Mar 23, 2024 · 396a9d9 · 396a9d9
1 parent 033d8b1
commit 396a9d9
Show file tree

Hide file tree

Showing 24 changed files with 77 additions and 211 deletions.
diff --git a/common.css b/common.css
@@ -111,7 +111,8 @@ body {
   .contents-text {
     font-size: 2.0rem;
     top: 38px;
-    width: 240px;  
+    width: 100%; 
+    height: auto; 
     writing-mode: horizontal-tb;
     margin: 0 auto;
   }

diff --git a/contact.css b/contact.css
@@ -5,11 +5,6 @@
 	/*1160+pad24+24*/
 	margin: 0 auto;
 }
-
-#nav-open {
-	top: -144px;
-}
-
 .section-contact__name {
 	padding: 0 24px;
 	margin: 80px auto;

diff --git a/contact.html b/contact.html
@@ -29,28 +29,20 @@
     <div class="header-content-wrapper">
       <div class="label">
         <a class="go-to-top" href="index.html">
-        <p class="nakahara-nami">
-          <span class="n">N</span>
-          <span class="another">akahara
-            <br>
-          </span>
-          <span class="n">N</span>
-          <span class="another">ami
-            <br>PORTFOLIO</span>
-        </p>
-      </a>
+          <p class="nakahara-nami">
+            <span class="n">N</span>
+            <span class="another">akahara
+              <br>
+            </span>
+            <span class="n">N</span>
+            <span class="another">ami
+              <br>PORTFOLIO</span>
+          </p>
+        </a>
       </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 class="contents-text">お問い合わせ</div>
     </div>
     <div id="nav-drawer">
       <input id="nav-input" class="none" type="checkbox">
@@ -59,16 +51,16 @@
       <nav id="nav-content" class="header__navigation">
         <div class="nav-drawer__title none"></div>
         <ul>
-          <li class="nav-drawer__link-top none" >目　次</li>
+          <li class="nav-drawer__link-top none">目　次</li>
           <li><a href="index.html">トップページ</a></li>
           <li><a href="profile.html">プロフィール</a></li>
           <li><a href="works.html">作品集</a></li>
-          <li><a href="contact.html">ことばがき</a></li>
+          <li><a href="kotobagaki.html">ことばがき</a></li>
           <li><a href="contact.html">お問い合わせ</a></li>
         </ul>
       </nav>
-      </div>
-      </header>
+    </div>
+  </header>
   <main class="main">
     <section class="section-contact__name">
       <div class="section-contact__name-text">

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

diff --git a/kotobagaki.html b/kotobagaki.html
@@ -29,28 +29,20 @@
     <div class="header-content-wrapper">
       <div class="label">
         <a class="go-to-top" href="index.html">
-        <p class="nakahara-nami">
-          <span class="n">N</span>
-          <span class="another">akahara
-            <br>
-          </span>
-          <span class="n">N</span>
-          <span class="another">ami
-            <br>PORTFOLIO</span>
-        </p>
-      </a>
+          <p class="nakahara-nami">
+            <span class="n">N</span>
+            <span class="another">akahara
+              <br>
+            </span>
+            <span class="n">N</span>
+            <span class="another">ami
+              <br>PORTFOLIO</span>
+          </p>
+        </a>
       </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 class="contents-text">ことばがき</div>
     </div>
     <div id="nav-drawer">
       <input id="nav-input" class="none" type="checkbox">
@@ -59,16 +51,16 @@
       <nav id="nav-content" class="header__navigation">
         <div class="nav-drawer__title none"></div>
         <ul>
-          <li class="nav-drawer__link-top none" >目　次</li>
+          <li class="nav-drawer__link-top none">目　次</li>
           <li><a href="index.html">トップページ</a></li>
           <li><a href="profile.html">プロフィール</a></li>
           <li><a href="works.html">作品集</a></li>
           <li><a href="kotobagaki.html">ことばがき</a></li>
           <li><a href="contact.html">お問い合わせ</a></li>
         </ul>
       </nav>
-      </div>
-      </header>
+    </div>
+  </header>
   <main class="main">
     <section class="section-kotobagaki__name">
 

diff --git a/profile.css b/profile.css
@@ -5,9 +5,6 @@
 	margin: 0 auto;
 }
 
-#nav-open{
-top: -144px;
-}
 .section-works1__title {
 	max-width: 327px;
 	/*327px+24+24=375px*/

diff --git a/profile.html b/profile.html
@@ -30,22 +30,20 @@
     <div class="header-content-wrapper">
       <div class="label">
         <a class="go-to-top" href="index.html">
-        <p class="nakahara-nami">
-          <span class="n">N</span>
-          <span class="another">akahara
-            <br>
-          </span>
-          <span class="n">N</span>
-          <span class="another">ami
-            <br>PORTFOLIO</span>
-        </p>
-      </a>
+          <p class="nakahara-nami">
+            <span class="n">N</span>
+            <span class="another">akahara
+              <br>
+            </span>
+            <span class="n">N</span>
+            <span class="another">ami
+              <br>PORTFOLIO</span>
+          </p>
+        </a>
       </div>
-
     </div>
     <div class="contents-rectangle">
-      <div class="contents-text">
-        プロフィール</div>
+      <div class="contents-text">プロフィール</div>
     </div>
     <div id="nav-drawer">
       <input id="nav-input" class="none" type="checkbox">
@@ -62,8 +60,8 @@
           <li><a href="contact.html">お問い合わせ</a></li>
         </ul>
       </nav>
-      </div>
-      </header>
+    </div>
+  </header>
   <main class="main">
 
     <section class="section-profile__name">

diff --git a/works.css b/works.css
@@ -1,8 +1,5 @@
 @charset "UTF-8";
 
-#nav-open{
-	top: -144px;
-	}
 .section-works__top{
 width: 100%;
 height: 375px;

diff --git a/works.html b/works.html
@@ -28,8 +28,6 @@
   <header class="header">
     <div class="header-content-wrapper">
       <div class="label">
-
-
         <a class="go-to-top" href="index.html">
           <p class="nakahara-nami">
             <span class="n">N</span>
@@ -42,11 +40,9 @@
           </p>
         </a>
       </div>
-
     </div>
     <div class="contents-rectangle">
-      <div class="contents-text">
-        作品集</div>
+      <div class="contents-text">作品集</div>
     </div>
     <div id="nav-drawer">
       <input id="nav-input" class="none" type="checkbox">
@@ -232,7 +228,7 @@ <h2>よるの森</h2>
             </svg>
           </div>
         </a>
-        <a class="go-to-works" href="works7.html">
+        <a class="go-to-works" href="works8.html">
           <div class="section-works__index">
             <h2>目が眩む</h2>
             <p>「それは木であり、人であり、<br>

diff --git a/works1.html b/works1.html
@@ -41,32 +41,25 @@
         </a>
       </div>
     </div>
-      <div class="contents-rectangle">
-        <div class="contents-text">作品集</div>
-      </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 class="nav-drawer__link-top none">目　次</li>
-            <li><a href="index.html">トップページ</a></li>
-            <li><a href="profile.html">プロフィール</a></li>
-            <li><a href="works.html">作品集</a></li>
-            <li><a href="kotobagaki.html">ことばがき</a></li>
-            <li><a href="contact.html">お問い合わせ</a></li>
-          </ul>
-        </nav>
-      </div>
-
-
-
-
-
-
-
+    <div class="contents-rectangle">
+      <div class="contents-text">作品集</div>
+    </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 class="nav-drawer__link-top none">目　次</li>
+          <li><a href="index.html">トップページ</a></li>
+          <li><a href="profile.html">プロフィール</a></li>
+          <li><a href="works.html">作品集</a></li>
+          <li><a href="kotobagaki.html">ことばがき</a></li>
+          <li><a href="contact.html">お問い合わせ</a></li>
+        </ul>
+      </nav>
+    </div>
   </header>
   <main class="main">
 
@@ -111,14 +104,14 @@ <h2>watering flowers,is it love or not?</h2>
       <div class="img-09"></div>
       <div class="img-10"></div>
       <div class="img-11"></div>
-      <div class="img-12"></div> 
+      <div class="img-12"></div>
       <div class="img-13"></div>
-      <div class="img-14"></div> 
+      <div class="img-14"></div>
     </div>
 
     <div class="back-to-works">
       <img class="back-to-works__line" src="photo/line.svg" alt="line">
-     <a class="back-to-works__text" href="works.html">作品集へ戻る</a>
+      <a class="back-to-works__text" href="works.html">作品集へ戻る</a>
     </div>
   </main>
 
@@ -134,7 +127,7 @@ <h2>目次</h2>
           <li><a class="links" href="contact.html">お問い合わせ</a></li>
         </ul>
         <h2>SNS</h2>
-        <ul class="site-map__links"> 
+        <ul class="site-map__links">
           <li><a class="links" href="">instagram</a></li>
         </ul>
       </nav>

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

diff --git a/works2.html b/works2.html
@@ -28,7 +28,6 @@
   <header class="header">
     <div class="header-content-wrapper">
       <div class="label">
-
         <a class="go-to-top" href="index.html">
           <p class="nakahara-nami">
             <span class="n">N</span>
@@ -40,19 +39,10 @@
               <br>PORTFOLIO</span>
           </p>
         </a>
-
-      </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 class="contents-text">作品集</div>
     </div>
     <div id="nav-drawer">
       <input id="nav-input" class="none" type="checkbox">

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