Repository: s-tsuchida-nextat/youkoso
Pull request #3: 最終確認
Author: login: s-tsuchida-nextat
Labels: name: review ok
Created: 2025-04-09T08:41:36Z | Merged: 2025-04-10T02:29:44Z

試してみたいコードをかけたので、仮の完成版をプルしたいです。

## スクリーンショット
![スクリーンショット 2025-04-09 17 43 02](https://github.com/user-attachments/assets/914c88af-6269-41e3-b3f7-617c4331c762)
![スクリーンショット 2025-04-09 17 43 22](https://github.com/user-attachments/assets/5ca23d01-06c4-4018-a7f8-c015c282d0eb)




Diff:
diff --git a/index.css b/index.css
index 831a533..d5a4329 100644
--- a/index.css
+++ b/index.css
@@ -1,231 +1,243 @@
 /* ヘッダー */
-
-
 .header-box {
-    height: 80px;
-  }
-  
-  header {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    background: rgb(0, 0, 0);
-    z-index: 100;
-    display: flex;
-    justify-content: space-between;
-  }
-  
-  .logos{
+  height: 80px;
+}
+  
+header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background: rgb(0, 0, 0);
+  z-index: 100;
   display: flex;
-  }
-  
-  .logo {
-    width: 100%;
-    height: 80px;
-    text-align: center;
-    padding-left: 10px;
-    padding-right: 20px;
-    line-height: 80px;
-    font-size: 20px;
-    font-weight: 600;
-    color: bisque;
-    font-family: Arial, Helvetica, sans-serif;
-    background: rgb(0, 0, 0);
-    white-space: nowrap;
-  }
-  
-  nav {
-    width: 70%;
-  }
-  
-  ul {
-    width: 100%;
-    display: flex;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    
-  }
-  
-  li {
-    width: 33%;
-  }
-  
-  a {
-    display: block;
-    width: 100%;
-    line-height: 80px;
-    text-align: center;
-    color: blanchedalmond;
-  }
+  justify-content: space-between;
+}
   
+.logos {
+  display: flex;
+}
+  
+.logo {
+  width: 100%;
+  height: 80px;
+  text-align: center;
+  padding-left: 10px;
+  padding-right: 20px;
+  line-height: 80px;
+  font-size: 20px;
+  font-weight: 600;
+  color: bisque;
+  font-family: Arial, Helvetica, sans-serif;
+  background: rgb(0, 0, 0);
+  white-space: nowrap;
+}
+  
+nav {
+  width: 70%;
+}
+  
+ul {
+  width: 100%;
+  display: flex;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+  
+li {
+  width: 33%;
+}
+  
+a {
+  display: block;
+  width: 100%;
+  line-height: 80px;
+  text-align: center;
+  color: blanchedalmond;
+}
   
-  /*  */
-  /*  */
   /* ホバーズ */
+.main {
+  padding: 24px;
+}
   
-  .main{padding: 24px;}
-  
-  body{
-    background-color: #a8a8a8;
-  }
-  
-  
-  .p2 {
-      text-align: center;
-  }
+/* marquee {
+  font-size: 50px;
+} */
+
+body {
+  background-color: #a8a8a8;
+}
   
-  .container {
-      display: flex;
-      width: 100%;
-      margin: 0 auto;
-    }
+.p2 {
+  text-align: center;
+}
   
+.container {
+  display: flex;
+  width: 100%;
+  margin: 0 auto;
+}
     
-    .box{
-      display: flex;
-      font-size: 20px;
-      align-items: center;
-      width: 33%;
-      aspect-ratio: 1/1;
-      line-height: 100px;
-      background-color: rgb(145, 198, 216);
-      margin: 2px;
-      border: 1px solid rgb(170, 170, 170);
-      justify-content: center;
-      position: relative;
-      right: 0px;
-      white-space: nowrap;
-      color: #FFFFFF;
-    }
-  
-    .box:hover{
-      background-color: rgb(206, 120, 120);
-    }
+.box {
+  display: flex;
+  font-size: 20px;
+  align-items: center;
+  width: 33%;
+  aspect-ratio: 1/1;
+  line-height: 100px;
+  background-color: rgb(145, 198, 216);
+  margin: 2px;
+  border: 1px solid rgb(170, 170, 170);
+  justify-content: center;
+  position: relative;
+  right: 0px;
+  white-space: nowrap;
+  color: #FFFFFF;
+}
+  
+.box:hover {
+  background-color: rgb(206, 120, 120);
+}
     
-    .box span:nth-child(1){
-      position:absolute;
-      display: none;
-    }
-  
-    .box:hover span:nth-child(1){
-      display: inline-block;
-    }
+.box span:nth-child(1) {
+  position:absolute;
+  display: none;
+}
   
-    .box:hover span:nth-child(2){
-      opacity: 0;
-    }
-  
-  /* ホバー終わり */
-  
-  .wrapper{
-    display: flex;
-    flex-direction: row;
-    height: 100vh;
-    font-family: BIZ UDMincho;
-  }
-  
-  .left{
-    flex: 1;
-    border-right: 0.1px solid rgba(208, 208, 208, 0.969);
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    /* position: relative; */
-    padding-right: 12px;
-  }
-  
-  .doras{
-    /* display: flex;これあったらそりゃ回り込まないよねえ！自分で気づけた嬉しい */
-    align-items: flex-start;
-  }
-  
-  .dora-moji{
-    margin-left: 16px;
-  }
-  
-  .dora-name{
-    white-space: nowrap;
-    font-size: 28px;
-    font-weight: 800;
-  }
-  
-  .dora-dis{
-    /* width: 100%; */
-    /* これで解決した!?!?!?!?!?!? */
-    font-size: 20px;
-    text-align: justify;
-    color: #3a3a3a;
-  }
-  
-  .left img{
-    width: 45%;
-    height: auto;
-    margin: 8px 12px 8px 8px;
-    max-width: 40vh;
-    max-height: 40wh;
-    object-fit: contain;
-    float: left;
-  }
-  
-  
-  
-  /* ここから右 */
-  
-  
-  .right{
-    flex: 1;
-    /* border-left: 0.1px solid whitesmoke; */
-    overflow: auto;
-    overflow-x: hidden;
-  }
-  
-  .profile{margin-left: 24px;
-    margin-right: 24px;}
-  
-  .pro-name{font-size: 24px;
-    font-weight: 700;
-  }
-  
-  .pro-dis{font-size: 16px;
-    font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体";
-    line-height: 1.5;
-    text-align: justify;}
-  
-  
-  
-  
-  
-  
-  .kara-moji{
-    margin-left: 18px;
-  }
-  
-  .kara-name{
-    font-size: 24px;
-    font-weight: 700;
-    margin-top: 36px;
-  }
+.box:hover span:nth-child(1) {
+  display: inline-block;
+}
   
-  .kara-dis{
-    font-size: 16px;
-    font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体";
-  }
+.box:hover span:nth-child(2) {
+  opacity: 0;
+}
   
-  .kara img{
-    height: auto;
-    margin: 12px;
-  }
+/* ここから縦2分割要素*/
+.wrapper {
+  display: flex;
+  flex-direction: row;
+  height: 100vh;
+  font-family: BIZ UDMincho;
+}
+  
+.left {
+  flex: 1;
+  border-right: 0.1px solid rgba(208, 208, 208, 0.969);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  /* position: relative; */
+  padding-right: 12px;
+}
+  
+.doras {
+  /* display: flex;これあったらそりゃ回り込まないよねえ！自分で気づけた嬉しい */
+  align-items: flex-start;
+}
+  
+.dora-moji {
+  margin-left: 16px;
+  color: #3a3a3a;
+}
+  
+.dora-nam {
+  white-space: normal;
+  font-size: 28px;
+  font-weight: 800;
+}
+  
+.dora-dis {
+  /* width: 100%; */
+  /* これで解決した!?!?!?!?!?!? */
+  font-size: 14px;
+  text-align: justify;
+  font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体";
+}
+  
+.left img {
+  width: 40%;
+  height: auto;
+  margin: 8px 12px 8px 8px;
+  max-width: 40vh;
+  max-height: 40wh;
+  object-fit: contain;
+  float: left;
+}
+
+/* ここから右 */
+.right {
+  flex: 1;
+  /* border-left: 0.1px solid whitesmoke; */
+  overflow: auto;
+  overflow-x: hidden;
+  color: #3a3a3a;
+  max-height: 100vh;
+}
+  
+.profile {
+  margin-left: 24px;
+  margin-right: 24px;
+}
+  
+.pro-name {
+  font-size: 24px;
+  font-weight: 700;
+}
+  
+.pro-dis {
+  font-size: 16px;
+  font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体";
+  line-height: 1.5;
+  text-align: justify;
+}
+
+.kara-moji {
+  margin-left: 18px;
+}
+  
+.kara-name {
+  font-size: 24px;
+  font-weight: 700;
+  margin-top: 36px;
+}
+  
+.kara-dis {
+  font-size: 16px;
+  font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体";
+}
+  
+.kara img {
+  height: auto;
+  margin: 12px;
+}
    
-  .yoro{margin-left: 24px; margin-right: 24px; text-align: justify;}
-  
-  .yoro-name{font-size: 24px; font-weight: 700; margin-top: 36px;}
-  
-  .yoro-dis{
-    font-size: 16px;
-    font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体";
-  }
-  
-  /* 以下footer */
-  .myname{text-align: center;}
\ No newline at end of file
+.yoro {
+  margin-left: 24px;
+  margin-right: 24px;
+  text-align: justify;
+}
+  
+.yoro-name {
+  font-size: 24px;
+  font-weight: 700;
+  margin-top: 36px;
+}
+  
+.yoro-dis {
+  font-size: 16px;
+  font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体";
+}
+  
+/* 以下footer */
+.myname {
+  text-align: center;
+  color: #3a3a3a;
+}
+
+.sitename {
+  font-family: BIZ UDMincho;
+  color: #3a3a3a;
+  font-size: 24px;
+}
diff --git a/index.html b/index.html
index 59a7a5b..eab5f1d 100644
--- a/index.html
+++ b/index.html
@@ -4,27 +4,31 @@
         <meta charset="utf-8">
         <title>ようこそ〜</title>
         <link rel="stylesheet" href="index.css">
-
     </head>
+
     <body>
         <div class="header-box"></div>
+
         <header>
             <div class="logos">
                 <img src="resource/logo.png" alt="" width="80px" height="80px">
                 <div class="logo">Yoroshiku Wiki</div>
             </div>
-                <nav class="pc-menu">
+
+            <nav class="pc-menu">
                 <ul>
                     <li><a href="#">Chiwas</a></li>
                     <li><a href="#">Doumo</a></li>
                     <li><a href="#">Azasu</a></li>
                     <li><a href="#">Otsukare</a></li>
                 </ul>
-                </nav>
-           
+            </nav>
         </header>
           
+        <!-- ここからこんにちはゾーン -->
+
         <div class="main">
+            <marquee loop="1" >ようこそ〜</marquee>
 
             <div class="container">
                 <button class="box">
@@ -42,59 +46,57 @@
                     <span>こんにちは3</span>
                 </button>
             </div>
-
         </div>
 
-        <!-- ここから左右要素 -->
-    <hr>
-
-    <div class="wrapper">
-        <div class="left">
-            <div class="doras">
-                <img src="resource/profile.png" alt="" width="40%">
-                <div class="dora-moji">
-                    <p class="dora-name">Shu Tsuchida</p>
-                    <p class="dora-dis">
-                       回り込みの確認のための要素です。Geminiにふにゃふにゃなドラえもんについて説明してもらいました。ふにゃふにゃなドラえもん」は、ドラえもんの具体的な形状や動きを指すのではなく、彼の状態や性質を、触覚的な言葉である「ふにゃふにゃ」を用いて間接的に表現するものです。例えば、普段は頼りになるドラえもんが、珍しく自信を失っていたり、弱気になっていたりする様子を「今日のドラえもんはなんだかふにゃふにゃしている」と表現することがあります。これは、彼の精神的な不安定さや頼りがいがない印象を、あたかも柔らかく形が定まらない物体のように捉えているわけです。また、ドラえもんの優しさや柔軟な思考を表現する際に、「彼のふにゃふにゃとした優しさがのび太を包み込む」といったように、物理的な柔らかさとは異なる、受容的で穏やかな性質を「ふにゃふにゃ」という言葉で表すこともあります。このように、比喩的な表現としての「ふにゃふにゃ」は、ドラえもんの目に見えない内面的な状態や性格の特徴を、より感覚的に、そして印象的に伝えるための言葉として用いられます。文脈によってその意味合いは微妙に変化しますが、いずれの場合も、ドラえもんというキャラクターをより多角的に理解するための補助的な表現として機能していると言えるでしょう。
-                    </p>
+    <!-- ここから左右要素 -->
+        <hr>
+        <div class="wrapper">
+            <div class="left">
+                <div class="doras">
+                    <img src="resource/profile.png" alt="" width="40%">
+                    <div class="dora-moji">
+                      <p class="dora-name">Shu Tsuchida</p>
+                      <p class="dora-dis">
+                         回り込みの確認のための要素です。Geminiにふにゃふにゃなドラえもんについて説明してもらいました。「ふにゃふにゃなドラえもん」は、ドラえもんの具体的な形状や動きを指すのではなく、彼の状態や性質を、触覚的な言葉である「ふにゃふにゃ」を用いて間接的に表現するものです。例えば、普段は頼りになるドラえもんが、珍しく自信を失っていたり、弱気になっていたりする様子を「今日のドラえもんはなんだかふにゃふにゃしている」と表現することがあります。これは、彼の精神的な不安定さや頼りがいがない印象を、あたかも柔らかく形が定まらない物体のように捉えているわけです。また、ドラえもんの優しさや柔軟な思考を表現する際に、「彼のふにゃふにゃとした優しさがのび太を包み込む」といったように、物理的な柔らかさとは異なる、受容的で穏やかな性質を「ふにゃふにゃ」という言葉で表すこともあります。このように、比喩的な表現としての「ふにゃふにゃ」は、ドラえもんの目に見えない内面的な状態や性格の特徴を、より感覚的に、そして印象的に伝えるための言葉として用いられます。文脈によってその意味合いは微妙に変化しますが、いずれの場合も、ドラえもんというキャラクターをより多角的に理解するための補助的な表現として機能していると言えるでしょう。
+                      </p>
+                    </div>
                 </div>
             </div>
 
-        </div>
-
         <!-- ここから右 -->
-        <div class="right">
-
-            <div class="profile">
-                <p class="pro-name">自己紹介</p>
-                <p class="pro-dis">24歳です。奈良出身, 大学東京の卒業から京都です。週１は出社したいのでリモートはじまってからも通勤圏内だと嬉しいですね🧐<br><br> どうなるにしても京都の美味しいご飯なりスイーツなりグルメは色々行きたいところ、、、食べログのブロンズとかシルバーの称号って、普通コース料理とかの高級店に付与されるもので、特にシルバーはスイーツ部門だと年に0〜２店舗くらいしか選出されないほど希少。何ですけど京都にはそのシルバーを受賞してる和菓子屋さん(嘯月{しょうげつ})があるので、少なくともそこは早いうちに行きたいですね。<br><br> そこに限らず遊びもしたい、、周辺の県に結構行きやすい場所でもあると思うので隙をみて行きたいですね。</p>
-            </div>
+            <div class="right">
+                <div class="profile">
+                    <p class="pro-name">自己紹介</p>
+                    <p class="pro-dis">
+                         24歳です。奈良出身, 大学東京の卒業から京都です。週１は出社したいのでリモートはじまってからも通勤圏内だと嬉しいですね🧐<br><br> どうなるにしても京都の美味しいご飯なりスイーツなりグルメは色々行きたいところ、、、食べログのブロンズとかシルバーの称号って、普通コース料理とかの高級店に付与されるもので、特にシルバーはスイーツ部門だと年に0〜２店舗くらいしか選出されないほど希少。何ですけど京都にはそのシルバーを受賞してる和菓子屋さん(嘯月{しょうげつ})があるので、少なくともそこは早いうちに行きたいですね。<br><br> そこに限らず遊びもしたい、、周辺の県に結構行きやすい場所でもあると思うので隙をみて行きたいですね。
+                    </p>
+                </div>
 
-            <div class="kara">
-                <img src="resource/karaoke.png" alt="" width="100%">
-                <div class="kara-moji">
-                    <p class="kara-name">カラオケ</p>
-                    <p class="kara-dis"> 趣味です。大学１年生の頃からハマっててそこそこ行ってました。週に１回は行ってたとしたら６年間で300回は行ってるわけですね、習慣恐ろしや、、一回1200円かかるとしたら36万円かかっているわけですね、恐ろしや、、、<br><br> ちなみにカラオケDAMの機材はAmazonで100万円くらいで売ってます。たけ〜〜日々機材が新しくなることを考えたら無理ですね🙂‍↔️<br><br> カラオケこんなに行ってますが、うまさでいうとダニングクルーガー曲線でいう"絶望の谷"を超えて"啓蒙の坂"に差し当たったあたりです。
-                        <img src="resource/kyokusen.png" alt="" width="100%">
-                        <br>あとカラオケ関連で曲を聴くのも好きです。全曲知ってるとかじゃないけど、サカナクションとか米津とか好きです、無難やね。<br>広く浅くでいろいろ聴くのが好きなので、おしゃ曲マニアの方、気をてらってるのもそうじゃないのも何でもおしゃ曲教えて頂けるとまじで嬉しいです。<br></p>
+                <div class="kara">
+                    <img src="resource/karaoke.png" alt="" width="100%">
+                    <div class="kara-moji">
+                        <p class="kara-name">カラオケ</p>
+                        <p class="kara-dis"> 
+                            趣味です。大学１年生の頃からハマっててそこそこ行ってました。週に１回は行ってたとしたら６年間で300回は行ってるわけですね、習慣恐ろしや、、一回1200円かかるとしたら36万円かかっているわけですね、恐ろしや、、、<br><br> ちなみにカラオケDAMの機材はAmazonで100万円くらいで売ってます。たけ〜〜日々機材が新しくなることを考えたら無理ですね🙂‍↔️<br><br> カラオケこんなに行ってますが、うまさでいうとダニングクルーガー曲線でいう"絶望の谷"を超えて"啓蒙の坂"に差し当たったあたりです。??????
+                            <img src="resource/kyokusen.png" alt="" width="100%">
+                            <br>あとカラオケ関連で曲を聴くのも好きです。全曲知ってるとかじゃないけど、サカナクションとか米津とか好きです、無難やね。<br>広く浅くでいろいろ聴くのが好きなので、おしゃ曲マニアの方、気をてらってるのもそうじゃないのも何でもおしゃ曲教えて頂けるとまじで嬉しいです。<br>
+                        </p>
+                    </div>
                 </div>
-            </div>
 
-            <div class="yoro">
-                <p class="yoro-name">よろしく</p>
-                <p class="yoro-dis">自分のできる努力をしてしっかり知識を深め、できることを増やしていきたいです。あらためまして、プログラミング未経験からですので質問などお世話になることも多いと思いますが、何卒よろしくお願いいたします。</p>
+                <div class="yoro">
+                    <p class="yoro-name">よろしく</p>
+                    <p class="yoro-dis">
+                        自分のできる努力をしてしっかり知識を深め、できることを増やしていきたいです。あらためまして、プログラミング未経験からですので質問などお世話になることも多いと思いますが、何卒よろしくお願いいたします。
+                    </p>
+                </div>
             </div>
-
-
-
         </div>
-    </div>
-
-
 
         <footer>
             <hr>
-	        <p class="myname">© 2024 Shu Tsuchida.</p>
-	      </footer>
+            <p class="sitename">Yoroshiku Wiki</p>
+            <p class="myname">© 2024 Shu Tsuchida.</p>
+        </footer>
     </body>
-</html>
\ No newline at end of file
+</html>


Reviews:
user: login: mihara-nextat
body: ソースコード全体の書き方をキレイにしていくと読みやすく保守しやすくなります👍
どのようにキレイにするかはプログラミング言語ごとやプロジェクトごとに色々なルールや慣習がありますが、一般的に受け要られているような書き方もいくつかあります。

例えば要素のネストのレベルでインデントをあわせるであったり、ソースコードは最後に空行を1行は入れる、無駄な連続的な改行を行わないなどの慣習があります。

より一般的なルールや慣習などについては以下の本などが有名です
https://amzn.asia/d/ataM97J
state: CHANGES_REQUESTED
author_association: COLLABORATOR
submitted_at: 2025-04-09T09:45:17Z
user: login: mihara-nextat
body: コメントしました
state: CHANGES_REQUESTED
author_association: COLLABORATOR
submitted_at: 2025-04-10T01:22:02Z
user: login: mihara-nextat
body: OKです👌
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-04-10T01:32:50Z
user: login: t-miki-nextat
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-04-10T02:24:53Z

Review comments:
diff_hunk: @@ -228,4 +234,10 @@
   }
   
   /* 以下footer */
-  .myname{text-align: center;}
\ No newline at end of file
+  .myname{text-align: center;
+color: #3a3a3a;
+}
+
+  .sitename{font-family: BIZ UDMincho;
+    color: #3a3a3a;
+font-size: 24px;}
path: index.css
user: login: mihara-nextat
body: ソースコードは最後は文字ではなくて、空行を1つあけておきましょうか
参考記事: https://qiita.com/hamacccccchan/items/11c17c7412a5aeb2ad74
created_at: 2025-04-09T09:32:42Z
author_association: COLLABORATOR
diff_hunk: @@ -67,6 +67,8 @@
   
   .main{padding: 24px;}
   
+/* marquee{font-size: 50px;} */
path: index.css
user: login: mihara-nextat
body: 以下のように `body` と `{` の間にはスペースを追加しましょう。
全体でそのようにコードをキレイにしておきましょう。

```css
body {
  background-color: #a8a8a8;
}
```
created_at: 2025-04-09T09:37:33Z
author_association: COLLABORATOR
diff_hunk: @@ -143,24 +145,26 @@
   
   .dora-moji{
     margin-left: 16px;
+    color: #3a3a3a;
   }
   
   .dora-name{
-    white-space: nowrap;
+    white-space: normal;
     font-size: 28px;
     font-weight: 800;
   }
   
   .dora-dis{
     /* width: 100%; */
     /* これで解決した!?!?!?!?!?!? */
-    font-size: 20px;
+    font-size: 14px;
     text-align: justify;
-    color: #3a3a3a;
+    
path: index.css
user: login: mihara-nextat
body: 特に意図の無い改行は消しておきましょう
created_at: 2025-04-09T09:38:26Z
author_association: COLLABORATOR
diff_hunk: @@ -179,6 +183,8 @@
     /* border-left: 0.1px solid whitesmoke; */
     overflow: auto;
     overflow-x: hidden;
+    color: #3a3a3a;
+    max-height: 100vh;
   }
   
   .profile{margin-left: 24px;
path: index.css
user: login: mihara-nextat
body: ここも改行しておきましょう。

```css
.profile {
  margin-left: 24px;
}
```
created_at: 2025-04-09T09:39:09Z
author_association: COLLABORATOR
diff_hunk: @@ -26,6 +26,10 @@
           
         <div class="main">
 
+            <marquee
+            loop="1"
+            >ようこそ〜</marquee>
+
path: index.html
user: login: mihara-nextat
body: ここも以下のように整形しておきましょう。

```html
<marquee loop="1">ようこそ~</marquee>
```
created_at: 2025-04-09T09:40:01Z
author_association: COLLABORATOR
diff_hunk: @@ -94,6 +98,7 @@
 
         <footer>
             <hr>
+            <p class="sitename">Yoroshiku Wiki</p>
 	        <p class="myname">© 2024 Shu Tsuchida.</p>
 	      </footer>
path: index.html
user: login: mihara-nextat
body: この辺もネストのレベルでインデント(行の先頭に空白とかタブを入れて、行の開始位置を横にズラすことにより、全体を見やすくすること)のレベルを以下のように統一して読みやすくしておきましょう。

```html
<footer>
  <hr>
  <p class="sitename">Yoroshiku Wiki</p>
  <p class="myname">© 2024 Shu Tsuchida.</p>
</footer>
```
created_at: 2025-04-09T09:42:13Z
author_association: COLLABORATOR
diff_hunk: @@ -1,231 +1,243 @@
 /* ヘッダー */
-
-
 .header-box {
-    height: 80px;
-  }
-  
-  header {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    background: rgb(0, 0, 0);
-    z-index: 100;
-    display: flex;
-    justify-content: space-between;
-  }
-  
-  .logos{
+  height: 80px;
+}
+  
+header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background: rgb(0, 0, 0);
+  z-index: 100;
   display: flex;
-  }
-  
-  .logo {
-    width: 100%;
-    height: 80px;
-    text-align: center;
-    padding-left: 10px;
-    padding-right: 20px;
-    line-height: 80px;
-    font-size: 20px;
-    font-weight: 600;
-    color: bisque;
-    font-family: Arial, Helvetica, sans-serif;
-    background: rgb(0, 0, 0);
-    white-space: nowrap;
-  }
-  
-  nav {
-    width: 70%;
-  }
-  
-  ul {
-    width: 100%;
-    display: flex;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    
-  }
-  
-  li {
-    width: 33%;
-  }
-  
-  a {
-    display: block;
-    width: 100%;
-    line-height: 80px;
-    text-align: center;
-    color: blanchedalmond;
-  }
+  justify-content: space-between;
+}
   
+.logos {
+  display: flex;
+}
+  
+.logo {
+  width: 100%;
+  height: 80px;
+  text-align: center;
+  padding-left: 10px;
+  padding-right: 20px;
+  line-height: 80px;
+  font-size: 20px;
+  font-weight: 600;
+  color: bisque;
+  font-family: Arial, Helvetica, sans-serif;
+  background: rgb(0, 0, 0);
+  white-space: nowrap;
+}
+  
+nav {
+  width: 70%;
+}
+  
+ul {
+  width: 100%;
+  display: flex;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+  
+li {
+  width: 33%;
+}
+  
+a {
+  display: block;
+  width: 100%;
+  line-height: 80px;
+  text-align: center;
+  color: blanchedalmond;
+}
   
-  /*  */
-  /*  */
   /* ホバーズ */
+.main {
+  padding: 24px;
+}
   
-  .main{padding: 24px;}
-  
-  body{
-    background-color: #a8a8a8;
-  }
-  
-  
-  .p2 {
-      text-align: center;
-  }
+/* marquee {
+  font-size: 50px;
+} */
+
+body {
+  background-color: #a8a8a8;
+}
   
-  .container {
-      display: flex;
-      width: 100%;
-      margin: 0 auto;
-    }
+.p2 {
+  text-align: center;
+}
   
+.container {
+  display: flex;
+  width: 100%;
+  margin: 0 auto;
+}
     
-    .box{
-      display: flex;
-      font-size: 20px;
-      align-items: center;
-      width: 33%;
-      aspect-ratio: 1/1;
-      line-height: 100px;
-      background-color: rgb(145, 198, 216);
-      margin: 2px;
-      border: 1px solid rgb(170, 170, 170);
-      justify-content: center;
-      position: relative;
-      right: 0px;
-      white-space: nowrap;
-      color: #FFFFFF;
-    }
-  
-    .box:hover{
-      background-color: rgb(206, 120, 120);
-    }
+.box {
+  display: flex;
+  font-size: 20px;
+  align-items: center;
+  width: 33%;
+  aspect-ratio: 1/1;
+  line-height: 100px;
+  background-color: rgb(145, 198, 216);
+  margin: 2px;
+  border: 1px solid rgb(170, 170, 170);
+  justify-content: center;
+  position: relative;
+  right: 0px;
+  white-space: nowrap;
+  color: #FFFFFF;
+}
+  
+.box:hover {
+  background-color: rgb(206, 120, 120);
+}
     
-    .box span:nth-child(1){
-      position:absolute;
-      display: none;
-    }
-  
-    .box:hover span:nth-child(1){
-      display: inline-block;
-    }
+.box span:nth-child(1) {
+  position:absolute;
+  display: none;
+}
   
-    .box:hover span:nth-child(2){
-      opacity: 0;
-    }
-  
-  /* ホバー終わり */
-  
-  .wrapper{
-    display: flex;
-    flex-direction: row;
-    height: 100vh;
-    font-family: BIZ UDMincho;
-  }
-  
-  .left{
-    flex: 1;
-    border-right: 0.1px solid rgba(208, 208, 208, 0.969);
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    /* position: relative; */
-    padding-right: 12px;
-  }
-  
-  .doras{
-    /* display: flex;これあったらそりゃ回り込まないよねえ！自分で気づけた嬉しい */
-    align-items: flex-start;
-  }
-  
-  .dora-moji{
-    margin-left: 16px;
-  }
-  
-  .dora-name{
-    white-space: nowrap;
-    font-size: 28px;
-    font-weight: 800;
-  }
-  
-  .dora-dis{
-    /* width: 100%; */
-    /* これで解決した!?!?!?!?!?!? */
-    font-size: 20px;
-    text-align: justify;
-    color: #3a3a3a;
-  }
-  
-  .left img{
-    width: 45%;
-    height: auto;
-    margin: 8px 12px 8px 8px;
-    max-width: 40vh;
-    max-height: 40wh;
-    object-fit: contain;
-    float: left;
-  }
-  
-  
-  
-  /* ここから右 */
-  
-  
-  .right{
-    flex: 1;
-    /* border-left: 0.1px solid whitesmoke; */
-    overflow: auto;
-    overflow-x: hidden;
-  }
-  
-  .profile{margin-left: 24px;
-    margin-right: 24px;}
-  
-  .pro-name{font-size: 24px;
-    font-weight: 700;
-  }
-  
-  .pro-dis{font-size: 16px;
-    font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体";
-    line-height: 1.5;
-    text-align: justify;}
-  
-  
-  
-  
-  
-  
-  .kara-moji{
-    margin-left: 18px;
-  }
-  
-  .kara-name{
-    font-size: 24px;
-    font-weight: 700;
-    margin-top: 36px;
-  }
+.box:hover span:nth-child(1) {
+  display: inline-block;
+}
   
-  .kara-dis{
-    font-size: 16px;
-    font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体";
-  }
+.box:hover span:nth-child(2) {
+  opacity: 0;
+}
   
-  .kara img{
-    height: auto;
-    margin: 12px;
-  }
+/* ここから縦2分割要素*/
+.wrapper {
+  display: flex;
+  flex-direction: row;
+  height: 100vh;
+  font-family: BIZ UDMincho;
+}
+  
+.left {
+  flex: 1;
+  border-right: 0.1px solid rgba(208, 208, 208, 0.969);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  /* position: relative; */
+  padding-right: 12px;
+}
+  
+.doras {
+  /* display: flex;これあったらそりゃ回り込まないよねえ！自分で気づけた嬉しい */
+  align-items: flex-start;
+}
+  
+.dora-moji {
+  margin-left: 16px;
+  color: #3a3a3a;
+}
+  
+.dora-nam {
+  white-space: normal;
+  font-size: 28px;
+  font-weight: 800;
+}
+  
+.dora-dis {
+  /* width: 100%; */
+  /* これで解決した!?!?!?!?!?!? */
+  font-size: 14px;
+  text-align: justify;
+  font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体";
+}
+  
+.left img {
+  width: 40%;
+  height: auto;
+  margin: 8px 12px 8px 8px;
+  max-width: 40vh;
+  max-height: 40wh;
+  object-fit: contain;
+  float: left;
+}
+
+/* ここから右 */
+.right {
+  flex: 1;
+  /* border-left: 0.1px solid whitesmoke; */
+  overflow: auto;
+  overflow-x: hidden;
+  color: #3a3a3a;
+  max-height: 100vh;
+}
+  
+.profile {
+  margin-left: 24px;
+  margin-right: 24px;
+}
+  
+.pro-name {
+  font-size: 24px;
+  font-weight: 700;
+}
+  
+.pro-dis {
+  font-size: 16px;
+  font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体";
+  line-height: 1.5;
+  text-align: justify;
+}
+
+.kara-moji {
+  margin-left: 18px;
+}
+  
+.kara-name {
+  font-size: 24px;
+  font-weight: 700;
+  margin-top: 36px;
+}
+  
+.kara-dis {
+  font-size: 16px;
+  font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体";
+}
+  
+.kara img {
+  height: auto;
+  margin: 12px;
+}
    
-  .yoro{margin-left: 24px; margin-right: 24px; text-align: justify;}
-  
-  .yoro-name{font-size: 24px; font-weight: 700; margin-top: 36px;}
-  
-  .yoro-dis{
-    font-size: 16px;
-    font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体";
-  }
-  
-  /* 以下footer */
-  .myname{text-align: center;}
\ No newline at end of file
+.yoro {
+  margin-left: 24px;
+  margin-right: 24px;
+  text-align: justify;
+}
+  
+.yoro-name {
+  font-size: 24px;
+  font-weight: 700;
+  margin-top: 36px;
+}
+  
+.yoro-dis {
+  font-size: 16px;
+  font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体";
+}
+  
+/* 以下footer */
+.myname {
+  text-align: center;
+  color: #3a3a3a;
+}
+
+.sitename {
+  font-family: BIZ UDMincho;
+  color: #3a3a3a;
+  font-size: 24px;
+}
path: index.css
user: login: mihara-nextat
body: 空行追加しておきましょう
created_at: 2025-04-10T01:21:00Z
author_association: COLLABORATOR
diff_hunk: @@ -42,59 +46,57 @@
                     <span>こんにちは3</span>
                 </button>
             </div>
-
         </div>
 
-        <!-- ここから左右要素 -->
-    <hr>
-
-    <div class="wrapper">
-        <div class="left">
-            <div class="doras">
-                <img src="resource/profile.png" alt="" width="40%">
-                <div class="dora-moji">
-                    <p class="dora-name">Shu Tsuchida</p>
-                    <p class="dora-dis">
-                       回り込みの確認のための要素です。Geminiにふにゃふにゃなドラえもんについて説明してもらいました。ふにゃふにゃなドラえもん」は、ドラえもんの具体的な形状や動きを指すのではなく、彼の状態や性質を、触覚的な言葉である「ふにゃふにゃ」を用いて間接的に表現するものです。例えば、普段は頼りになるドラえもんが、珍しく自信を失っていたり、弱気になっていたりする様子を「今日のドラえもんはなんだかふにゃふにゃしている」と表現することがあります。これは、彼の精神的な不安定さや頼りがいがない印象を、あたかも柔らかく形が定まらない物体のように捉えているわけです。また、ドラえもんの優しさや柔軟な思考を表現する際に、「彼のふにゃふにゃとした優しさがのび太を包み込む」といったように、物理的な柔らかさとは異なる、受容的で穏やかな性質を「ふにゃふにゃ」という言葉で表すこともあります。このように、比喩的な表現としての「ふにゃふにゃ」は、ドラえもんの目に見えない内面的な状態や性格の特徴を、より感覚的に、そして印象的に伝えるための言葉として用いられます。文脈によってその意味合いは微妙に変化しますが、いずれの場合も、ドラえもんというキャラクターをより多角的に理解するための補助的な表現として機能していると言えるでしょう。
-                    </p>
+    <!-- ここから左右要素 -->
+        <hr>
+        <div class="wrapper">
+            <div class="left">
+                <div class="doras">
+                    <img src="resource/profile.png" alt="" width="40%">
+                    <div class="dora-moji">
+                      <p class="dora-name">Shu Tsuchida</p>
+                      <p class="dora-dis">
+                         回り込みの確認のための要素です。Geminiにふにゃふにゃなドラえもんについて説明してもらいました。「ふにゃふにゃなドラえもん」は、ドラえもんの具体的な形状や動きを指すのではなく、彼の状態や性質を、触覚的な言葉である「ふにゃふにゃ」を用いて間接的に表現するものです。例えば、普段は頼りになるドラえもんが、珍しく自信を失っていたり、弱気になっていたりする様子を「今日のドラえもんはなんだかふにゃふにゃしている」と表現することがあります。これは、彼の精神的な不安定さや頼りがいがない印象を、あたかも柔らかく形が定まらない物体のように捉えているわけです。また、ドラえもんの優しさや柔軟な思考を表現する際に、「彼のふにゃふにゃとした優しさがのび太を包み込む」といったように、物理的な柔らかさとは異なる、受容的で穏やかな性質を「ふにゃふにゃ」という言葉で表すこともあります。このように、比喩的な表現としての「ふにゃふにゃ」は、ドラえもんの目に見えない内面的な状態や性格の特徴を、より感覚的に、そして印象的に伝えるための言葉として用いられます。文脈によってその意味合いは微妙に変化しますが、いずれの場合も、ドラえもんというキャラクターをより多角的に理解するための補助的な表現として機能していると言えるでしょう。
+                      </p>
+                    </div>
                 </div>
             </div>
 
-        </div>
-
         <!-- ここから右 -->
-        <div class="right">
-
-            <div class="profile">
-                <p class="pro-name">自己紹介</p>
-                <p class="pro-dis">24歳です。奈良出身, 大学東京の卒業から京都です。週１は出社したいのでリモートはじまってからも通勤圏内だと嬉しいですね🧐<br><br> どうなるにしても京都の美味しいご飯なりスイーツなりグルメは色々行きたいところ、、、食べログのブロンズとかシルバーの称号って、普通コース料理とかの高級店に付与されるもので、特にシルバーはスイーツ部門だと年に0〜２店舗くらいしか選出されないほど希少。何ですけど京都にはそのシルバーを受賞してる和菓子屋さん(嘯月{しょうげつ})があるので、少なくともそこは早いうちに行きたいですね。<br><br> そこに限らず遊びもしたい、、周辺の県に結構行きやすい場所でもあると思うので隙をみて行きたいですね。</p>
-            </div>
+            <div class="right">
+                <div class="profile">
+                    <p class="pro-name">自己紹介</p>
+                    <p class="pro-dis">
+                         24歳です。奈良出身, 大学東京の卒業から京都です。週１は出社したいのでリモートはじまってからも通勤圏内だと嬉しいですね🧐<br><br> どうなるにしても京都の美味しいご飯なりスイーツなりグルメは色々行きたいところ、、、食べログのブロンズとかシルバーの称号って、普通コース料理とかの高級店に付与されるもので、特にシルバーはスイーツ部門だと年に0〜２店舗くらいしか選出されないほど希少。何ですけど京都にはそのシルバーを受賞してる和菓子屋さん(嘯月{しょうげつ})があるので、少なくともそこは早いうちに行きたいですね。<br><br> そこに限らず遊びもしたい、、周辺の県に結構行きやすい場所でもあると思うので隙をみて行きたいですね。
+                    </p>
+                </div>
 
-            <div class="kara">
-                <img src="resource/karaoke.png" alt="" width="100%">
-                <div class="kara-moji">
-                    <p class="kara-name">カラオケ</p>
-                    <p class="kara-dis"> 趣味です。大学１年生の頃からハマっててそこそこ行ってました。週に１回は行ってたとしたら６年間で300回は行ってるわけですね、習慣恐ろしや、、一回1200円かかるとしたら36万円かかっているわけですね、恐ろしや、、、<br><br> ちなみにカラオケDAMの機材はAmazonで100万円くらいで売ってます。たけ〜〜日々機材が新しくなることを考えたら無理ですね🙂‍↔️<br><br> カラオケこんなに行ってますが、うまさでいうとダニングクルーガー曲線でいう"絶望の谷"を超えて"啓蒙の坂"に差し当たったあたりです。
-                        <img src="resource/kyokusen.png" alt="" width="100%">
-                        <br>あとカラオケ関連で曲を聴くのも好きです。全曲知ってるとかじゃないけど、サカナクションとか米津とか好きです、無難やね。<br>広く浅くでいろいろ聴くのが好きなので、おしゃ曲マニアの方、気をてらってるのもそうじゃないのも何でもおしゃ曲教えて頂けるとまじで嬉しいです。<br></p>
+                <div class="kara">
+                    <img src="resource/karaoke.png" alt="" width="100%">
+                    <div class="kara-moji">
+                        <p class="kara-name">カラオケ</p>
+                        <p class="kara-dis"> 
+                            趣味です。大学１年生の頃からハマっててそこそこ行ってました。週に１回は行ってたとしたら６年間で300回は行ってるわけですね、習慣恐ろしや、、一回1200円かかるとしたら36万円かかっているわけですね、恐ろしや、、、<br><br> ちなみにカラオケDAMの機材はAmazonで100万円くらいで売ってます。たけ〜〜日々機材が新しくなることを考えたら無理ですね🙂‍↔️<br><br> カラオケこんなに行ってますが、うまさでいうとダニングクルーガー曲線でいう"絶望の谷"を超えて"啓蒙の坂"に差し当たったあたりです。??????
+                            <img src="resource/kyokusen.png" alt="" width="100%">
+                            <br>あとカラオケ関連で曲を聴くのも好きです。全曲知ってるとかじゃないけど、サカナクションとか米津とか好きです、無難やね。<br>広く浅くでいろいろ聴くのが好きなので、おしゃ曲マニアの方、気をてらってるのもそうじゃないのも何でもおしゃ曲教えて頂けるとまじで嬉しいです。<br>
+                        </p>
+                    </div>
                 </div>
-            </div>
 
-            <div class="yoro">
-                <p class="yoro-name">よろしく</p>
-                <p class="yoro-dis">自分のできる努力をしてしっかり知識を深め、できることを増やしていきたいです。あらためまして、プログラミング未経験からですので質問などお世話になることも多いと思いますが、何卒よろしくお願いいたします。</p>
+                <div class="yoro">
+                    <p class="yoro-name">よろしく</p>
+                    <p class="yoro-dis">
+                        自分のできる努力をしてしっかり知識を深め、できることを増やしていきたいです。あらためまして、プログラミング未経験からですので質問などお世話になることも多いと思いますが、何卒よろしくお願いいたします。
+                    </p>
+                </div>
             </div>
-
-
-
         </div>
-    </div>
-
-
 
         <footer>
             <hr>
-	        <p class="myname">© 2024 Shu Tsuchida.</p>
-	      </footer>
+            <p class="sitename">Yoroshiku Wiki</p>
+            <p class="myname">© 2024 Shu Tsuchida.</p>
+        </footer>
     </body>
 </html>
path: index.html
user: login: mihara-nextat
body: 空行追加しておきましょう
created_at: 2025-04-10T01:21:24Z
author_association: COLLABORATOR

PR comments:
user: login: s-tsuchida-nextat
created_at: 2025-04-10T01:15:36Z
body: HTML/cssの書式を揃えました
author_association: OWNER
user: login: s-tsuchida-nextat
created_at: 2025-04-10T01:30:46Z
body: HTML/CSS両ファイルの最後に空白を入れました
author_association: OWNER