読み込み中...

CSSで驚くほど簡単！図形ジェネレーターを作成する5つの方法

CSSで作成する図形ジェネレーターの例 CSS
2024.02.18
この記事は約14分で読めます。

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

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

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

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

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

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

はじめに

CSSで図形ジェネレーターを作成することに挑戦したことがありますか？

今回は、CSSを使って図形ジェネレーターを作成する方法を初心者目線で徹底解説します。

サンプルコードや応用例も交えて、わかりやすく説明しますので、これを読めばCSSで図形作成が楽しくなること間違いなしです。

●CSSと図形ジェネレーターの基本

まずは、CSSと図形ジェネレーターについて簡単におさらいしましょう。

CSS（Cascading Style Sheets）は、Webページのデザインやレイアウトを制御するための言語です。

図形ジェネレーターとは、CSSを使って作成される図形を自動生成するツールのことを指します。

これを使えば、手間をかけずに簡単に図形を作成できます。

●図形ジェネレーター作成の基本ステップ

図形ジェネレーターを作成するための基本ステップは以下の通りです。

  1. CSSを使って図形を作成する方法を理解する
  2. ジェネレーターで使用するパラメータを決める
  3. パラメータに応じてCSSコードを生成するJavaScriptを書く
  4. ユーザーインターフェースを作成する
  5. 生成された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コードを生成しています。

生成ボタンを押すと、入力されたパラメータに基づいてポリゴンが表示されます。

これらのジェネレーターを応用することで、さまざまな形状の図形を作成し、ウェブページに活用することができます。

例えば、インフォグラフィックやアイコンなどのデザイン要素として使用できます。

まとめ

このコードが参考になれば幸いです。