プログラミング

CSSでベイマックスを動かす

最終更新： 28/03/2025
1 分の読み

CSSで「ベイマックス」のキャラクターを動かす方法完全ガイド

「ベイマックス（Big Hero 6）」は、ディズニーの映画『ベイマックス』から登場するキャラクターで、白いロボットの形をしています。このガイドでは、CSSを使ってWebページ上で「ベイマックス」のキャラクターを動かす方法について、完全かつ包括的に解説します。

関連記事

1. 基本的なセットアップ

まず最初に、HTMLとCSSの基本的なセットアップを行います。まずは、HTMLファイルを作成し、そこにベイマックスのキャラクターを描くための要素を追加します。

HTMLコード

html
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="styles.css">
head>
<body>
    <div class="container">
        <div class="baymax">
            <div class="head">div>
            <div class="body">div>
            <div class="arms">
                <div class="arm left">div>
                <div class="arm right">div>
            div>
        div>
    div>
body>
html>

このコードでは、ベイマックスの体を構成するために「head」、「body」、「arms」といったクラスを使っています。これらのクラスに対して、CSSでスタイリングを行い、アニメーションを加えることで、ベイマックスを動かしていきます。

2. ベイマックスのスタイリング

次に、CSSを使用してベイマックスの見た目を整えます。ベイマックスの形状を描くためには、円形や長方形を組み合わせてスタイリングを行います。

CSSコード

css
/* 全体のスタイル */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
}

/* ベイマックスのコンテナ */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ベイマックス本体 */
.baymax {
    width: 200px;
    height: 400px;
    background-color: #ffffff;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

/* 頭 */
.head {
    width: 120px;
    height: 120px;
    background-color: #ffffff;
    border-radius: 50%;
    position: absolute;
    top: 20px;
    left: 40px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* 体 */
.body {
    width: 180px;
    height: 250px;
    background-color: #ffffff;
    border-radius: 50%;
    position: absolute;
    top: 130px;
    left: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* 腕 */
.arms {
    position: absolute;
    top: 150px;
    left: 30px;
    width: 140px;
    height: 100px;
    display: flex;
    justify-content: space-between;
}

/* 左腕 */
.arm.left {
    width: 60px;
    height: 15px;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    transform-origin: left center;
    position: relative;
    top: 30px;
}

/* 右腕 */
.arm.right {
    width: 60px;
    height: 15px;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    transform-origin: right center;
    position: relative;
    top: 30px;
}

このCSSコードでは、ベイマックスの体、頭、腕をスタイリングしています。border-radius: 50%を使用して円形にし、box-shadowで立体感を出しています。左右の腕はtransform-originを使って回転できるように設定しています。

3. アニメーションの追加

次に、ベイマックスを動かすためのアニメーションを追加します。ここでは、ベイマックスが左右に移動するアニメーションを作成します。

アニメーションのCSSコード

css
/* ベイマックスのアニメーション */
@keyframes moveBaymax {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(100px);
    }
    100% {
        transform: translateX(0);
    }
}

/* ベイマックスの動き */
.baymax {
    animation: moveBaymax 4s ease-in-out infinite;
}

@keyframesを使って、ベイマックスの左右に動くアニメーションを作成しています。このアニメーションは、translateX()を使用して水平方向に動かします。infiniteを指定することで、無限に繰り返す動きにしています。

4. 腕のアニメーション

ベイマックスの腕も動かしたい場合、腕のアニメーションを追加することができます。例えば、腕を前後に振るアニメーションを設定します。

腕のアニメーションCSSコード

css
/* 腕の動き */
@keyframes armMove {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(30deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* 左腕 */
.arm.left {
    animation: armMove 2s ease-in-out infinite;
}

/* 右腕 */
.arm.right {
    animation: armMove 2s ease-in-out infinite reverse;
}

このアニメーションでは、左右の腕が前後に振れる動きを作り出します。reverseを使うことで、右腕が左腕の動きと反対に動くようにしています。

5. 結果の確認

これで、ベイマックスのキャラクターが左右に動き、腕も振るアニメーションが追加されました。ブラウザでHTMLファイルを開くと、ベイマックスがアニメーションで動いている様子を確認できます。

6. さらに進化させる方法

上記の基本的なアニメーションに加えて、以下のような機能を追加することができます：

  • ジャンプアニメーション: ベイマックスを上下に動かすことでジャンプさせることができます。

  • 表情の変化: 頭の部分に表情を持たせるために、目のアニメーションや変化を追加することができます。

  • 複雑な動き: JavaScriptを使って、ユーザーの入力に応じてベイマックスを動かすことができます（例えば、クリックやマウスホバーで動かすなど）。

まとめ

CSSだけで「ベイマックス」のキャラクターを動かす方法を紹介しました。基本的なHTMLとCSSのスタイリングを行い、@keyframesを使ってアニメーションを追加することで、ベイマックスを動かすことができました。この技術を応用すれば、さらに複雑なアニメーションやインタラクティブな動きも実現可能です。

最終更新： 28/03/2025
1 分の読み
Back to top button