読み込み中...

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

CSS, 図形, アニメーション, 作り方, 使い方, サンプルコード, 応用例, 初心者 CSS
この記事は約8分で読めます。

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

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

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

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

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

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

はじめに

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-leftborder-rightborder-bottomを使って三角形を作成しています。

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

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

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

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

<!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で図形やアニメーションを作成する手法を身につけましょう。

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

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

まとめ

今回は、CSSで図形・アニメーションを作る5つの方法と応用例を紹介しました。

それぞれの方法を理解し、サンプルコードを試してみることで、初心者でも簡単に図形やアニメーションを作成できるようになります。

これらの基本をマスターすれば、さらなる応用も可能になるでしょう。

問題が解決できたのは、方法とサンプルコードが丁寧に解説されていたためです。

今後もこの記事を参考に、CSSを活用して素敵なデザインを楽しみましょう!