はじめに
CSSで図形ジェネレーターを作成することに挑戦したことがありますか?
今回は、CSSを使って図形ジェネレーターを作成する方法を初心者目線で徹底解説します。
サンプルコードや応用例も交えて、わかりやすく説明しますので、これを読めばCSSで図形作成が楽しくなること間違いなしです。
●CSSと図形ジェネレーターの基本
まずは、CSSと図形ジェネレーターについて簡単におさらいしましょう。
CSS(Cascading Style Sheets)は、Webページのデザインやレイアウトを制御するための言語です。
図形ジェネレーターとは、CSSを使って作成される図形を自動生成するツールのことを指します。
これを使えば、手間をかけずに簡単に図形を作成できます。
●図形ジェネレーター作成の基本ステップ
図形ジェネレーターを作成するための基本ステップは以下の通りです。
- CSSを使って図形を作成する方法を理解する
- ジェネレーターで使用するパラメータを決める
- パラメータに応じてCSSコードを生成するJavaScriptを書く
- ユーザーインターフェースを作成する
- 生成されたCSSコードを適用する
それでは、具体的な方法とサンプルコードを見ていきましょう。(サンプルコードは4種類です。)
●方法1:四角形ジェネレーター
四角形ジェネレーターでは、縦横のサイズや色を指定して四角形を生成することができます。
次のサンプルコードを参考にしてください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>四角形ジェネレーター</title>
<style>
.rectangle {
display: inline-block;
background-color: red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="rectangle"></div>
<script>
function generateRectangle() {
let width = document.getElementById("width").value;
let height = document.getElementById("height").value;
let color = document.getElementById("color").value;
let cssCode = `.rectangle {
display: inline-block;
background-color: ${color};
width: ${width}px;
height: ${height}px;
}`;
document.querySelector("style").innerHTML = cssCode;
}
document.getElementById("generate").addEventListener("click", generateRectangle);
</script>
<div>
幅: <input type="number" id="width" value="100">
高さ: <input type="number" id="height" value="100">
色: <input type="color" id="color" value="#ff0000">
<button id="generate">生成</button>
</div>
</body>
</html>
このコードでは、HTMLで四角形の表示エリアと入力フォームを作成し、JavaScriptで入力値を取得してCSSコードを生成しています。
生成ボタンを押すと、入力されたパラメータに基づいて四角形が表示されます。
●方法2:円形ジェネレーター
円形ジェネレーターでは、半径や色を指定して円形を生成することができます。
次のサンプルコードを参考にしてください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>円形ジェネレーター</title>
<style>
.circle {
display: inline-block;
background-color: red;
width: 100px;
height: 100px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="circle"></div>
<script>
function generateCircle() {
let radius = document.getElementById("radius").value;
let color = document.getElementById("color").value;
let cssCode = `.circle {
display: inline-block;
background-color: ${color};
width: ${radius * 2}px;
height: ${radius * 2}px;
border-radius: 50%;
}`;
document.querySelector("style").innerHTML = cssCode;
}
document.getElementById("generate").addEventListener("click", generateCircle);
</script>
<div>
半径: <input type="number" id="radius" value="50">
色: <input type="color" id="color" value="#ff0000">
<button id="generate">生成</button>
</div>
</body>
</html>
このコードでは、HTMLで円形の表示エリアと入力フォームを作成し、JavaScriptで入力値を取得してCSSコードを生成しています。
生成ボタンを押すと、入力されたパラメータに基づいて円形が表示されます。
●方法3:三角形ジェネレーター
三角形ジェネレーターでは、基本的にはborderプロパティを利用して三角形を生成します。
次のサンプルコードを参考にしてください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三角形ジェネレーター</title>
<style>
.triangle {
display: inline-block;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
</style>
</head>
<body>
<div class="triangle"></div>
<script>
function generateTriangle() {
let base = document.getElementById("base").value;
let height = document.getElementById("height").value;
let color = document.getElementById("color").value;
let cssCode = `.triangle {
display: inline-block;
width: 0;
height: 0;
border-left: ${base / 2}px solid transparent;
border-right: ${base / 2}px solid transparent;
border-bottom: ${height}px solid ${color};
}`;
document.querySelector("style").innerHTML = cssCode;
}
document.getElementById("generate").addEventListener("click", generateTriangle);
</script>
<div>
底辺: <input type="number" id="base" value="100">
高さ: <input type="number" id="height" value="100">
色: <input type="color" id="color" value="#ff0000">
<button id="generate">生成</button>
</div>
</body>
</html>
このコードでは、HTMLで三角形の表示エリアと入力フォームを作成し、JavaScriptで入力値を取得してCSSコードを生成しています。
生成ボタンを押すと、入力されたパラメータに基づいて三角形が表示されます。
●方法4:ポリゴンジェネレーター
ポリゴンジェネレーターでは、任意の角数と大きさを指定してポリゴンを生成することができます。
次のサンプルコードを参考にしてください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ポリゴンジェネレーター</title>
<style>
.polygon {
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
</style>
</head>
<body>
<div class="polygon"></div>
<script>
function generatePolygon() {
let sides = document.getElementById("sides").value;
let size = document.getElementById("size").value;
let color = document.getElementById("color").value;
let angle = 360 / sides;
let clipPath = 'polygon(';
for (let i = 0; i < sides; i++) {
let x = 50 + 50 * Math.cos((i * angle - 90) * Math.PI / 180);
let y = 50 + 50 * Math.sin((i * angle - 90) * Math.PI / 180);
clipPath += `${x}% ${y}%, `;
}
clipPath = clipPath.slice(0, -2) + ')';
let cssCode = `.polygon {
display: inline-block;
width: ${size}px;
height: ${size}px;
background-color: ${color};
clip-path: ${clipPath};
}`;
document.querySelector("style").innerHTML = cssCode;
}
document.getElementById("generate").addEventListener("click", generatePolygon);
</script>
<div>
角数: <input type="number" id="sides" value="5">
大きさ: <input type="number" id="size" value="100">
色: <input type="color" id="color" value="#ff0000">
<button id="generate">生成</button>
</div>
</body>
</html>
このコードでは、HTMLでポリゴンの表示エリアと入力フォームを作成し、JavaScriptで入力値を取得してCSSコードを生成しています。
生成ボタンを押すと、入力されたパラメータに基づいてポリゴンが表示されます。
これらのジェネレーターを応用することで、さまざまな形状の図形を作成し、ウェブページに活用することができます。
例えば、インフォグラフィックやアイコンなどのデザイン要素として使用できます。
まとめ
このコードが参考になれば幸いです。