個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

CSS3を知らなくてもOK!便利すぎるCSS3関連ツール&ジェネレーター51

CSSを入力するときには、細かいプロパティを覚えていないと、作業がなかなかはかどりません。
特に、CSS3になってからは、アニメーション関連や装飾関連で入力項目が増えたので、入力するには手間がかかります。
そんなとき利用したいのが便利なツール&ジェネレーターです。
いちいち入力しなくてもコピペでパッと完了てしまうのですから、もう覚える必要はありません。
また、入力してからブラウザを確認しなくても、ツール&ジェネレーターの画面上で、どんな結果になるかが事前にわかるので、作業効率も大幅にアップします。
今回はそんなCSS関連のジェネレーター&ツールをご紹介します。
特に、ホームページ制作をはじめたばかりという人には、とっても便利だと思いますので、ぜひ参考にしてみてください。

装飾関連

装飾関連のプロパティー以外のツールも大変豊富なcoveloping

便利すぎるCSS関連ツール&ジェネレーター43
coveloping | Speed Up Your Development

13種類のプロパティをつくってくれるスグレモノCSS3 Generator

便利すぎるCSS関連ツール&ジェネレーター43
CSS3 Generator

4種類のプロパティを簡単に生成できるCSSmatic

便利すぎるCSS関連ツール&ジェネレーター43
グラデーション、角丸、ノイズ、ボックスシャドウを生成。
CSSmatic

ボタンの生成のほか、4種類のプロパティを作成してくれるCSS3 Gen

便利すぎるCSS関連ツール&ジェネレーター43
ボタン、角丸、ボックスシャドウ、テキストシャドウ、グラデーションを生成。
CSS3 Gen

4種類のプロパティを生成してくれるUseful CSS3 Generator

UsefulCSS3Generator
角丸、ボックスシャドウ、背景のグラーデーション、透過を生成。
Useful CSS3 Generator

ボタンを作成するCSS Button Generator

便利すぎるCSS関連ツール&ジェネレーター43
CSS Button Generator

テキストに3Dエフェクトをかける3D CSS text Generator

便利すぎるCSS関連ツール&ジェネレーター43
3D CSS text Generator

テキストにドロップシャドウをつけてくれるCSS Text Shadow

便利すぎるCSS関連ツール&ジェネレーター43
CSS Text Shadow

3D状のリボンをつくってくれるCSS3 3D Ribbon Generator

便利すぎるCSS関連ツール&ジェネレーター43
CSS3 3D Ribbon Generator

切込みを入れたリボンが作れてしまう「Ribbon builder」

便利すぎるCSS関連ツール&ジェネレーター43
リボンはリボンでも切り込みが入った少し複雑なリボンを作れてしまうジェネレーターです。
ステッチまで入れられるという芸の細かさも秀逸ですね。
Ribbon Builder

三角形を作れるジェネレーターCSS triangle generator

CSS-triangle-generator
CSSで三角形をつくるためのジェネレーターです。
CSS triangle generator

矢印や吹き出しをつくれるジェネレーター cssarrowplease

cssarrowplease
矢印や吹き出しをつくれるジェネレーターです。
なお、矢印部分にもhoverエフェクトをつけたいときには、:hover:before{値}といった書き方をします。ご注意くださいね。
cssarrowplease

矢印や吹き出しをつくれるジェネレーター CSS Speech Bubble Generator

Bubbler---CSS-Speech-Bubble-Generator---i-like-pixels--3
こちらも矢印や吹き出しをつくれるジェネレーターですが、
矢印の位置を細かく調整できるのが特長です。
CSS Speech Bubble Generator

ロングシャドウを簡単につくれるLong Shadow Generator

便利すぎるCSS関連ツール&ジェネレーター43
Long Shadow Generator

画像を使用したborderのプロパティを生成するBorder Image Generator

便利すぎるCSS関連ツール&ジェネレーター43
Border Image Generator

パスにそったテキストのプロパティを生成するCSS Text to Path Generator

便利すぎるCSS関連ツール&ジェネレーター43
CSS Text to Path Generator

文字スタイルの調整を簡単にできるCSS Type Set

便利すぎるCSS関連ツール&ジェネレーター43
CSS Type Set

ソースをコピーして使うボックス要素のジェネレーターCSS3 Rule Generator

便利すぎるCSS関連ツール&ジェネレーター43
CSS3 Rule Generator

アニメーション

CSSによる3DシェイプをつくれるTridiv

便利すぎるCSS関連ツール&ジェネレーター43
Tridiv

Magic CSS3 Animations

CSSアニメーションを使ったエフェクトライブラー9
素晴らしいアニメーションエフェクトを手軽に実装できてしいまうライブラリー! 「これはマジックだ!」と独り言ちること間違いなしの最強ともいえるライブラリーです。
Magic CSS3 Animations

Animate.css

CSSアニメーションを使ったエフェクトライブラー9
CSS3のアニメーション効果のすぐに使用できるライブラリ。その種類は60種類以上で、head内にanimate.min.cssを読み込み、効果に応じたクラス名をつけるだけで完了するお手軽さです。
Animate.css

Hover.css

CSSアニメーションを使ったエフェクトライブラー9
ホバーエフェクトに特化したアニメーションエフェクトを実装できるスタイルシートです。アニメーションの種類は40種類以上で、head内にhover-min.cssを読み込み、クラス名を加えるだけで簡単に実装できてしまいます。
Hover.css

CSSファイルを読み込んで、クラス名をつけるだけでアニメーションを実装できるCSS3 Animation Cheat Sheet

便利すぎるCSS関連ツール&ジェネレーター43
CSS3 Animation Cheat Sheet

キーフレームを使ったCSSアニメーションを作成できるCssAnimate

便利すぎるCSS関連ツール&ジェネレーター43
CssAnimate

キーフレームのCSSアニメーションをつくれるStylie

便利すぎるCSS関連ツール&ジェネレーター43
Stylie

イージングアニメーションを簡単につくれるCeaser

便利すぎるCSS関連ツール&ジェネレーター43
Ceaser

3Dトランスフォームを簡単につくれる3D Transforms

便利すぎるCSS関連ツール&ジェネレーター43
3D Transforms

三角(トライアングル)を生成する三角形ジェネレーターCSS triangle generator

便利すぎるCSS関連ツール&ジェネレーター43
CSS triangle generator

カラー

カラーコードを変換してくれるCSS Color Converter

便利すぎるCSS関連ツール&ジェネレーター43
CSS Color Converter

CSSで使われているカラーコードを表示するCSSPrism

便利すぎるCSS関連ツール&ジェネレーター43
CSSPrism

フラットデザインの配色がコピー可能なFlat UI Colors

便利すぎるCSS関連ツール&ジェネレーター43
Flat UI Colors

CSSグラデーションをとっても簡単に生成するツール「Gradientoo」

gradientoo02
説明が不要なほど、直感的に操作可能なツール。
Optionsのチェックボックスにチェックを入れます。
続いて、バーを選択してカラーを選択し、Linear=線状、Radial=円状を選び、Copy Codeボタンを押せば、コードをコピーすることができるという仕組みです。
カラーの微妙な明度や彩度についてももちろん変更可能です。
Gradientoo

グラデーションを簡単につくれるCSS3 Gradient Generator

便利すぎるCSS関連ツール&ジェネレーター43
CSS3 Gradient Generator

グラーデーションを手軽に生成するUltimate CSS Gradient Generator

便利すぎるCSS関連ツール&ジェネレーター43
Ultimate CSS Gradient

レイアウト関連

レスポンシブ対応のHTMLとCSSを簡単に作成できるResponsive Web CSS

便利すぎるCSS関連ツール&ジェネレーター43
Responsive Web CSS

グリッドベースのレスポンシブ対応のテンプレートを生成できるジェネレーター

便利すぎるCSS関連ツール&ジェネレーター43
Responsify.it – A responsive template generator

ブラウザ上でフォントの組み合わせを確認できるThe Web Font Combinator

便利すぎるCSS関連ツール&ジェネレーター43
The Web Font Combinator

今使っているデバイスのメディアクエリを出力してくれるCSS Media Query Generator

便利すぎるCSS関連ツール&ジェネレーター43
CSS Media Query Generator

IE6~8で一部のCSS3プロパティを可能にするCSS3 Pie

便利すぎるCSS関連ツール&ジェネレーター43
CSS3 Pie

さまざまなメニューが簡単につくれるCSS Menu Makere

便利すぎるCSS関連ツール&ジェネレーター43
CSS Menu Maker

圧縮・整形

YUI Compressorを使用してファイルを圧縮・軽量化してくれるJavaScript/CSS Compression Using YUI Compressor

便利すぎるCSS関連ツール&ジェネレーター43
JavaScript/CSS Compression Using YUI Compressor

CSSファイルを圧縮するCSS Compressor

便利すぎるCSS関連ツール&ジェネレーター43
CSS Compressor

最小化&最適化してくれるCSSO

便利すぎるCSS関連ツール&ジェネレーター43
CSSO

CSSを美しく整形してくれるCode Beautifier

便利すぎるCSS関連ツール&ジェネレーター43
Code Beautifier

その他

CSSの改善ポイントを指摘してくれるCSS LINT

便利すぎるCSS関連ツール&ジェネレーター43
CSS LINT

チェックボックスを簡単にデザインできるCSS Checkbox Styles

便利すぎるCSS関連ツール&ジェネレーター43
CSS Checkbox Styles

ボタンとテキストフィールドを生成するCSS Button & Text Field Generator

便利すぎるCSS関連ツール&ジェネレーター43
CSS Button & Text Field Generator

フリップスイッチFlipSwitchが簡単に作れてしまう

CSS3を知らなくてもOK!便利すぎるCSS3関連ツール&ジェネレーター45
フリップスイッチを簡単に生成するツールです。
カラー・サイズ以外にも、デバイスをiOS5、iOS4、Android、Windows8、カスタムと選択できます。
On/Off Flipswitch HTML5/CSS3 Generator

スプライト用の画像とCSSを作成するCSS Sprite Generator

便利すぎるCSS関連ツール&ジェネレーター43
CSS Sprite Generator

背景などに利用するパターン素材をつくれるPatternify

便利すぎるCSS関連ツール&ジェネレーター43
Patternify

CSSで作成されたパターンを紹介するCSS3 Patterns Gallery

便利すぎるCSS関連ツール&ジェネレーター43
CSS3 Patterns Gallery

自動でベンダープレフィックスを付けてくれるExpress Prefixr

CSS3をお手軽・簡単にするCSS3関連ツール&ジェネレーター43
ベンダープレフィックス系のツールでは、Prefixrというツールが誠に有名だったのですが、残念ながらサービスが終了してしまっていました。
無料のサービスってこれがこわい。
ほかに便利なものはないかと、探していたらこちらがありました。
Express Prefixr

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 2
  • 12

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

これは簡単!ポリゴン画像生成ジェネレーター「Trianglify Generator」

これは簡単!ポリゴン画像生成ジェネレーター「Trianglify Generator」

簡単・無料で利用できるこポリゴン画像生成ジェネレーターをご紹介。 背景画像などによく使われているポ

記事を読む

WEBサイトの必要な部分だけを印刷したいならコレが超便利!ブックマークレット「The Printliminator」

WEBサイトの必要な部分だけを印刷したいならコレが超便利!ブックマークレット「The Printliminator」

WEBサイトの必要な部分だけを印刷したい場合に大変便利なブックマークレットをご紹介。 このブックマ

記事を読む

WordPressで格安レンタルサーバーを選ぶなら?エックスサーバーかミニバードがおすすめ!

WordPressにベストな格安レンタルサーバーはこれです!

WordPressでレンタルサーバーを選ぶ場合のおすすめサーバーご紹介します。 新しくWordPr

記事を読む

jQueryベストプラグイン2014 使えるプラグイン50選をご紹介

jQueryベストプラグイン2014 使えるプラグイン50選をご紹介

2014年に登場したベストなjQueryプラグインを50個ご紹介します。 レイアウト系のプラグイン

記事を読む

激易!YouTubeなどの動画やGoogleMapsをコピペだけでレスポンシブ化「Embed Responsively」

激易!YouTubeなどの動画やGoogleMapsをコピペだけでレスポンシブ化「Embed Responsively」

YouTubeやViemoなどの動画、あるいはGoogleMapsをコピペだけでレスポンシブ化できて

記事を読む

これは魅力的!CSSだけで実装できる画像ホバーエフェクト20

これは魅力的!CSSだけで実装できる無料の画像ホバーエフェクト22

CSSだけで実装できる魅力的な画像用のホバーエフェクトをご紹介します。 種類は全部で22種類です。

記事を読む

40以上のホバーエフェクトをCSSだけで実装できる「Hover.Css」

40以上のホバーエフェクトをCSSだけで実装できる「Hover.Css」

最近はいろいろなサイトで魅力的なホバーエフェクトを目にする機会が増えました。 今回は、そんなホバー

記事を読む

クリックしたくなる!CSSだけで作られた無料のボンタコレクション「CSS Buttons」

クリックしたくなる!CSSだけで作られた無料のボンタコレクション「CSS Buttons」

CSSだけで作られた無料のボタンがコレクションされている便利なサイトをご紹介します。 Photos

記事を読む

WEBデザインのインスピレーションに!UIデザインのコードスニペットコレクション「CodeMyUI」

WEBデザインのインスピレーションになるUIデザインのコードスニペットがコレクションされた「Code

記事を読む

ショッピングカートだけの利用も無料!決済システムが充実したBASE(ベイス)が使える

ショッピングカートだけの利用も無料!決済システムが充実したBASE(ベイス)が使える

無料でネットショップが開設できるBASE(ベイス)に、ショッピングカートだけの利用も無料というサービ

記事を読む