Web制作に役立つ!面倒なCSSのコードを簡単に生成できる便利ツールをまとめました

CSS GridやFlexboxでレイアウトを確認しながらコードを生成、box-shadowによる繊細なシャドウを見ながらコードを生成、さまざまな区切り線、border-radiusclip-pathによるさまざまな形、UI用の美しいグラデーションやデュオトーン、グラスモーフィズム、ニューモーフィズム、CSSアニメーションなど、面倒なCSSのコードを簡単に生成できる便利ツールを紹介します。

面倒なCSSのコードを簡単に生成できる便利ツールのまとめ

まずは、先日紹介したレイアウトを確認しながらCSSを生成するツール。

サイトのキャプチャ

CSS Layout Generator

Webサイトでよく使用されるレイアウト、「ヘッダ・メイン・フッタ」「ヘッダ・サイドバー・メイン・フッタ」「カード型」「サイドバー」などのレイアウトを確認しながら、CSSのコードを生成できるオンラインツール。実装はCSS Gridで、今後Flexboxにも対応予定となっています。

サイトのキャプチャ

Layoutit Grid

これらもCSS Gridによるレイアウトのジェネレーター。Vue 3で実装されており、インラインのコード編集、履歴、編集可能領域、オフラインがサポートされており、オープンソースで利用できます。

サイトのキャプチャ

Build with Flexbox

CSS Flexboxの各プロパティを変更して、さまざまなレイアウトを簡単に作成できるオンラインツール。シンプルなので、使い勝手が非常によいです。

サイトのキャプチャ

Flexbox Items, Flexbox Menu Bar, Flexbox Gallery

CSS Flexboxで実装するさまざまなコンポーネントを簡単に作成できるオンラインツール。メニューバー、ギャラリーなど、よく使用されるコンポーネントが用意されています。

サイトのキャプチャ

Stitches

ランディングページやポートフォリオなど、レスポンシブ対応のペライチ縦長ページをドラッグ&ドロップで簡単に作成できてしまうオンラインツール。FlexboxベースのTailwind CSSが使用されており、ヘッダやフッタやコンテンツには一般的に使用されているコンポーネントが揃っています。

サイトのキャプチャ

CSS Separator Generator

section要素など、コンテンツの区切り線を生成します。斜め線・カーブ・ジグザグなどの具合は、簡単にカスタマイズもできます。

サイトのキャプチャ

Smooth Shadow

繊細で美しいシャドウを実装するには、box-shadowをレイヤー上に重ねます。しかし、このCSSを手書きするのはかなり面倒です。このツールではシャドウを見ながら、簡単に作成できます。まずは、一番上のレイヤーの枚数を減らして、1つだけのbox-shadowと比べてみてください。

サイトのキャプチャ

Box-shadows.css

手書きすると面倒なボックスシャドウのCSSを見ながら、生成できるオンラインツール。デフォルトのCSSファイルをそのまま使用してもよし、カスタマイズして自分用のCSSファイルを生成することもできます。

サイトのキャプチャ

Fancy Border Radius

border-radiusプロパティは角丸を定義しますが、カードなどの矩形の角を丸くするために使用するだけでなく、さまざまな形を作成することができます。しかし、さまざまな形を作成するための構文に慣れるには、手間と時間がかかります。このツールでは、さまざまな形を直観的に作成できます。

サイトのキャプチャ

CSS clip-path maker

clip-pathプロパティを使用すると、要素を基本的な形状(円、楕円、多角形、はめ込みなど)またはSVGソースにクリップすることにより、CSSで複雑な形状を作成できます。

サイトのキャプチャ

Generate a 3-Color-Gradient

指定した3つのカラーから美しいグラデーションを実装するCSSを生成します。グラデーションは8方向に対応しており、カラーはRGB値・HEX値・カラーパレットから選択できます。

参考: グラデーションを美しくするには配色が重要、真ん中辺りがグレーにくすんでしまうのを避ける方法

サイトのキャプチャ

uiGradients

UIに使用するいろいろなグラデーションがほしい時は、このuiGradientsが便利です。2色・3色から作成された美しいグラーデションを使用できます。

サイトのキャプチャ

CSS Duotone Generator

指定した画像またはランダムな画像のデュトーンを作成するツールです。デュトーンのさまざまなバージョンもあらかじめ用意されています。

サイトのキャプチャ

Avator generator

ユーザー名とカラーパレットからSVGベースの丸いアバターを生成するツールです。

サイトのキャプチャ

css.glass

カードやパネルにぴったりな透明度のある背景のぼかしを使った磨りガラスのエフェクト、グラスモーフィズムを実装するコードを生成できるジェネレーター。

サイトのキャプチャ

Glass Morphism

上記と同じく、グラスモーフィズムを実装するコードを生成できるジェネレーター。こちらはカード上の画像やテキストを表示・非表示にできます。また、背景画像を自分で用意して変更もできます。

サイトのキャプチャ

Glassmorphism CSS Generator

こちらは最近リリースされたジェネレーター。背景にメッシュグラデーションを選べるのが、今っぽいですね。

サイトのキャプチャ

Neumorphism.io

ニューモーフィズム、要素が背景と同じで、シャドウを与えて押し出されたような窪んだようなスタイルを実装するCSSを簡単に生成できるジェネレーター。カードやボタン、またフォームなどにも適したデザインで、ニューモーフィズムの凸凹のスタイルをCSSで簡単に実装できます。

サイトのキャプチャ

Neumorphic Generator

上記と同じく、ニューモーフィズムを実装するコードを生成できるジェネレーター。こちらは矩形だけでなく、円も用意されています。

サイトのキャプチャ

Generate Cubic Bezier Easing Curves

ギャラリー、サイドメニュー、スクロールエフェクト、ドロワー、モーダルなど、さまざまなUIコンポーネントでイージングカーブをテストできます。独自のベジェ曲線を生成することもできます。

サイトのキャプチャ

Animate -Keyframes.app

キーフレームを使ったCSSアニメーションを簡単に作成できるツール。ストップの追加、削除、変換、カラーなどのさまざまなプロパティの変更ができます。

サイトのキャプチャ

Palettolithic

Tailwind CSS、Bootstrapで使用できるカラーパレットのジェネレーター。もちろん、CSSとしても使用できます。

サイトのキャプチャ

CSS Ruler

CSSのさまざまな単位が実際にどのくらいのサイズになるか分かるツール。相対値はベースの値を変更して、ビューポートのサイズを変更してください。

サイトのキャプチャ

SassMeister

Sass, SCSSをCSSに変換するツール。いろいろなツールがリリースされていますが、これが一番使いやすいです。

sponsors

top of page

©2021 coliss