プログラミング

CSSで作る基本図形

最終更新： 22/04/2025
1 分の読み

CSSを使って様々な形状を作成する方法について、この記事では、基本的な図形から少し複雑な図形まで、詳細に解説します。CSSを活用することで、HTMLの構造に影響を与えず、視覚的に多様な形を作ることができます。この記事では、矩形、円、三角形、五角形などの基本的な形状を作成する方法に加え、変形やアニメーションを使用してより高度な形状を作る方法についても触れていきます。

1. 矩形（長方形・正方形）

矩形を作成するのは、CSSの中でも最も基本的な形状作成方法の一つです。長方形や正方形を作るためには、width（幅）とheight（高さ）プロパティを指定します。

関連記事

例1: 正方形

css
.square {
    width: 100px;
    height: 100px;
    background-color: blue;
}

上記のコードでは、widthとheightを100pxに設定することで、正方形の形を作成しています。背景色を青に設定しています。

例2: 長方形

css
.rectangle {
    width: 150px;
    height: 100px;
    background-color: red;
}

長方形の場合、widthとheightを異なる値に設定することで、矩形の形を作成できます。

2. 円

円を作成するには、border-radiusプロパティを使用します。border-radiusを50%に設定することで、正方形の要素を丸い円に変形させることができます。

例3: 円

css
.circle {
    width: 100px;
    height: 100px;
    background-color: green;
    border-radius: 50%;
}

このコードでは、widthとheightを100pxに設定し、border-radiusを50%に設定することで、円形の要素を作成しています。

3. 三角形

CSSで三角形を作成するには、borderプロパティを巧みに利用します。具体的には、透明なボーダーを使い、指定した色を一方向のボーダーにだけ適用することで三角形を描きます。

例4: 上向き三角形

css
.triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid yellow;
}

ここでは、border-leftとborder-rightを透明に設定し、border-bottomに色を設定することで上向きの三角形を作成しています。

例5: 下向き三角形

css
.triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid purple;
}

下向きの三角形は、border-topに色を設定することで作成できます。

4. 五角形

五角形のような多角形を作成する場合、CSSのclip-pathプロパティを利用します。clip-pathを使うと、任意の形に要素を切り抜くことができます。

例6: 五角形

css
.pentagon {
    width: 100px;
    height: 100px;
    background-color: orange;
    clip-path: polygon(50% 0%, 100% 38%, 81% 100%, 19% 100%, 0% 38%);
}

この例では、clip-pathを使って、五角形の形に要素を切り抜いています。polygon関数を使うことで、多角形の頂点を指定しています。

5. 星形

星形の図形もCSSを使って作成可能です。clip-pathを利用して、複雑な形状を作成することができます。

例7: 星形

css
.star {
    width: 100px;
    height: 100px;
    background-color: gold;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

このコードでは、clip-pathを使って星形の図形を作成しています。polygon関数で星形の頂点を定義することで、星の形に要素を切り抜いています。

6. 複雑な形状の作成方法

CSSでの形状作成は、単純な図形だけでなく、変形やアニメーションを使ってさらに複雑なものを作ることも可能です。例えば、transformプロパティを使うことで、回転やスケーリングを行ったり、animationプロパティで動きを加えたりできます。

例8: 回転する正方形

css
.rotate-square {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: rotate 2s infinite linear;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

このコードでは、正方形の要素が回転するアニメーションを作成しています。@keyframesを使って、0度から360度まで回転するように設定しています。

例9: 波のように動く円

css
.wave-circle {
    width: 100px;
    height: 100px;
    background-color: blue;
    border-radius: 50%;
    animation: wave 1.5s infinite ease-in-out;
}

@keyframes wave {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-30px);
    }
    100% {
        transform: translateY(0);
    }
}

このアニメーションでは、円が上下に揺れる波のような動きをします。translateYを使って、Y軸方向に移動させることで揺れ動く効果を実現しています。

結論

CSSを使うことで、ウェブデザインにおいて非常に多くの異なる図形を作成することができます。基本的な図形から、アニメーションや変形を加えた高度な図形まで、CSSの特性を活かすことで多彩なデザインが可能です。形状を作成する際は、width、height、border-radius、clip-path、transform、animationなど、CSSのプロパティをうまく組み合わせることがポイントです。

最終更新： 22/04/2025
1 分の読み
Back to top button