navとworksを追加

098orin · 098orin · commit 1105248f6525 · 2025-08-17T14:59:20.000+09:00
diff --git a/index.html b/index.html
@@ -4,7 +4,6 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="canonical" href="https://098orin.github.io/">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
   <link rel="stylesheet" href="style.css">
   <title>TOP | 098orin.github.io</title>
   <!-- Open Graph -->
@@ -15,6 +14,12 @@
 </head>
 <body>
   <main>
+    <nav class="main-nav">
+      <ul>
+        <li><a href="https://098orin.github.io/">TOP</a></li>
+        <li><a href="https://098orin.github.io/works/">WORKS</a></li>
+      </ul>
+    </nav>
     <h1>Hello World!</h1>
     <p>Welcome to my GitHub page.</p>
 
diff --git a/style.css b/style.css
@@ -23,6 +23,55 @@ h1, h2, h3 {
 }
 
 
+/* main-nav */
+/* ナビ全体 */
+.main-nav {
+  background-color: #1f1f1f; /* 黒寄りの背景 */
+  padding: 10px 20px;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
+}
+
+/* ulを横並びに */
+.main-nav ul {
+  list-style: none;
+  display: flex;
+  justify-content: center; /* 中央寄せ */
+  gap: 30px;               /* メニュー間隔 */
+  margin: 0;
+  padding: 0;
+}
+
+/* aタグの見た目 */
+.main-nav ul li a {
+  color: #f0f0f0;         /* 白文字 */
+  text-decoration: none;
+  font-weight: 500;
+  position: relative;
+  padding: 5px 0;
+  transition: color 0.3s;
+}
+
+/* ホバー時のエフェクト（下線アニメーション） */
+.main-nav ul li a::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -3px;
+  width: 0%;
+  height: 2px;
+  background-color: #1e90ff; /* アクセントブルー */
+  transition: width 0.3s;
+}
+
+.main-nav ul li a:hover::after {
+  width: 100%; /* ホバーで下線が出る */
+}
+
+.main-nav ul li a:hover {
+  color: #1e90ff; /* ホバーで文字もアクセント色 */
+}
+
+
 /* profile-box */
 .profile-box {
   background-color: #1f1f1f;
@@ -40,7 +89,6 @@ h1, h2, h3 {
   list-style: none;       /* 丸数字を消す */
   padding: 0;
   margin: 0;
-  
   display: flex;          /* 横並びにする */
   justify-content: center; /* 中央寄せ */
   gap: 15px;               /* アイコン間の間隔 */
diff --git a/works/index.html b/works/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <link rel="canonical" href="https://098orin.github.io/works/">
+  <link rel="stylesheet" href="../style.css">
+  <title>TOP | 098orin.github.io</title>
+  <!-- Open Graph -->
+  <meta property="og:url" content="https://098orin.github.io/works/">
+  <meta property="og:title" content="TOP | 098orin.github.io">
+  <meta property="og:description" content="098orin.github.io">
+  <!-- end Open Graph -->
+</head>
+<body>
+  <main>
+    <nav class="main-nav">
+      <ul>
+        <li><a href="https://098orin.github.io/">TOP</a></li>
+        <li><a href="https://098orin.github.io/works/">WORKS</a></li>
+      </ul>
+    </nav>
+    <h1>Works</h1>
+    <p>私のプロジェクト</p>
+    <h3>GitHub</h3>
+    <a href="https://github.com/098orin/tw-extensions" target="_blank" rel="noopener noreferrer">TurboWarp extensions</a>
+</html>
