オススメのCSSジェネレーター
- デザイン
Aran Kobayashi
こんにちは。
こばやしです。
9月になってしまいました。
だんだんと日も短くなってますね。
暑さも少しづつ落ち着いてくるはず…？
日々いろんなデザイン制作をさせていただいておりますが、
最近はコーディングをしていることが多いです。
コーディングをしていて
このデザインどうやって実装すればいいんだろう…？と
悩むことがよくあります。
そんな時はネット検索。
ありがたいことに、いろんなツールやジェネレーターがヒットして手助けをしてくれますね。
ここでは最近使って便利！と思った
CSSジェネレーターをいくつかご紹介。
■Blob Animation
流動シェイプを生成してくれるツール。
動く速度や色も細かく指定できます。
生成されたコードをコピペするだけであっという間に実装。
自力でこれを再現しようとしたら一体どれだけの時間がかかるんだろう。
かわいい系のWebサイトを作る時に使ってあげると動きが出ていい感じになりそうですね！
透明度やぼかしの調整もできるようなので、
使い方次第でいろんな表現ができるかと思います。
■clippy
(https://bennettfeely.com/clippy/)
clip-pathプロパティのジェネレーター。
clip-pathは、要素を切り抜いて表示できる CSS プロパティです。
要素の座標を指定することで切り抜きの領域を指定できるのですが、、
座標と言われても、イメージができないですよね。
ジェネレーターを使うことで、
どんな形で切り抜いて表示できるかを確認しながら調整ができます。
複雑な切り抜きも簡単！
変わった形の写真スライドの実装もこの通り。
四角いスライドショーに飽きた方は使ってみてください。
■Min-Max-Value Interpolation
(https://min-max-calculator.9elements.com/)
clamp()関数のジェネレーター。
clamp() は CSS の比較関数の一つ。
そもそもclamp()関数とは？って話をすると、
例えば画面幅に対してフォントのサイズを可変させたいとき、
「3vw」と指定しておけばある程度は良いんですが、
極端にサイズが大きくなったり小さくなったりしてメディアクエリで制御しないと…
ってこと、ありますよね。
そんな時のclamp()関数。
「font-size: clamp(2rem,3vw,4rem);」と記述してあげれば、
3vwでサイズが可変しつつも、2rem以下且つ4rem以上にはならない、
という指定ができます。
見た目も問題なし。
clamp()関数は「clamp(最小値, 推奨値, 最大値);」で指定するのですが、
「推奨値」の計算を自動でしてくれるのがこのジェネレーター。
上の例では何も考えずに推奨値を3vwとしましたが、
「画面幅600pxまではフォントサイズを可変させ、それより小さい画面幅の場合は2remで固定」
みたいな細かい設定をしようとしたとき、「推奨値」にはどんな値を入れればいいでしょうか？
一応、推奨値は
「最小のサイズ ÷ 最小のサイズで止める画面サイズ ✕ 100 = vwの値」
で求められるみたいなんですけど……
一回一回計算するもの面倒なので、ジェネレーターを活用したほうが早いですね。
必要な数値を入力するだけで自動的に推奨値を計算してくれます。
clamp()関数は使い方次第でメディアクエリの記述を省けるので
レスポンシブデザインと相性の良い便利なプロパティかと思います。
ここ最近のコーディングでは頻繁に使ってます。
コーディングはまだまだ知らないことが多い！
調べて知識を身に付けて、実践で活用していく。
この繰り返し。
もっと効率よくコーディングができるように今日も頑張ります。
ではまた。
