WEB制作をしている際、デザイン通りにHTML・CSSを記述する必要がありますが、WEB上にはそれらをサポートする便利なジェネレーターツールが公開されています。
今回の記事ではこれらCSS記述をサポートする便利なジェネレーターツールをご紹介します。

グラデーション

CSS Gradient

「CSS Gradient」はCSSでグラデーションを作成するためのジェネレーターツールです。

実装例

以下は「CSS Gradient」を使用して作成したグラデーションの実装例です。

HTMLは任意で用意します。

<div class="box" style="width: 500px; height: 250px;">

「CSS Gradient」でグラデーションのCSSコードを生成します。

.box {
    background: rgb(220,90,69);
    background: linear-gradient(360deg, rgba(220,90,69,1) 0%, rgba(232,199,46,1) 50%, rgba(61,133,130,1) 100%);
}

以下のように表示されます。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

三角形

CSS Triangle Generator

「CSS Triangle Generator」はCSSで三角形を作成するためのジェネレーターツールです。

実装例

以下は「CSS Triangle Generator」を使用して作成した三角形の実装例です。

HTMLは任意で用意します。

<div class="box"></div>

「CSS Triangle Generator」で三角形のCSSコードを生成します。

.triangle-top {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 100px 100px 100px;
    border-color: transparent transparent #dc5a45 transparent;
}

以下のように表示されます。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

吹き出し

CSS Arrow Please

「CSS Arrow Please」はCSSで吹き出しを作成するためのジェネレーターツールです。

実装例

以下は「CSS Arrow Please」を使用して作成した吹き出しの実装例です。

HTMLは任意で用意します。

<div class="arrow_box">【WEBツール】CSS記述をサポートする便利なジェネレーターツール</div>

「CSS Arrow Please」で吹き出しのCSSコードを生成します。

.arrow_box {
    position: relative;
    background: #88b7d5;
    border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #88b7d5;
    border-width: 30px;
    margin-left: -30px;
}
.arrow_box:before {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #c2e1f5;
    border-width: 36px;
    margin-left: -36px;
}

以下のように表示されます。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

クリップパス

Clippy

「Clippy」はCSSでクリップパスで様々な図形を作成するためのジェネレーターツールです。

実装例

以下は「Clippy」を使用して作成した図形の実装例です。

HTMLは任意で用意します。

<div class="box" style="width: 250px; height: 250px; background: #e8c72e;"></div>

「Clippy」で図形のCSSコードを生成します。

.box {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

以下のように表示されます。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

ストライプ

Pure CSS Stripes Generator

「Pure CSS Stripes Generator」はCSSストライプを作成するためのジェネレーターツールです。

実装例

以下は「Pure CSS Stripes Generator」を使用して作成したストライプの実装例です。

HTMLは任意で用意します。

<div class="box" style="width: 500px; height: 250px;"></div>

「Pure CSS Stripes Generator」でストライプのCSSコードを生成します。

.box {
    background-image: linear-gradient(45deg, #3d8582 25%, #ffffff 25%, #ffffff 50%, #3d8582 50%, #3d8582 75%, #ffffff 75%, #ffffff 100%);
background-size: 56.57px 56.57px;
}

以下のように表示されます。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

まとめ

今回の記事ではCSSの記述をサポートする様々なジェネレーターツールをご紹介しました。これ以外にも様々なジェネレーターツールが存在しています。
このような便利なツールを活用してCSSの記述の手間を削減していきましょう。