個人的に役立ったデザイン素材や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アソシエイト・プログラムの参加者です。

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

CSS3の色名147色(RGB、HEX16進カラーコード併記)

CSS3の色名147色(RGB、HEX16進カラーコード併記)

CSS3になって、色名についても大幅に選択肢が増えたのをご存知でしょうか。 私は知りませんでした。

記事を読む

セキュリティー/プライバシーにすぐれたブラウザ6選

IE、Chrome、Safari、Firefoxといったメジャーブラウザ以外にもたくさんのブラウザが

記事を読む

CSSだけでブルブル震えるエフェクトを簡単実装!CSS Shakeを使ってみた

CSSだけでブルブル震えるエフェクトを簡単実装!CSS Shakeを使ってみた

CSSだけでブルブル震えるエフェクトを簡単実装!CSS shakeを使ってみた すでにお気づき

記事を読む

文字をカラフルに!CSSとjQueryでテキストを2〜3色で表現してしまう「HalfStyle」

CSS3やWEBフォントの登場でテキスト回りの装飾がお手軽になってきましたが、1文字をだけを2〜3色

記事を読む

HTMLメールの無料テンプレートをお探しなら「無料で利用できるオープンソースなHTMLメールテンプレートコレクションサイト」

HTMLメールの無料テンプレートをお探しなら「Open Source Email Templates」

HTMLメールは、メールでの占める割合を着実に増やしていますよね。 美しいデザインのHTMLメール

記事を読む

WEBデベロッパーのためのおすすめYouTubeチャンネル15選

WEBデベロッパーのためのおすすめYouTubeチャンネルをご紹介します。 対象はHTML、CSS

記事を読む

無料地図製作ツールの決定版!? 日本をはじめとする世界各国の地図をカスタマイズしてSVG,HTML,PNGで書き出せる「Pixel Map Generator」

無料地図製作ツールの決定版!? 日本をはじめとする世界各国の地図をカスタマイズしてSVG,HTML,PNGで書き出せる「Pixel Map Generator」

無料地図製作ツールの決定版!?ともいえる日本をはじめとする世界各国の地図をカスタマイズしてSVG,H

記事を読む

ブラウザがあればOK!コードを即実行・確認できるツール

ブラウザでプログラミング!ブラウザでコードが書けて実行・確認できるサービス14

ブラウザでコードが書けて実行・確認できるサービスをご紹介します。 サイトを実際に公開する前にテスト

記事を読む

無料のファイル転送ツールの決定版?容量無制限・件数無制限・ハイスピードの「Infinit」

ファイルを転送するとき、どんなツールを利用していますか? DropBoxやFireStorageな

記事を読む

Joomla!の無料テンプレート123 レスポンシブWEBデザイン対応もあり

Joomla!(ジュームラ)は高機能で使いやすいと評判のCMSです。 ドメイン、サーバー込みで無料

記事を読む