CSSだけでもアニメーションから3Dまで、たくさんのことが実装でき、リッチなサイトを制作できます。
ただ、プロパティやその値も多く、プログラミングに時間をかけたいところ、CSSに時間を奪われたりしませんか。
私は、一つづつ片づけないと次に進めない質で、CSSで納得がいかないと随分と時間を浪費してしまいます。
そんな時にCSSを簡単に作成してくれるジェネレーターが活躍してくれます。
今回は、CSS関連のジェネレーターを中心に役立つツールをご紹介いたします。
タイトルの水色の文字に直接リンクを貼っています。
CSS関連
webcode.tools
複数メニューがありますが、なかでも一般的に役立つのが、CSS Generator と HTML Generator だと思います。
CSS Generatorでは、アニメーション、グラデーション、フィルター、トランスフォームまで直感的な操作で作成できます。
HTML Generatorでは、例えばbuttonタグやinputタグにに必要な属性を追加した形で、タグを作成してくれますので、直書きするよりずいぶん楽になると思います。
CSS3 Generator
こちらも前述の項目に記載のCSS Generatorと同じく、直感的な操作で作成できます。
特筆すべきは、ANIMATION項目のBubbleです。Javascriptも併用しますが、泡のアニメーションが作成でき、とても参考になります。一度使ってみたいです。
因みに当サイトの背景の泡はこれとは別です。
Neumorphism.io
ニューモーフィズムは、近年のトレンドデザインの一つです。
大雑把に説明すると、シンプルなカラー配色でWEBサイト上のボタン等を背景の一部として柔らかく浮き上がらせたり、凹ませたりするデザインです。思わず触ってしまいたくな質感も不思議です。スマホであれば、なおさら立体感演出の効果を期待できるのでは。
サイト全体をこのデザインで統一したWEBアプリとかかっこいいと思います。
当サイトでも参考にさせていただきましたが、こちらのサイト株式会社シナジートレーディングでも「VIEW MORE」ボタンで使用されていて、より分かりやすいかと思います。
Ultimate CSS Gradient Generator
好みのグラデーションを自由に作成できます。
グラデーションについては、CSS Generatorに比べて、使用可能な色が多かったり、角度を変えたり、より複雑なグラデーションが作成できます
複数のグラデーションが完成できたら、@keyframesを使ったアニメーションでグラデーションの変化を楽しめそうです。
CSS clip-path maker
画像を好きな形に切り抜いて表示したいときに使われるのが、clip-pathです。
このジェネレーターでお好みの多角形などの図形を作成できます。
FANCY-BORDER-RADIUS
例えば、ボックス枠の右上だけを丸めたいときは、CSSで「border-top-right-radius: 10px」のように記述すればよいです。そして、それぞれの角について同じようにプロパティの値を変更すれば、ボックスの形は随分と変形可能です。
このツールでは、画面に表示された4つの小さな四角をマウスで移動するだけで、ボックスの角を自由に変形することが可能で、下部にはCSSが表示されます。
例えば以下のようなコードです。1行におさまるのがいいですね。
border-radius: 72% 28% 30% 70% / 28% 30% 70% 72% 上記で作成できたボックスは、下記の通りです。元のボックスは正方形です。
Animated Gradient Background Generator
背景グラデーションの変化を、直感的な操作で生成可能なツールです。
色の変更・追加、速度や角度の変更も可能です。
例えば、下記のようなCSSが生成されます。これは随分と楽です。
.gradient-background {
background: linear-gradient(300deg,blue,#ff05d7,#ffffff);
background-size: 180% 180%;
animation: gradient-animation 18s ease infinite;
}
@keyframes gradient-animation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
Glass Morphism
ボックスを透けガラスのようなデザイン、グラスモーフィズムへと生成してくれるツールです。
ボックスに枠を付ける場合、右と下の枠を濃くし、より立体感を演出してくれるところも気に入っています。
また、背景画像やテキストを入れた場合もイメージしやすいようなサイトになっています。
SVG Shape Dividers Creator
例えば、セクションを線で区切りたい時、直線以外にしたい場合があります。
このツールには、複雑な曲線や、波を打ったようなもの、多角形を並べたようなもの等多数用意されており、かつアニメーションにも対応しています。
下記はほんの一例です。
その他
アニメーションGIFを作ろう!
アニメションGIFとは、複数の静止画像を時間経過とともに切り替えて、簡易的なアニメーションを実現するファイルです。いわゆるパラパラ漫画のWEBバージョンといってもよいでしょうか。
下記の記事でもGIFアニメーションファイルを掲載しています。
気を付けることと言えば当然ではありますが、登録する画像の大きさは統一しておきます。
WordPress での使用方法は、普通のメディアファイルにアップロードし、画像ファイルと同じように使用可能です。
但し、横幅が表示サイズを超えるものだと、折角作成したアニメーションが発生しませんので、ファイルサイズにはご注意ください。
Online JavaScript/CSS/HTML Compressor
CSSやJavaScriptファイルを圧縮してくれます。
圧縮理由は、表示速度を少しでも上げること、サイト訪問者にデベロッパーツールでファイルを見づらくすることでしょう。
使い方は枠内にコードを貼り付けて、圧縮したらダウンロードするだけです。
CSSの何百～何千行のコピペは辛いですが、それをあっという間に圧縮してくれるのだからありがたいです。
WordPress のプラグインの「WP-SCSS」で最初から圧縮した形でCSSに変換すれば必要ないですが。
PALETTABLE
配色関連のジェネレーターも数数多ありますが、個人的備忘録として一つお気に入りをご紹介いたします。
ページを開くと、この色は「Dislike」「Like」と聞かれます。
「Dislike」を押し続けると次々と別の色を提案してくれますので、好みであれば「Like」を押すと次の配色を提案してくれます。自分では思いつかない配色を自分好みで決定できるところが気に入っています。
配色の色の数は最大5つです。色の多用はかえってサイトの視覚的な品質を下げかねないので、十分な数だと思います。当サイトの反省点でもあることは承知しております。
WEBP変換ツール
JPEGやPNG画像をWebp（ファイルサイズを軽量化してくれる画像フォーマット）に変換、またその逆の、WebpをPNGに変換してくれる画像です。
当初、Webpは、Chromeのみ対応でしたが、次々と対応するブラウザが増えています。
また、WordPressの最新バージョンでも取り扱うことが可能になっています。
加工処理した画像や既に圧縮した画像の場合は、Webpに変換すると、逆にサイズが大きくなってしまったり、ほとんどサイズが変わらなかったりすることもありますが、大抵は随分とサイズが軽くなります。
このツールで、変換したいファイルを選択すると、隣にWebpに変換された画像とファイルサイズが表示されます。
画像をクリックすると、自動でwebpファイルをダウンロードします。
但し、ダウンロードしたファイル名は元のファイル名を継承せず、「image.webp」となっているため、ダウンロードしたらすぐにファイル名を書き換えることをお奨めします。