トップページ

HTML5やCSS3など、最近のフロントエンドエンジニア向けの情報から、これは便利そうだと思ったツールや情報をまとめてみます。

CSSを整形する

CSScomb

CSS Comb

CSScomb

CSScomb(GitHub)

CSScombを使えば、テキストエディタのショートカット一発で、CSSのプロパティ記述順序を並び替えてくれたり、インデントや半角スペースを整えてくれて便利です。

僕はSublimeText3のプラグイン版で使用しています。

Gulpといったタスクランナーで使用して、CSSファイルをコンパイルする際に自動で記述順序を並び替えるといった使い方もできますね。

CSSfmt

CSSfmt
こちらもCSSやSCSSを整形したり、プロパティ記述順序を整頓する際に使えます。

Atom、Sublime Text、Vim、Emacs用のプラグインが用意されています。

作者のブログによると、

CSScombなどの他のツールとCSSfmtの違いは以下の3点が挙げられるようです。

  • Custom propertiesやcolor()等の未来のCSSの記法に対応
  • SassのSCSS記法に対応
  • フォーマッティングのオプションが一切ない

オンラインで作れるCSSを使った装飾

CSSで吹き出しを作成

CSS Arrow Please

CSSだけで、吹き出しを作れちゃいます。

吹き出しのヒゲ「<」の向きや太さはオンラインで設定できるんですが、位置の調整はCSSファイルを直接いじらないと無理そうですね。

CSS Matic

CSS Matic

グラデーションやノイズ効果、ボックスシャドウなどを作成でき便利ですね。

Ultimate CSS Gradient Generator

Ultimate CSS Gradient Generator

グラデーションパターンをCSSで作成できるツールです。プリセットも豊富です。

【参考サイト】
http://qiita.com/rana_kualu/items/cad8dbbe5f5a1f1b3ba1