miMemo(ミメモ)

Web制作

[M]CSS3ジェネレーター10選まとめ!コーディングをする際にジェネレーターで制作時間短縮!

css3make

こんにちは!みう(@miu0512)です。コーディングする際によく使っている、グラデーションやアニメーション、ボタンの作成などをサクッと指定してコードを生成する、おすすめのCSS3ジェネレータをまとめてみました。

CSSジェネレーターの使い方はどれも簡単!

数値などを入れてあげると、コードが生成されるので、コピー&ペーストするだけ。各種ブラウザ対応用のものもあるので、結構便利ですよ!

要素にあれこれ付け足すCSSジェネレーター

背景・境界線・影を付けたい時に

Css3make 10

まるでフォトショのレイヤースタイル!PhotoshopなどAdobeを使用している人は結構使いやすい仕様になっているので便利です。

角丸・背景・影・透過を付けたい時に

Css3make 09

影をさくっとつける時に

Css3make 11

角別に角丸を指定したい・さくっと角丸を指定したい時に

Css3make 02

画像じゃなくてCSSでグラデーション・ボタンを作れる!

グラデーションをCSSで簡単に作りたい時に

Css3make 08

私が一番使っているジェネレーター。サンプルのグラデーションも結構多いので、簡単に理想のグラデーションが生成できちゃいます。

サンプル豊富!CSSで綺麗なボタンを作りたい時に

Css3make 07
Css3make 06

とにかくボタンのサンプルが多い!サンプルをそのまま使うだけでもカッコイイボタンが作れてしまうので、とにかくおすすめ!

意外と細かいところで使えるお手軽ジェネレーター

CSSで吹き出しを作りたい時に

Css3make 05

CSSで吹き出しが簡単に作れます。

ちょっとオシャレな見出しを作りたい時に

Css3make 04

何を隠そう、私のブログでもこの見出しを使用しています。

とにかくCSSで見出しを作りたい時に

Css3make 03

今ちょっと流行りのロングシャドウを作りたい時に

Css3make 01

これは実はまだ使ったことがないのですが、おまけでピックアップ。

さいごに・・・

いかがでしたか?ちょこっとCSSを加えるだけで、おしゃれなデザインに仕上がります。あまり知識がなくても、実際にリアルタイムプレビューで確認しながら見たまま作れるので楽しいですよ!

最後までお付き合いいだだきありがとうございます!

これからも、みう(@miu0512)を応援していただけたら嬉しいです!

この記事が気に入ったら
いいね!しよう

About Me

みう

みう(@miu0512)

フリーランス
Webコーディネーター

フリーランスWeb屋。マンチカン5匹と一緒に仕事をしています。 【 猫 / マンチカン / Webデザイン / ブログ / ミメモ / フリーランス / カメラ / 旅行 / 車 / 水樹奈々 / ライブ / カラオケ / アニソン / マンガ / アニメ / iPhone / Mac / 白猫 / メロディア】

PAGETOP