CSSで図形・アニメーションを作る！5つの方法＆応用例

はじめに
●方法1：四角形を作る
●方法2：円形を作る
●方法3：三角形を作る
●方法4：アニメーションを作る
●方法5：図形を回転させるアニメーション
●応用例：図形を組み合わせたアニメーション
まとめ

はじめに

CSSで図形やアニメーションを作りたいけど、どうすればいいかわからない…

そんな初心者の方に向けて、この記事ではCSSで図形・アニメーションを作る5つの方法と応用例を紹介します。

サンプルコードも掲載しているので、今すぐ試してみてください！

●方法1：四角形を作る

四角形はCSSで簡単に作れます。

次のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html>
<head>
<style>
.square {
  width: 100px;
  height: 100px;
  background-color: red;
}
</style>
</head>
<body>

<div class="square"></div>

</body>
</html>

このコードでは、四角形の大きさと背景色を指定しています。

必要に応じて、値を変更してください。

●方法2：円形を作る

円形もCSSで作成できます。

次のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html>
<head>
<style>
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: blue;
}
</style>
</head>
<body>

<div class="circle"></div>

</body>
</html>

このコードでは、border-radiusを50%に設定して円形にしています。

大きさと背景色は必要に応じて変更してください。

●方法3：三角形を作る

三角形の作成には、borderプロパティを使います。

次のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html>
<head>
<style>
.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid green;
}
</style>
</head>
<body>

<div class="triangle"></div>

</body>
</html>

このコードでは、border-left、border-right、border-bottomを使って三角形を作成しています。

大きさと色を変更する場合は、これらの値を調整してください。

●方法4：アニメーションを作る

CSSでアニメーションを作成するには、@keyframesとanimationプロパティを使います。

次のサンプルコードでは、四角形が右から左へ移動するアニメーションを作成しています。

<!DOCTYPE html>
<html>
<head>
<style>
.square {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  animation: move 3s linear infinite;
}

@keyframes move {
  0% {
    left: 100%;
  }
  100% {
    left: -100px;
  }
}
</style>
</head>
<body>

<div class="square"></div>

</body>
</html>

このコードでは、@keyframesでアニメーションの進行状況を定義し、animationプロパティでそのアニメーションを要素に適用しています。

アニメーションの速度や繰り返し回数を変更する場合は、animationプロパティの値を調整してください。

●方法5：図形を回転させるアニメーション

CSSで図形を回転させるアニメーションを作成するには、transformプロパティを使います。

次のサンプルコードでは、円形が回転するアニメーションを作成しています。

<!DOCTYPE html>
<html>
<head>
<style>
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: blue;
  animation: spin 5s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
</head>
<body>

<div class="circle"></div>

</body>
</html>

このコードでは、@keyframesで回転の進行状況を定義し、animationプロパティでそのアニメーションを要素に適用しています。

回転速度や繰り返し回数を変更する場合は、animationプロパティの値を調整してください。

●応用例：図形を組み合わせたアニメーション

ここでは、上記の方法を組み合わせて、複数の図形を含むアニメーションを作成する例を紹介します。

次のサンプルコードでは、三角形が回転しながら円形の周りを移動するアニメーションを作成しています。

px;
  height: 200px;
  border-radius: 50%;
  background-color: blue;
  position: absolute;
}

.triangle {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid green;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -25px;
  margin-top: -25px;
  animation: rotateAround 5s linear infinite, spin 3s linear infinite;
}

@keyframes rotateAround {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(360deg);
  }
}
</style>
</head>
<body>

<div class="container">
  <div class="circle"></div>
  <div class="triangle"></div>
</div>

</body>
</html>

このコードでは、@keyframesで回転および移動のアニメーションを定義し、animationプロパティでそれらのアニメーションを要素に適用しています。

複数のアニメーションを同時に適用するには、animationプロパティの値をカンマで区切って指定します。

この記事で紹介した方法を試してみて、CSSで図形やアニメーションを作成する手法を身につけましょう。

それぞれの方法を組み合わせることで、さまざまな表現が可能になります。

練習を重ねて、自分だけのオリジナルなデザインを作り上げてください！