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

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

  • 0
  • 0
  • 1
  • 0
CSS3AnimationCheatSheet

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
  • 1
  • 0

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

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

スクロールした位置についてくるStickyプラグイン15

スクロールした位置についてくるStickyプラグイン15

スクロールした位置についてくる要素を実装するjQueryプラグイン「Stickyプラグイン」をまとめ

記事を読む

未知との遭遇!クリックするたび何かに役立つサイトを紹介する「Random Useful Websites」

未知との遭遇!クリックするたび何かに役立つサイトを紹介する「Random Useful Websites」

クリックするたび何かに役立つサイトを紹介してくれるサイトをご紹介。 このサイト、まったく自分の興味

記事を読む

シンプルなのに効果的!CSS3トランジションを使ったマウスオーバーアニメーション11

シンプルなのに効果的!CSS3トランジションを使ったマウスオーバーアニメーション11

CSS3を使えば、シンプルなコードなのに、ユーザーを「おっ!」と思わせる楽しい動きを簡単に実装できて

記事を読む

ファイルを安全にダウンロードするために!ダウロード前にマルウェアをスキャンしてくれるChrome機能拡張「Metascan Online」

ファイルを安全にダウンロード!ダウロード前にマルウェアをスキャンしてくれるChrome機能拡張「Metascan Online」

ファイルを安全にダウンロードするため、ダウロード前にウイルスやスパイウエア、トロイの木馬などのマルウ

記事を読む

chromeshortcuts

今さら聞けない!作業時間を短縮するChrome用ショートカットベスト・コレクション

ブラウザはChromeを使ってます。 そのChromeでサイトを制作したり、ブログを書いたりしてい

記事を読む

CSSアニメーションでここまでできる!無料のCSSアニメーションコードサンプル

CSSアニメーションでここまでできる!無料のCSSアニメーションコードサンプル23

CSSアニメーションだけで、こんなこともできてしまうというコードサンプルをご紹介します。 掲載され

記事を読む

twitterでのキーワードのひろがりを調べられるツール「twimp」

twitterでのキーワードのひろがりを調べられるツール「twimp」

twitterでのキーワードのひろがりを調べられるツール「twimp」をご紹介します。 作成者した

記事を読む

無料でオリジナルなクイズが作れてしまうツール「QuizGenerator」

無料でオリジナルなクイズが作成できるツール「QuizGenerator」

無料でオリジナルなクイズが、簡単に作成できるツールをご紹介します。 作れるクイズは選択式、穴埋め、

記事を読む

HTML/CSSをより見やすく!Google Chromeデベロッパーツールの機能拡張「SnappySnippet」が便利

HTML/CSSをより見やすく!Google Chromeデベロッパーツールの機能拡張「SnappySnippet」が便利

「このサイトのココどうやっているんだろう?」そう思ったとき、 ソースを見るか、Chromeのデベロ

記事を読む

気になるサイトのモニタリング&変更箇所を知らせてくれる無料ツール6

気になるサイトのモニタリング&変更箇所を知らせてくれる無料ツール6

気になるサイトをモニタリング&変更箇所を知らせてくれる無料ツールをまとめてご紹介します。 みなさん

記事を読む