LogoMark.png

谷口和歌子/メモ の変更点

#author("2024-04-25T15:13:34+09:00","default:member","member")
#author("2025-05-19T16:15:43+09:00;2024-04-25T15:13:34+09:00","default:member","member")
//[[谷口和歌子/SubMenu]]
~
#setbgcolor(#fff8dc)
*記憶管理メモ
~
***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;
}