はじめに
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プロパティで、キーフレームの名前、アニメーションの時間、繰り返し回数を指定します。
まとめ
これで、CSSを使って図を作成する基本的な方法が理解できたかと思います。
これらのテクニックを組み合わせることで、さまざまな図を表現することができます。
ぜひ、自分だけのオリジナルな図を作成して、ウェブサイトを魅力的にデザインしましょう！
