こんにちは！今回はHTMLとCSSだけで、動きのある海の風景を作る方法をご紹介します。
波の動きや船の揺れなど、CSSアニメーションの基本を学びながら、素敵な風景を作っていきましょう。
全体のコード
まずは完成したコードを見てみましょう。
それでは、このコードを部分ごとに詳しく解説していきます。
＜1. HTML構造＞
まずはHTMLの基本構造を見てみましょう：
<body>
<div class="scene">
<div class="sun"></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>
＜解説＞
1. 一番外側に、風景全体を表示する `scene` クラスのdiv要素があります。
2. その中に以下の要素があります。
- `sun` クラスのdiv要素（太陽）
- `ocean` クラスのdiv要素（海）
- その中に3つの `wave` クラスのdiv要素（波）
- `boat` クラスのdiv要素（船）
- その中に `sail`（帆）と `hull`（船体）クラスのdiv要素
このHTML構造に、CSSでスタイルとアニメーションを追加していきます。
＜ 2. CSS解説＞
次に、CSSのコードを詳しく見ていきましょう。
2-1 全体の風景（scene）
.scene {
position: relative;
width: 100%;
height: 400px;
background: linear-gradient(180deg, #87CEEB 0%, #87CEEB 60%, #1E90FF 100%);
overflow: hidden;
}
- `position: relative`：子要素の位置決めの基準点として使用
- `width: 100%`：ページの幅いっぱいに広がるように
- `height: 400px`：風景の高さを400pxに設定
- `background: linear-gradient(...)`：空のグラデーション（薄い青から濃い青へ）
- `overflow: hidden`：子要素がはみ出した部分を隠す
2-2 海（ocean）
.ocean {
position: absolute;
bottom: 0;
width: 100%;
height: 200px;
background: linear-gradient(180deg, #1E90FF 0%, #000080 100%);
}
- `position: absolute`：親要素（scene）を基準に絶対配置
- `bottom: 0`：sceneの下端に配置
- `width: 100%`：sceneの幅いっぱいに
- `height: 200px`：海の高さは200px（sceneの半分）
- `background: linear-gradient(...)`：海のグラデーション（明るい青から暗い青へ）
2-3 波（wave）
.wave {
position: absolute;
width: 200%;
height: 40px;
background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 100%);
border-radius: 100%;
animation: wave 8s infinite linear;
}
.wave:nth-child(2) {
top: 20px;
animation-delay: -2s;
}
.wave:nth-child(3) {
top: 40px;
animation-delay: -4s;
}
@keyframes wave {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
ここでは波のスタイルとアニメーションを定義しています。
- 基本スタイル（.wave）
- `position: absolute`：親要素（ocean）を基準に絶対配置
- `width: 200%`：oceanの幅の2倍（アニメーションをスムーズにするため）
- `height: 40px`：波の高さ
- `background: linear-gradient(...)`：半透明の白から透明へのグラデーション
- `border-radius: 100%`：円形の角丸で波の形を表現
- `animation: wave 8s infinite linear`：waveという名前のアニメーションを8秒間隔で無限に繰り返し
- 2番目と3番目の波の位置と遅延（.wave:nth-child(2)と.wave:nth-child(3)）
- `top: 20px`/`top: 40px`：少しずつ下にずらして配置
- `animation-delay: -2s`/`animation-delay: -4s`：アニメーションを少しずつずらして自然な動きに
- 波のアニメーション定義（@keyframes wave）
- 開始時（0%）：元の位置
- 終了時（100%）：左に50%移動
- これを繰り返すことで、右から左へ永遠に流れる波を表現
2-4 船（boat）
.boat {
position: absolute;
bottom: 140px;
left: 50%;
transform: translateX(-50%);
animation: float 4s infinite ease-in-out;
}
.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;
}
@keyframes float {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-10px); }
}
船全体、船体、帆のスタイルとアニメーションを定義しています。
- 船全体（.boat）
- `position: absolute`：親要素（scene）を基準に絶対配置
- `bottom: 140px`：海面より少し上に配置
- `left: 50%`, `transform: translateX(-50%)`：水平方向の中央に配置
- `animation: float 4s infinite ease-in-out`：floatアニメーションを4秒間隔で滑らかに繰り返し
- 船体（.hull）
- `width: 100px`, `height: 30px`：船体のサイズ
- `background: #8B4513`：茶色の船体
- `border-radius: 0 0 50% 50%`：下部を丸くして船底の形に
- 帆（.sail）
- `position: absolute`：親要素（boat）を基準に絶対配置
- `top: -50px`, `left: 40px`：船体の上に配置
- 三角形を作るテクニック：
- `width: 0`, `height: 0`：要素自体を見えなくする
- `border-left/right: 30px solid transparent`：左右の透明な枠線
- `border-bottom: 60px solid #FFF`：下部の白い枠線で三角形を形成
- 浮遊アニメーション（@keyframes float）
- 開始時と終了時（0%, 100%）：元の位置
- 中間点（50%）：上に10px移動
- ease-in-outの指定により、徐々に加速して徐々に減速する自然な動き
2-5 太陽（sun）
.sun {
position: absolute;
top: 40px;
right: 60px;
width: 60px;
height: 60px;
background: #FFD700;
border-radius: 50%;
box-shadow: 0 0 30px #FFD700;
}
- `position: absolute`：親要素（scene）を基準に絶対配置
- `top: 40px`, `right: 60px`：右上に配置
- `width: 60px`, `height: 60px`：太陽の大きさ
- `background: #FFD700`：金色の太陽
- `border-radius: 50%`：完全な円形
- `box-shadow: 0 0 30px #FFD700`：同じ金色の光の効果を追加
＜3. アニメーションの詳細解説＞
この風景には2つの主要なアニメーションがあります。それぞれを詳しく見ていきましょう。
3-1 波のアニメーション
@keyframes wave {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
このアニメーションは波が横に動く動きを作り出します。
1. 開始時（0%）：波は初期位置にあります
2. 終了時（100%）：波は左に50%移動します
3. `infinite`属性により、アニメーションが終わると自動的に最初に戻り、繰り返されます
4. `linear`タイミング関数により、一定の速度で動きます
波の要素の幅を200%にしておくことで、半分移動しても隙間が生じません。
また、3つの波に異なるアニメーション遅延を設定することで、より自然な波の動きを表現しています。
3-2 船の浮遊アニメーション
@keyframes float {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-10px); }
}
このアニメーションは船が上下に浮かぶ動きを作り出します。
1. 開始時と終了時（0%, 100%）：船は初期位置にあります（水平方向の中央、垂直方向は変化なし）
2. 中間点（50%）：船は上に10px浮かび上がります
3. `infinite`属性により、アニメーションは無限に繰り返されます
4. `ease-in-out`タイミング関数により、船の動きが自然になり、徐々に加速して徐々に減速します
`translateX(-50%)`が両方の状態に含まれているのは、船を常に水平方向の中央に維持するためです。
完成がこちら
まとめ
HTMLとCSSだけを使って、動きのある海の風景を作成しました。
主なポイントは以下の通りです。
1. HTML構造：シンプルなdiv要素の入れ子構造
2. CSSスタイリング：
- 絶対配置（position: absolute）を使った要素の配置
- グラデーションを使った空と海の表現
- border-radiusを使った円形や曲線の表現
- CSSの三角形作成テクニック（帆）
- box-shadowを使った光の効果（太陽）
3. CSSアニメーション：
- @keyframesを使ったアニメーションの定義
- transformプロパティを使った要素の移動
- アニメーションの繰り返し（infinite）
- アニメーションの速度制御（linear, ease-in-out）
- アニメーション遅延（animation-delay）を使った波の自然な動き
HTMLとCSSだけでもこれだけの表現ができることを知っていただけたら嬉しいです。
楽しいコーディングライフをお過ごしください！
・☆・＊・☆・＊・☆・＊・☆・＊・☆・＊・☆・＊・☆・＊・☆・＊・☆・
【PR】
