1行ぎょうずつ つくる！
オリジナル 日記帳にっきちょう 📔

まずは、日記にっきの文章ぶんしょうをまとめて書かいちゃおう！
HTMLエイチティーエムエル の なかに、下したのコードを 追加ついかしてね。

    <div class="diary-box">
        <!-- 1日目 -->
        <div class="day">
            <h2 class="date">2025年 12月 1日 (月)</h2>
            <p>今日から日記をつけることにしたよ。<br>
            CSSで色をつけると、ノートみたいで楽しい！</p>
        </div>

        <!-- 2日目 -->
        <div class="day">
            <h2 class="date">2025年 12月 2日 (火)</h2>
            <p>学校の給食でカレーが出たよ🍛<br>
            とってもおいしかった！</p>
        </div>
    </div>

まずは全体ぜんたいを包つつんでいる .diary-box を、黄色きいろいノートみたいにしよう。
CSSシーエスエス の なかに、下したのコードを 追加ついかしてね。

        .diary-box {
            width: 400px;
            margin: 0 auto; /* 真ん中に寄せる */
            background-color: #fff8e1; /* ノートっぽい薄い黄色 */
            padding: 20px;
            border-radius: 10px;
        }

このままだと文字もじがつながって 読よみにくいね。
.day を白しろいカードにして、区切くぎってみよう。
CSSシーエスエスの いちばん下したに 追加ついかしてね。

        .day {
            background-color: white;
            border: 2px solid #ffcc80; /* オレンジ色の枠線 */
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px; /* 次の日記との間をあける */
        }

さいごの仕上しあげ！ 日付ひづけの文字もじをかわいくしよう。
CSSシーエスエスの いちばん下したに 追加ついかしてね。

        .date {
            color: #ff6f00;
            border-bottom: 2px dashed #ffcc80; /* 下に点線をひく */
            padding-bottom: 5px;
            font-size: 18px;
        }