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

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

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

2014年に登場したCSS関係のツール、サービスをご紹介します。
CSS3の登場で、CSS関連のツール・サービスが続々と登場していますが、すべてをチェックするのは大変ですよね。
2015年以降も、WEB制作で役立つCSSツール・サービスばかりとなっていますので、ぜひともチェックしてくださいね。

Web Based CSS Tools & Apps

StyleStats

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
該当するURLのCSSをすばやく解析してくれるツール。
StyleStats

extractCSS

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
入力したHTMLのclassやidをもとにしてCSSを作成するツール。
extractCSS

CSS Shrink

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
CSSファイルを縮小・圧縮するツール。
CSS Shrink

CSSynth

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
順番にCSSアニメーションを実行させるためのツール。
CSSynth

EnjoyCSS

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
CSSの手入力が不要になる!複数の機能が1つになったCSSジェネレーター。
CSSの手入力が不要になる!複数の機能が1つになったCSSジェネレーター「ENJOY CSS」
EnjoyCSS

Flexy Boxes

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
CSSフレックスボックスを手軽に試せるジェネレーター。
Flexy Boxes

CSS Button Libraries

Beautons

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
CSSだけで作成されたボタンのツールキット。
さまざまなタイプのボタンが提示されています。
Beautons

btns.css

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
ボタンを作成するためのCSSライブラリー。
CSSファイルを読み込んで、規定のclass名を記入して利用します。
btns.css

Social Buttons v2

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
ソーシャルサービスの共有ボタンを作成するためのCSSライブラリー。
Social Buttons v2

CSS Animation Libraries

CSS Shake

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
要素をプルプルと動かすためのCSSライブラリー。
当サイトでも使用しています(ロゴ部分など)。
CSS Shake

Magic Animations

当サイトでも使用(ロゴ部分など)している、
目を引くCSSアニメーションエフェクトを手軽に実装できるCSSライブラリー。
Magic Animations

Hover.css

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
ホバーエフェクトに特化したアニメーションエフェクトを実装できるCSSライブラリー。
アニメーションの種類は40種類以上。
Hover.css

CSS Typography Toolkits

typebase.css

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
LESSやSASSでカスタマイズ可能な、タイポグラフィー用スタイルシートです。
typebase.css

Typesettings

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
モジュラースケール、Vertical Rhythm、レスポンシブ比率に基づくタイポグラフィを作成できるemベースのSass用ツールキット。
Typesettings

Sassline

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
簡単にベースライングリッドを設定できるSass mixin。
Sassline

CSS Loading Spinner Libraries

Tumblr-Style Loading Cogs

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
CSSアニメーションとSVGアイコンを利用したCSSローディングスピナー用ライブラリー。
Tumblr-Style Loading Cogs

Single Element CSS Spinners

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
CSSアニメーションローディングスピナー用ライブラリー。
Single Element CSS Spinners

SpinKit

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
簡単にカスタマイズできるCSSアニメーションローディングインジケーターコレクション。
SpinKit

Material Design Inspired Frameworks

Materialize

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
Googleマテリアル・デザインを基本に、スタイル、要素、コンポーネント、アニメーションを利用した新しいフレームワーク。
Materialize

Material UI

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
Googleマテリアル・デザインを実装するための膨大なコレクションからなるLess CSSフレームワーク。
Material UI

Material Framework

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
超軽量のマテリアル・デザイン用CSSフレームワーク。
Material Framework

CSS Frameworks, Boilerplates & UI Kits

Flexbox Grid

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
フレックスボックスをベースとにしたグリッドシステム用フレームワーク。
Flexbox Grid

Fluidity

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
超軽量のレスポンシブWEBデザイン用フレームワーク。
Fluidity

PowerToCSS

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
多機能な軽量CSSフレームワーク。
PowerToCSS

Kouto Swiss

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
Stylusのための完璧なCSSフレームワーク。
Kouto Swiss

ConciseCSS

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
軽量、カスタマイズ性、拡張性を備えた、SassベースのOOCSSフレームワーク。
ConciseCSS

Cute Grids

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
機能の豊富なレスポンシブフレームワーク。
Cute Grids

Ungrid

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
シンプルでレスポンシブなテーブルベースのCSSグリッドシステム。
Ungrid

csstyle

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
保守性のあるスタイルシートを構築するためのCSSフレームワーク。
csstyle

Zen Grids

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
Sassで作成されたレスポンシブグリッドシステム。
Zen Grids

Pure CSS Components

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
CSSだけつくられたUIコンポーネント。
Pure CSS Components

BASSCSS

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
OOCSSをベースとした軽量&レスポンシブCSSフレームワーク。
BASSCSS

Responsee II

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
軽量なレスポンシブCSSフレームワーク。
Responsee II

CSS Icon Generation Tools

Glyphter

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
SVGからアイコンフォントを作成するハンディーツール。
Glyphter

Perfect Icons<

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
WEBベースのソーシャルアイコンジェネレーター。
Perfect Icons

iconizr

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
SVG画像をCSSアイコンセットに変換するツール。
iconizr

CSS Color Palette Tools & Generators

Colors

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
カラーパレットをCSSクラス名で利用できるライブラリー。
SASS、LESS、Stylusにも対応。
Colors

BADA55.io

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
CSS HEXカラーを「もっともたちの悪い凄腕の」言葉で見つけられるツール。
BADA55.io

Pantone Sass

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
PANTONEカラーをSass変数でリスト表示したツール。
Pantone Sass

CSS Learning & Reference Resources

CSS Vocabulary

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
CSSの専門用語を理解するためのサービス。
CSS Vocabulary

CSS PREprocessors

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
最も人気のあるCSSプリプロセッサー(Less, Sass, Stylus)のためのリファレンス。
CSS PREprocessors

Magic of CSS

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
「CSSのマジシャン」になりたい人のための、無料のCSSコース。
Magic of CSS

Cerberus

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
レスポンシブHTMLメールのためのシンプルなパターン集。
Cerberus

Miscellaneous CSS Tools, Apps & Libraries

Andy.scss

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
SASS Mixin用オープンソースコレクション。
Andy.scss

Sache

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
Sass & Compassの機能拡張のディレクトリー。
Sache

CSS Plot

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
CSSだけで作成されたチャート用ライブラリー。
CSS Plot

FSVS

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
CSS3トランジションを利用したフルスクリーン対応の垂直スライダー。
FSVS

Imacss

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
データのURIに画像ファイルを変換するライブラリ。
Imacss

Pesticide

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
CSSバッキングツール。
Pesticide

Kite

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50
CSSライブラリーのための柔軟なレイアウトヘルパー。
Kite

ここまでは、50 CSS Tools & Resources from 2014を参考に作成しました。

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

  • 0
  • 0
  • 2
  • 0

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

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

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

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

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

記事を読む

人気のHTML/CSSコードサンプル25+おまけ2 from CodePen

CodePenはHTML,CSS,JSのコードサンプル配布サイトです。 紹介されているコードの種類

記事を読む

WEBデザインの勉強・参考に!プロがPhotoshopで作成したWEBサイト用無料PSDフリーテンプレート80

WEBデザインの勉強・参考に!プロがPhotoshopで作成したWEBサイト用無料PSDフリーテンプレート80

WEBデザインを勉強するうえで大切なのが、自分でいいなあと感じたデザインをそのままマネしてつくってみ

記事を読む

プログラミング・コーディングの作業効率UP!ミスを激減させる見やすいフリーフォント18

プログラミングやコーディングするとき、どんなフォントを使っていますか? 私の場合、Coda 2とい

記事を読む

オリジナルなアイコンフォントの作り方・使い方

いまさら聞けない無料でオリジナルなアイコンフォントを作る方法・利用する方法

アイコンフォントは便利だ、という声をあちこちで耳します。 遅ればせながら私も使ってみましたが、本当

記事を読む

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

CSSでグラーデーションを表現する場合、最初からコードを書くのは結構たいへんですよね。 そんなとき

記事を読む

SVGベースのオリジナルなシームレスパターンを作ってダウンロードできる「Plain Pattern」

SVGベースのオリジナルなシームレスパターンを作ってダウンロードできる「Plain Pattern」

今回ご紹介するのはSVGベースのシームレスパターンを簡単につくれて、PNG形式でダウンロードできてし

記事を読む

レスポンシブ対応などコンテンツスライダー/スライドショー用jQueryプラグイン50+

サイトのコンテンツをリッチに見せるだけでなく、省スペースで数多くのコンテンツを効率的・効果的に表示で

記事を読む

アイコンはCSSで!フォントもSVGも使用しないCSSだけのアイコンセット「Icono」

アイコンはCSSで!フォントもSVGも使用しないCSSだけのアイコンセット「Icono」

CSSだけでつくられたアイコンセットのご紹介です。 近年のアイコンというと、アイコンフォントかSV

記事を読む

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

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

記事を読む