Web制作に役立つ！面倒なCSSのコードを簡単に生成できる便利ツールをまとめました
Post on:2021年7月15日
sponsors
CSS GridやFlexboxでレイアウトを確認しながらコードを生成、box-shadowによる繊細なシャドウを見ながらコードを生成、さまざまな区切り線、border-radiusやclip-pathによるさまざまな形、UI用の美しいグラデーションやデュオトーン、グラスモーフィズム、ニューモーフィズム、CSSアニメーションなど、面倒なCSSのコードを簡単に生成できる便利ツールを紹介します。
まずは、先日紹介したレイアウトを確認しながらCSSを生成するツール。
Webサイトでよく使用されるレイアウト、「ヘッダ・メイン・フッタ」「ヘッダ・サイドバー・メイン・フッタ」「カード型」「サイドバー」などのレイアウトを確認しながら、CSSのコードを生成できるオンラインツール。実装はCSS Gridで、今後Flexboxにも対応予定となっています。
これらもCSS Gridによるレイアウトのジェネレーター。Vue 3で実装されており、インラインのコード編集、履歴、編集可能領域、オフラインがサポートされており、オープンソースで利用できます。
CSS Flexboxの各プロパティを変更して、さまざまなレイアウトを簡単に作成できるオンラインツール。シンプルなので、使い勝手が非常によいです。
Flexbox Items, Flexbox Menu Bar, Flexbox Gallery
CSS Flexboxで実装するさまざまなコンポーネントを簡単に作成できるオンラインツール。メニューバー、ギャラリーなど、よく使用されるコンポーネントが用意されています。
ランディングページやポートフォリオなど、レスポンシブ対応のペライチ縦長ページをドラッグ&ドロップで簡単に作成できてしまうオンラインツール。FlexboxベースのTailwind CSSが使用されており、ヘッダやフッタやコンテンツには一般的に使用されているコンポーネントが揃っています。
section要素など、コンテンツの区切り線を生成します。斜め線・カーブ・ジグザグなどの具合は、簡単にカスタマイズもできます。
繊細で美しいシャドウを実装するには、box-shadowをレイヤー上に重ねます。しかし、このCSSを手書きするのはかなり面倒です。このツールではシャドウを見ながら、簡単に作成できます。まずは、一番上のレイヤーの枚数を減らして、1つだけのbox-shadowと比べてみてください。
手書きすると面倒なボックスシャドウのCSSを見ながら、生成できるオンラインツール。デフォルトのCSSファイルをそのまま使用してもよし、カスタマイズして自分用のCSSファイルを生成することもできます。
border-radiusプロパティは角丸を定義しますが、カードなどの矩形の角を丸くするために使用するだけでなく、さまざまな形を作成することができます。しかし、さまざまな形を作成するための構文に慣れるには、手間と時間がかかります。このツールでは、さまざまな形を直観的に作成できます。
clip-pathプロパティを使用すると、要素を基本的な形状（円、楕円、多角形、はめ込みなど）またはSVGソースにクリップすることにより、CSSで複雑な形状を作成できます。
指定した3つのカラーから美しいグラデーションを実装するCSSを生成します。グラデーションは8方向に対応しており、カラーはRGB値・HEX値・カラーパレットから選択できます。
参考: グラデーションを美しくするには配色が重要、真ん中辺りがグレーにくすんでしまうのを避ける方法
UIに使用するいろいろなグラデーションがほしい時は、このuiGradientsが便利です。2色・3色から作成された美しいグラーデションを使用できます。
指定した画像またはランダムな画像のデュトーンを作成するツールです。デュトーンのさまざまなバージョンもあらかじめ用意されています。
ユーザー名とカラーパレットからSVGベースの丸いアバターを生成するツールです。
カードやパネルにぴったりな透明度のある背景のぼかしを使った磨りガラスのエフェクト、グラスモーフィズムを実装するコードを生成できるジェネレーター。
上記と同じく、グラスモーフィズムを実装するコードを生成できるジェネレーター。こちらはカード上の画像やテキストを表示・非表示にできます。また、背景画像を自分で用意して変更もできます。
こちらは最近リリースされたジェネレーター。背景にメッシュグラデーションを選べるのが、今っぽいですね。
ニューモーフィズム、要素が背景と同じで、シャドウを与えて押し出されたような窪んだようなスタイルを実装するCSSを簡単に生成できるジェネレーター。カードやボタン、またフォームなどにも適したデザインで、ニューモーフィズムの凸凹のスタイルをCSSで簡単に実装できます。
上記と同じく、ニューモーフィズムを実装するコードを生成できるジェネレーター。こちらは矩形だけでなく、円も用意されています。
Generate Cubic Bezier Easing Curves
ギャラリー、サイドメニュー、スクロールエフェクト、ドロワー、モーダルなど、さまざまなUIコンポーネントでイージングカーブをテストできます。独自のベジェ曲線を生成することもできます。
キーフレームを使ったCSSアニメーションを簡単に作成できるツール。ストップの追加、削除、変換、カラーなどのさまざまなプロパティの変更ができます。
Tailwind CSS、Bootstrapで使用できるカラーパレットのジェネレーター。もちろん、CSSとしても使用できます。
CSSのさまざまな単位が実際にどのくらいのサイズになるか分かるツール。相対値はベースの値を変更して、ビューポートのサイズを変更してください。
Sass, SCSSをCSSに変換するツール。いろいろなツールがリリースされていますが、これが一番使いやすいです。
sponsors
