CSSで図を作る！初心者向け7つの方法

はじめに
●CSSで図を作る方法1：四角形
●CSSで図を作る方法2：円
●CSSで図を作る方法3：三角形
●CSSで図を作る方法4：線
●CSSで図を作る方法5：影
●CSSで図を作る方法6：グラデーション
●CSSで図を作る方法7：アニメーション
まとめ

はじめに

CSSって何だか難しそう……そんな風に感じていませんか？

そんなあなたも大丈夫！この記事を読むことで、初心者でも簡単にCSSを使った図の作成方法がわかります。

CSSを使って、ウェブサイトに魅力的な図を加えることで、見た目が一気にパワーアップ！

ぜひ、この記事で学んだ知識を活かしてください。

●CSSで図を作る方法1：四角形

まずは、四角形を作成してみましょう。

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

<!DOCTYPE html>
<html>
<head>
<style>
.rectangle {
  width: 200px;
  height: 100px;
  background-color: #f00;
}
</style>
</head>
<body>
<div class="rectangle"></div>
</body>
</html>

このコードでは、<style>タグ内で.rectangleというクラスを定義し、その中でwidthとheightを指定して四角形のサイズを決めています。

background-colorで色も指定できます。

●CSSで図を作る方法2：円

次に、円を作成してみましょう。

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

<!DOCTYPE html>
<html>
<head>
<style>
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #00f;
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>

このコードでは、.circleクラスでborder-radiusを50%に指定することで、四角形が円に変化します。

●CSSで図を作る方法3：三角形

三角形もCSSで簡単に作成できます。

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

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

三角形は、ボーダーの幅を調整して作成します。

.triangleクラスで、border-leftとborder-rightを透明にし、border-bottomに色を指定することで、上向きの三角形ができます。

●CSSで図を作る方法4：線

線もCSSで簡単に描画できます。

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

<!DOCTYPE html>
<html>
<head>
<style>
.line {
  width: 100%;
  height: 2px;
  background-color: #000;
}
</style>
</head>
<body>
<div class="line"></div>
</body>
</html>

.lineクラスでheightを2pxにすることで、線が作成できます。

widthを調整することで、線の長さを変更できます。

●CSSで図を作る方法5：影

影をつけることで、図に立体感を出すことができます。

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

<!DOCTYPE html>
<html>
<head>
<style>
.shadow {
  width: 200px;
  height: 100px;
  background-color: #f00;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="shadow"></div>
</body>
</html>

.shadowクラスでbox-shadowを指定し、影のオフセットとぼかしを調整します。

rgbaで色と透明度も設定できます。

●CSSで図を作る方法6：グラデーション

グラデーションを使って、図に色彩豊かな表現を加えましょう。

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

<!DOCTYPE html>
<html>
<head>
<style>
.gradient {
  width: 200px;
  height: 100px;
  background: linear-gradient(45deg, #f00, #00f);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>

.gradientクラスでbackgroundにlinear-gradientを指定し、角度と色を指定します。

角度を変えることで、グラデーションの方向を変更できます。

●CSSで図を作る方法7：アニメーション

アニメーションを使って、図を動かすことができます。

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

<!DOCTYPE html>
<html>
<head>
<style>
@keyframes move {
  from {left: 0px;}
  to {left: 200px;}
}

.animated {
  width: 100px;
  height: 100px;
  background-color: #f0f;
  position: relative;
  animation: move 4s infinite;
}
</style>
</head>
<body>
<div class="animated"></div>
</body>
</html>

このコードでは、@keyframesでアニメーションのキーフレームを定義しています。

fromとtoで開始位置と終了位置を指定し、.animatedクラスでアニメーションの設定を行っています。

animationプロパティで、キーフレームの名前、アニメーションの時間、繰り返し回数を指定します。