こんにちは！今回は、CSSだけでスーパーマリオ風キャラクターのピクセルアートを作り、さらにジャンプアニメーションと背景の雲まで実装する方法を、初心者の方にも分かりやすく解説していきます。
＜目次＞
1. 基本的な設定
2. マリオ風キャラクターのピクセルアートを作る
3. ジャンプアニメーションを追加する
4. 背景に動く雲を追加する
基本的な設定
まずは、画面全体の基本的な設定から始めましょう。
＜解説＞
- `margin: 0;` - ページの余白をなくします
- `min-height: 100vh;` - 画面の高さいっぱいに表示します（vhは viewport height の略）
- `display: flex;` - フレックスボックスレイアウトを使用します
- `justify-content: flex-start;` - 要素を左寄せにします
- `align-items: center;` - 要素を縦方向の中央に配置します
- `background-color: #87CEEB;` - 空色の背景を設定します
- `overflow: hidden;` - 画面からはみ出た要素を隠します
次に、マリオ風キャラクターを配置するコンテナーを作ります
- `position: relative;` - 子要素の配置の基準点となります
- `width: 100%;` - 画面幅いっぱいに広がります
- `height: 400px;` - 高さを400ピクセルに設定します
- `background: linear-gradient();` - グラデーションで地面を表現します
マリオのピクセルアートを作る
マリオの本体は、CSSの`box-shadow`プロパティを使って作ります。
これは通常は影を付けるためのプロパティですが、ここでは各ピクセルを表現するために使用します。
＜box-shadowの書き方の解説＞
- `80px 0` - X軸に80px、Y軸に0pxの位置にピクセルを配置
- `#FF0000` - 赤色を指定（マリオの帽子の色）
- カンマで区切って次々とピクセルを追加
ジャンプアニメーションを追加する
マリオをジャンプさせるために、`@keyframes`でアニメーションを設定します。
＜アニメーションの解説＞
- `0%, 100%` - アニメーションの開始時と終了時の状態
- `50%` - アニメーションの中間地点（最も高く跳んだ時）
- `-150px` - 上方向に150ピクセル移動
- `1.2s` - アニメーションの1周期の時間
- `infinite` - アニメーションを無限に繰り返す
- `ease-in-out` - なめらかな加速と減速を付ける
背景に動く雲を追加する
- 基本の形を横長の白い丸として作り
- `::before`と`::after`疑似要素で上部の丸みを追加
- `opacity: 0.8`で少し透明にします
＜アニメーション＞
- `100vw`から始まり（画面右端）
- `-60px`まで移動（画面左端）
- `20s`かけてゆっくり移動
- 複数の雲に異なる`animation-delay`を設定して、タイミングをずらす
htmlを仕上げて完成
完成がこちら
以上が、CSSだけでマリオのピクセルアートとアニメーションを作る方法の解説でした。
コーディングって楽しいですね！
・☆・＊・☆・＊・☆・＊・☆・＊・☆・＊・☆・＊・☆・＊・☆・＊・☆・
【PR】
