個人的に役立ったデザイン素材や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
  • 11

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

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

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

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

記事を読む

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50

2014年登場のCSSツール・サービスはこれ!2014ベストCSSツール・サービス50

2014年に登場したCSS関係のツール、サービスをご紹介します。 CSS3の登場で、CSS関連のツ

記事を読む

Sketch用の無料フリー素材1500+ 2015年04月

Sketch用の無料フリー素材1500+ 2015年04月

Sketch用の無料フリー素材を集めてみました。 Mac専用ということもあり、日本ではPhotos

記事を読む

無料で商用利用可のレスポンシブ/HTML5対応のテンプレートをまとめてくれている「HTML5 UP」

無料テンプレートを探すとき、どういう基準で探していますか? レスポンシブ対応? HTML5対応?

記事を読む

プログラミング初心者がプログラミングを学ぶのにベストな海外チュートリアルサイト11

プログラミング初心者がプログラミングを学ぶのにベストな海外チュートリアルサイト11

日本でプログラミングを学ぶなら、ドットインストールが有名ですよね。 海外でもプログラミングを学ぶう

記事を読む

ブラウザの閲覧履歴をファビコンで一覧表示するChrome機能拡張

もはやアート?ブラウザの閲覧履歴をファビコンで一覧表示する「Iconic History」

ブラウザの閲覧履歴をファビコンで一覧表示するChromeの機能拡張「Iconic History」を

記事を読む

美しいエフェクトが施されたCSSで作られたボタン12

css3で作られた美しいデザインのボタンがコレクションされていましたのでご紹介します。 優雅で目を

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

iPhoneもMacも簡単OK!CSSだけであなただけのAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device Generator」

iPhoneもMacも簡単OK!CSSだけであなただけのAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device Generator」

CSSだけでAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device

記事を読む