現場で使える♪便利なCSSジェネレーター

現場で使える♪便利なCSSジェネレーター

2022年7月22日

こんにちは。
日々コーディング作業をしている佐々木です♪

私はデザイナーさんからデザインデータをいただき、インターネット上でデザインが見られるようにコツコツとコードを書いていくのですが・・・

そんな時、とても役立つのがCSSジェネレーター♪

三角や吹き出しなどをCSSで記述する際、CSSジェネレーターを使うことで、コード記述時間が短縮できるので重宝しています。

今回は、私が現場で実際によく使うものと、まだ使ってないけれど今後使えそうなCSSジェネレーターをピックアップしました。

ご興味ある方は、ぜひチェックしてみてくださいね。

「コーディング」とは・・・
プログラミング言語を使用してソースコードを記述していく作業。
Webデザインをブラウザ上で見える形にするためにソースコードを記述し、使用言語は主に、HTML・CSS・JavaScript。

よく使うCSSジェネレーター

仕事中、よく使っているCSSジェネレーターを3つご紹介します♪

①三角形作成ツール

三角形作成ツール

ジェネレーターを使うと、三角の方向、横幅・高さ・カラーを入れるだけで、デザイン通りの三角形CSSを作成してくれます。

詳細はこちら

↑↑こんなふうに、テキスト横に三角形がつくデザインの時など、三角の部分を画像を使わずCSSでサクッと作ることができたら良いですよね。

CSS三角形作成ツール

CSS三角形作成ツール - CSSのみで三角形を描く
apps.eky.hk

②吹き出し作成

吹き出し作成

吹き出しの三角の部分をデザイン通り記述するのに、私は時間がかかってしまいます・・・


そんな時便利なのが、吹き出しデザインを作成してくれるCSSジェネレーター。

ボックスの大きさやカラー、角丸、三角の位置や大きさを入れると、作りたいデザインの吹き出しのCSSを作成してくれます。

【コピペでOK】吹き出しデザインジェネレーター

面倒な吹き出しCSSが1分で!?HTMLとCSSだけで作る吹き出し作成ジェネレー…
generator.web-alpha.info

③レスポンシブ対応のフォントサイズ

レスポンシブ対応のフォントサイズ

これは、1行の記述で、レスポンシブ対応してくれるフォントサイズが指定できます。

デザインMax幅とMin幅の画面サイズと、その時に表示したいフォントサイズを入れると、半端な画面幅の時も自動的にフォントサイズを計算して表示してくれます。

どの画面幅でも最適なフォントサイズになるので、とても便利だなと思います。

Min-Max-Value Interpolation

A tool that calculates the CSS clamp for…
min-max-calculator.9elements.com

使えそうなCSSジェネレーター

まだ仕事では使っていないのですが、これから出番があるかもしれないと思い、準備しているCSSジェネレータをご紹介します♪

①ボックスシャドウ作成

ボックスシャドウ作成

デザインデータからボックスシャドウの値を決めることがほとんどなので、こちらのジェネレーターの出番は今のところないのですが、コーディング中にシャドウをつける必要が出た時、パッとイメージしやすいので、使えると思い準備しています。

どのくらいシャドウをつけるか迷った時に、数値を入れながらイメージできるのがとても便利ですね。

②ストライプ模様作成

ストライプ模様作成

ストライプの背景デザインの時に、役立ちそうなこちらのCSSジェネレーター。

画像を使用せずCSSで表現できれば、サイト軽量化になりますし、色変更の際も簡単にできます。

CSS STRIPE GENERATOR

ストライプCSSジェネレーター
css-stripe-generator.firebaseapp.com

③画像切り抜き作成

画像切り抜き作成

画像を切り抜くことができるCSS。

HPに載せる画像の形を変えるようなデザイン変更がある時に、役立ちそうなこちらのジェネレーター。

画像データを修正することなくCSSだけで切り抜くことができます。

まとめ

いかがでしたでしょうか。

コーディングする時、ゼロから記述すると時間がかかる箇所もCSSジェネレーターを使うと簡単に作成できるので、とても助かります。

また、画像を使わずCSSで表現できればサイト軽量化にもなりますよね。

コーディングを効率良く進めるための参考になったら幸いです♪