谷口和歌子/メモ

記憶管理メモ

chordについて

・‐［［好きな文字＞名前／○○］］＝好きな文字で表示する方法（半角）
・#setheadercolor(#e5abbe)
・#setbgcolor(#カラーコード)＝背景の色を変える

!DOCTYPE html>

html lang="ja">

head>

 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <title>交換日記 - おばあちゃんとわたし</title>
 <link rel="stylesheet" href="style.css"/>

/head>

body>

 <header>
   <h1>おばあちゃんとわたしの交換日記</h1>
   <nav>
     <ul>
       <li><a href="#">ホーム</a></li>
       <li><a href="#">日記一覧</a></li>
       <li><a href="#">クイズ</a></li>
       <li><a href="#">方言一覧</a></li>
       <li><a href="#">写真一覧</a></li>
       <li><a href="#">アバウト</a></li>
     </ul>
   </nav>
 </header>

 <main>
   <section class="main-photo">
     <img src="main.jpg" alt="メイン写真（例）"/>
     <p class="caption">今日はこんなことがあったよ！</p>
   </section>

   <section class="diary-preview">
     <h2>最新の日記</h2>
     <div class="diary-grid">
       <article>
         <img src="entry1.jpg" alt="日記1" />
         <h3>○月×日（おばあちゃん）</h3>
         <p>今日はおまんじゅう作ったよ</p>
       </article>
       <article>
         <img src="entry2.jpg" alt="日記2" />
         <h3>○月×日（わたし）</h3>
         <p>学校で運動会の練習をしたよ</p>
       </article>
     </div>
   </section>
 </main>

 <footer>
   <p>&copy; 2025 おばあちゃんとわたしの交換日記</p>
 </footer>

/body>

/html>

/* フォントなどレトロ風に */
body {

 font-family: "YuMincho", "Hiragino Mincho ProN", serif;
 background-color: #fef6e4;
 color: #333;
 margin: 0;
 padding: 0;

}

header {

 background-color: #c44536;
 color: white;
 padding: 1em;
 text-align: center;

}

nav ul {

 list-style: none;
 padding: 0;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;

}

nav li {

 margin: 0.5em;

}

nav a {

 color: white;
 text-decoration: none;
 font-weight: bold;

}

.main-photo {

 text-align: center;
 background-color: #f4d58d;
 padding: 1em;

}

.main-photo img {

 max-width: 90%;
 border: 5px solid #e8dab2;

}

.caption {

 margin-top: 0.5em;
 font-style: italic;

}

.diary-preview {

 padding: 1em;

}

.diary-grid {

 display: flex;
 flex-wrap: wrap;
 gap: 1em;
 justify-content: center;

}

article {

 background: #fff;
 border: 2px solid #e4c1f9;
 padding: 1em;
 max-width: 200px;
 text-align: center;
 border-radius: 10px;

}

footer {

 background-color: #c44536;
 color: white;
 text-align: center;
 padding: 1em;
 margin-top: 2em;

}