headerとfooterを作りました

tsusu0409 · Jan 4, 2025 · cd8b103 · cd8b103
1 parent 147c3b6
commit cd8b103
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 4 deletions.
diff --git a/css/top.css b/css/top.css
@@ -0,0 +1,43 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+a, a:visited, a:hover{
+    text-decoration: none;
+}
+
+header{
+    height: 108px;
+    color: white;
+    background-color: blue;
+    padding: 20px;
+}
+.title-main{
+    font-size: 24px;
+}
+.title-sub{
+    font-size: 12px;
+}
+
+footer{
+    height: 108px;
+    color: white;
+    background-color: black;
+    padding: 20px;
+}
+.footer-title{
+    font-size: 16px;
+}
+.footer-sub{
+    font-size: 12px;
+}
+
+
+/* 以下各ページ */
+.main {
+    height: 800px;
+    background-color: green;
+}
+
diff --git a/top.html b/top.html
@@ -5,13 +5,16 @@
     <title>coens portal</title>
 </head>
 <body>
-    <haeder>
-
-    </haeder>
+    <header>
+        <p class="title-main">coens-portal | 応用理工学類 学生ポータルサイト</p>
+        <p class="title-sub">筑波大学 理工学類 応用理工学類の学生生活に関わる情報が集まるポータルサイトです。</p>
+        <p class="title-sub">学生有志により運用されています。</p>
+    </header>
     <div class="main">
 
     </div>
     <footer>
-
+        <p class="footer-title">coens-portal</p>
+        <p class="footer-sub">&copy;2024-2025 <a href="https://tsusu0409.com">Tsusu</a> All rights reserved.</p>
     </footer>
 </body>