50代主婦ゆきんこのチャレンジブログ: HTMLとCSSを使って「海の日没シーン」を作る方法

こんにちは！今回は、HTMLとCSSだけを使って「海の日没シーン」を作る方法を、コーディング初心者の方にも分かりやすく解説します。

プログラミングの経験がなくても大丈夫。

この記事を読めば、驚くほど簡単にアニメーションが作れることが分かりますよ。

＜完成イメージ＞

作るのは、次のような海の日没シーンです。

- 青い空が徐々に夕焼け色に変わり、最後は夜になります

- 太陽が動きながら沈んでいきます

- 夜になると星が現れます

- 海の上にはボートが浮かんでおり、ゆらゆらと揺れ動きます

- 波がゆっくりと動いています

基本構造：HTMLから始めよう

まずはHTMLで基本的な構造を作ります。

<!DOCTYPE html>
<html>
<head>
  <style>
    /* ここにCSSが入ります（後で説明します） */
  </style>
</head>
<body>
  <div class="scene">
    <div class="sun"></div>
    <div class="stars"></div>
    <div class="ocean">
      <div class="wave"></div>
      <div class="wave"></div>
      <div class="wave"></div>
    </div>
    <div class="boat">
      <div class="sail"></div>
      <div class="hull"></div>
    </div>
  </div>
</body>
</html>

- `scene` - 全体のシーンを表す枠組み

- `sun` - 太陽

- `stars` - 星々（後でJavaScriptで生成します）

- `ocean` - 海

- `wave` - 波（3つ用意しています）

- `boat` - ボート

- `sail` - 帆

- `hull` - 船体

これだけではまだ何も表示されません。見た目とアニメーションはCSSで定義します。

CSSでスタイリングとアニメーション

CSSは「どのように表示するか」を定義する言語です。色や形だけでなく、動きも定義できます。

＜1. 基本的なスタイル＞

まずは基本的な見た目を整えましょう

css

.scene {
  position: relative;
  width: 100%;
  height: 400px;
  background: linear-gradient(180deg, #87CEEB 0%, #87CEEB 60%, #1E90FF 100%);
  overflow: hidden;
}

.ocean {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 200px;
  background: linear-gradient(180deg, #1E90FF 0%, #000080 100%);
}

.sun {
  position: absolute;
  top: 40px;
  right: 60px;
  width: 60px;
  height: 60px;
  background: #FFD700;
  border-radius: 50%;
  box-shadow: 0 0 30px #FFD700;
}

- `scene` に高さと背景色（グラデーション）を設定

- `ocean` を画面下部に配置し、青いグラデーションを適用

- `sun` を円形にして、黄色い輝きを追加

＜2. ボートのスタイル＞

次に、ボートの見た目を定義します。

css

.boat {
    position: absolute;
    bottom: 140px; 
    left: 50%;
    transform: translateX(-50%);
  }
  
  .hull {
    width: 100px;
    height: 30px;
    background: #8B4513;
    border-radius: 0 0 50% 50%;
  }
  
  .sail {
    position: absolute;
    top: -50px;
    left: 40px;
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 60px solid #FFF;
  }

- `hull`（船体）は茶色の半円形

- `sail`（帆）は白い三角形を作るために、CSSの「border trick」というテクニックを使っています

- `left: 50%` と `transform: translateX(-50%)` で、ボートを水平方向の中央に配置

＜3. 波のスタイル＞

波も追加しましょう。

css

.wave {
    position: absolute;
    width: 200%;
    height: 40px;
    background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 100%);
    border-radius: 100%;
  }
  
  .wave:nth-child(2) {
    top: 20px;
  }
  
  .wave:nth-child(3) {
    top: 40px;
  }

波は半透明の白いグラデーションで、円の上部だけが見える形にしています。

3つの波を少しずつずらして配置しています。

アニメーションを追加しよう

ここからが本題！CSSのみでアニメーションを実現します。

＜1. @keyframes とは？＞

CSSアニメーションの核となるのが `@keyframes` です。

これは「時間の経過とともに、要素のスタイルをどう変化させるか」を定義します。

＜2. 波のアニメーション＞

まずは波に動きをつけましょう。

css

.wave {
    /* 既存のスタイルに追加 */
    animation: wave 8s infinite linear;
  }
  
  .wave:nth-child(2) {
    /* 既存のスタイルに追加 */
    animation-delay: -2s;
  }
  
  .wave:nth-child(3) {
    /* 既存のスタイルに追加 */
    animation-delay: -4s;
  }
  
  
  @keyframes wave {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

- `infinite` でアニメーションを無限に繰り返します

- `linear` で一定の速度で動かします

- 3つの波にずれを作るため、`animation-delay` に負の値を設定します

- `translateX` で波を左右に動かしています

＜3. ボートを揺らすアニメーション＞

ボートを上下に揺らします。

css

.boat {
  /* 既存のスタイルに追加 */
  animation: float 4s infinite ease-in-out;
}

@keyframes float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-10px); }
}

- `ease-in-out` で滑らかな動きを実現

- 0%と100%で同じ位置、50%で10px上に移動させることで、上下の揺れを表現

- `translateX(-50%)` は中央配置のために必要なので、アニメーション中も維持

＜4. 日没のアニメーション＞

これが一番複雑な部分です。空、海、太陽の色と位置を変化させます：

css

.scene {
  /* 既存のスタイルに追加 */
  animation: sky-change 20s infinite linear;
}

@keyframes sky-change {
  0%, 100% { background: linear-gradient(180deg, #87CEEB 0%, #87CEEB 60%, #1E90FF 100%); }
  25% { background: linear-gradient(180deg, #FFB6C1 0%, #FFA07A 60%, #FF4500 100%); }
  50% { background: linear-gradient(180deg, #4B0082 0%, #8A2BE2 60%, #9400D3 100%); }
  75% { background: linear-gradient(180deg, #000000 0%, #191970 60%, #483D8B 100%); }
}

.ocean {
  /* 既存のスタイルに追加 */
  animation: ocean-change 20s infinite linear;
}

@keyframes ocean-change {
  0%, 100% { background: linear-gradient(180deg, #1E90FF 0%, #000080 100%); }
  25% { background: linear-gradient(180deg, #FF4500 0%, #8B0000 100%); }
  50% { background: linear-gradient(180deg, #4B0082 0%, #191970 100%); }
  75% { background: linear-gradient(180deg, #191970 0%, #000000 100%); }
}

.sun {
  /* 既存のスタイルに追加 */
  animation: sun-movement 20s infinite linear, sun-color 20s infinite linear;
}

@keyframes sun-movement {
  0% { top: 40px; right: 60px; }
  25% { top: 200px; right: 100px; }
  50% { top: 350px; right: 150px; opacity: 0.3; }
  75% { top: 500px; right: 200px; opacity: 0; }
  100% { top: 40px; right: 60px; opacity: 1; }
}

@keyframes sun-color {
  0% { background: #FFD700; box-shadow: 0 0 30px #FFD700; }
  25% { background: #FF4500; box-shadow: 0 0 30px #FF4500; }
  50% { background: #FF6347; box-shadow: 0 0 30px #FF6347; }
  75% { background: transparent; box-shadow: none; }
  100% { background: #FFD700; box-shadow: 0 0 30px #FFD700; }
}

- 20秒周期のアニメーションを設定

- 空と海の色が時間とともに変化（昼→夕方→夜→明け方）

- 太陽は2つのアニメーションを同時に適用：

- 位置の変化（右上から右下へ移動しながら消える）

- 色の変化（黄色→オレンジ→赤→消滅）

＜5. 星の追加とアニメーション＞

最後に、夜になると星が現れるようにします。

css

.stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: stars-appear 20s infinite linear;
}

@keyframes stars-appear {
  0%, 25% { opacity: 0; }
  50% { opacity: 0.5; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
}

星自体はJavaScriptで生成します。

html

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const stars = document.querySelector('.stars');
    for (let i = 0; i < 50; i++) {
      const star = document.createElement('div');
      star.classList.add('star');
      star.style.top = Math.random() * 100 + '%';
      star.style.left = Math.random() * 100 + '%';
      // Random size between 1 and 3px
      const size = 1 + Math.random() * 2;
      star.style.width = size + 'px';
      star.style.height = size + 'px';
      stars.appendChild(star);
    }
  });
</script>