読み込み中...

HTMLで図形を動かす! 5つの方法でカスタマイズ

HTMLで図形を動かす方法を学ぶ初心者の人 HTML
2023.04.02
この記事は約10分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、HTMLで図形を動かす方法を学び、カスタマイズができるようになります。

この記事では初心者向けに5つの方法を紹介し、それぞれの使い方、対処法、注意点、カスタマイズ方法を詳しく解説しています。

●HTMLで図形を動かす5つの方法

では、早速HTMLで図形を動かす5つの方法についてサンプルコード付きでみていきましょう。

○方法1：CSSアニメーションを利用

CSSアニメーションを使って図形を動かす方法は、CSSのみで実現可能で初心者にもわかりやすい方法です。

CSSアニメーションは、キーフレームと呼ばれる特定の時間帯でのスタイルを設定し、その間のアニメーションを自動的に生成します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      animation: move 5s infinite;
    }
    @keyframes move {
      0% { transform: translateX(0); }
      50% { transform: translateX(300px); }
      100% { transform: translateX(0); }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

○方法2：JavaScriptを使ったアプローチ

JavaScriptを使って図形を動かす方法は、HTML要素に対して直接スタイルを適用することで、動的なアニメーションを実現できます。

この方法では、JavaScriptのイベントリスナーとタイマーを利用して、図形の位置を変更します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: blue;
      position: absolute;
    }
  </style>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const box = document.querySelector('.box');
      let xPos = 0;
      const moveBox = function () {
        xPos += 5;
        box.style.left = xPos + 'px';
        if (xPos > 300) {
          xPos = 0;
        }
        setTimeout(moveBox, 100);
      };
      moveBox();
    });
  </script>
</head>
<body>
  <div class="box"></div>
</body>
</html>

○方法3：SVGを利用した図形のアニメーション

SVG（Scalable Vector Graphics）は、ベクター画像を表現するためのXMLベースの言語です。

SVGを利用することで、HTML内で図形を描画し、アニメーションを適用することが可能です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <svg width="500" height="500">
    <circle cx="50" cy="50" r="40" fill="green">
      <animate attributeName="cx" from="50" to="450" dur="5s" repeatCount="indefinite" />
    </circle>
  </svg>
</body>
</html>

○方法4：HTML5 Canvasを使った図形の動き

HTML5のCanvas要素は、グラフィックスやアニメーションを描画するためのAPIを提供します。

Canvasを使った図形のアニメーションは、JavaScriptで描画を制御するため、高度なアニメーションが可能です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const canvas = document.querySelector('canvas');
      const ctx = canvas.getContext('2d');
      let xPos = 0;
      function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = 'orange';
        ctx.fillRect(xPos, 50, 100, 100);
        xPos += 5;
        if (xPos > canvas.width) {
          xPos = -100;
        }
        requestAnimationFrame(draw);
      }
      draw();
    });
  </script>
</head>
<body>
  <canvas width="800" height="200"></canvas>
</body>
</html>

○方法5：CSSとJavaScriptの組み合わせで高度なアニメーション

CSSアニメーションとJavaScriptを組み合わせることで、さらに高度なアニメーションを実現できます。

例えば、マウスオーバー時にアニメーションを開始するなど、イベントに応じたアニメーションが可能です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: purple;
      transition: transform 1s;
    }
  </style>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const box = document.querySelector('.box');
      box.addEventListener('mouseover', function () {
        box.style.transform = 'translateX(300px)';
      });
      box.addEventListener('mouseout', function () {
        box.style.transform = 'translateX(0)';
      });
    });
  </script>
</head>
<body>
  <div class="box"></div>
</body>
</html>

●応用例とサンプルコード

下記に紹介した5つの方法を応用し、さまざまな図形のアニメーションを作成できます。

例えば、複数の図形を同時に動かす、回転させる、拡大・縮小するなど、独自のカスタマイズが可能です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      perspective: 1000px;
    }
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      animation: move 5s linear infinite, rotate 3s linear infinite, scale 2s linear infinite alternate;
    }
    .circle {
      width: 100px;
      height: 100px;
      background-color: blue;
      border-radius: 50%;
      position: absolute;
      top: 150px;
      animation: move 5s linear infinite, rotate 3s linear infinite, scale 2s linear infinite alternate;
    }
    @keyframes move {
      0% { transform: translateX(0); }
      100% { transform: translateX(500px); }
    }
    @keyframes rotate {
      0% { transform: rotateY(0deg); }
      100% { transform: rotateY(360deg); }
    }
    @keyframes scale {
      0% { transform: scale(1); }
      100% { transform: scale(1.5); }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
    <div class="circle"></div>
  </div>
</body>
</html>

このサンプルコードでは、CSSアニメーションを利用して、赤い四角形と青い円形の図形を同時に動かし、回転させ、拡大・縮小するアニメーションを実現しています。

複数のアニメーションを組み合わせることで、さらにリッチな表現が可能になります。

まとめ

この記事を読めば、HTMLで図形を動かす方法をマスターし、自分だけのオリジナルなアニメーションを作成できるようになります。

5つの方法と応用例を参考に、さまざまな図形やアニメーションを試してみてください。

どんなアイデアでも、実現できる可能性があります。