Advertisement

スタイルシート制作をグッと楽にする!知っておきたい便利なWebツール25選まとめ

 

海外サイト Envato Blog で公開された「25 Free Web-Based Apps & Tools For Working With CSS」の著者 Paul Andrew より許可をもらい、翻訳転載しています。

 

 

CSS スタイルシートを作成していると、時間ばかりかかる退屈な作業をこなさなければいけない時があります。

 

たとえば、CSSアニメーションや FlexBox レイアウトを作成、調整したり、モダンブラウザ対応の書き方を思い出したり、レスポンシブ用にempxへの変換や CSS ファイルの圧縮やクリーンアップ、画像をデータURIへ変換など、どれもクリエイティブとは程遠いものばかり。

 

 

今回は、作業時間を大幅に短縮し、より快適なスタイルシートの作成ができる便利なツール25個をまとめてご紹介します。

 

 

紹介するツールを活用することで、これまで時間がかかっていた頭の痛くなる作業も、ボタン数クリックで完了させることができるでしょう。いま必要でなくても、いつかどこかで役に立つ、そんなかゆい所に手の届くツールを中心に揃えています。

 

 

 

詳細は以下から。

 

 

コンテンツ目次

 

1. Visual Guide to CSS3 Flexbox Properties

Flexbox プロパティの仕組みについて説明したビジュアルガイドで、Flexbox を利用することでどのようにレイアウトが変化するのか、ボタン操作のみで直感的に学ぶことができます。DEMO ボタンよりどうぞ。

 

web-design-tool-17

https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

 

 

各プロパティごとに分けられているので分かりやすく、これまでは面倒だった要素の天地中央揃えも一発で行うことができます。

 

目次へ戻る

 

 

2. extractCSS

HTMLの中で利用されている ID名とクラス名、インラインスタイルだけを抜き取るツール。HTMLテンプレートを貼り付ければ、自動的にCSSスタイルシートで出力されます。

 

css_tools_01

http://extractcss.com/

目次へ戻る

 

 

3. CSS Beautifier

CSS スタイルシートを読みやすく、統一感があるように自動で整形してくれるツール。すべてのコードを書き終えたときに活用するとよいでしょう。

 

css_tools_02

http://html.fwpolice.com/css/

目次へ戻る

 

 

4. CSScomb

あらかじめ設定をしておくことで、CSSスタイルシートのプロパティを順番どおりに並び直してくれる整形ツール。

 

css_tools_03

http://csscomb.com/online/

目次へ戻る

 

 

5. ProCSSor

こちらのツールも上記で紹介した CSScomb や CSS Beautifier と同じ整形ツールですが、CSSの出力をより自由に調整、設定することができます。

 

css_tools_04

http://tools.maxcdn.com/process

目次へ戻る

 

 

6. CSS Compressor

CSSソースコードを入力することで、スタイルシートを最小化し、圧縮してくれるお役立ちウェブアプリ。

 

css_tools_05

http://csscompressor.com/

目次へ戻る

 

 

7. StyleStats

あらゆるスタイルシートから役立つCSSスタイルを集め、コレクションできるツール。URLを入力し、「Parse」ボタンを押せばあとは自動で処理が完了します。

 

css_tools_06

http://www.stylestats.org/

目次へ戻る

 

 

8. CSS Trashman

サイトのDOMを検証し、エンジニアが読みやすい、新しいスタイルシートを生成します。生成されたCSSスタイルシート(または Sass ファイル)は、検証したサイト用に独自カスタマイズされており、すぐにダウンロードすることが可能です。

 

css_tools_07

http://www.csstrashman.com/

目次へ戻る

 

 

9. Live CSS Editor

Chrome と Safari 用拡張機能で、開いているページに自由にCSSコードを追記することができ、記述の結果もリアルタイムで確認することができます。

 

css_tools_08

http://www.livecsseditor.com/

目次へ戻る

 

 

10. Purify CSS

ウェブサイトやアプリで使われている CSS セレクタのみを見つけ、使われていない不要なCSSスタイルのみを削除した新しいCSSファイルを作成します。

 

web-design-tool-03

https://github.com/purifycss/purifycss

目次へ戻る

 

 

11. CSS Gradient Animator

お好みの色を選択し、グラデーションの向きと持続時間を決めるだけで、モダンブラウザ対応したアニメーション付きグラデーションを作成できる便利ツール。

 

web-design-tool-13

https://www.gradient-animator.com/

目次へ戻る

 

 

12. px-em

レスポンシブデザインでよく利用される、文字サイズ設定のempxに変換してくれるサービス。正確なサイズが分かりにくい、というemの欠点を見事にカバーしてくれます。

 

css_tools_09

http://px-em.com/

目次へ戻る

 

 

13. RWRWDC

レスポンシブデザインにおけるpxサイズを%に変換するシンプルなサービス。「Really Quick Responsive Web Design Calculator」の頭文字をとったサービス名もユニーク。

 

css_tools_10

http://rqrwd.com/

目次へ戻る

 

 

14. Fibonacci

表示されたカンバスをクリックするだけで、自由自在でフレキシブルなグリッドレイアウトを完成させます。Flexboxの幅広い表現力は、今後ますます重要になりそうなツールのひとつ。

 

css_tools_11

http://maxsteenbergen.com/fibonacci/

 

 

作成したグリッドは、HTML/CSSファイルとしてそのままダウンロードできるので、必要に応じて制作に活かすこともできます。

 

目次へ戻る

 

 

15. Flat UI Color Picker

フラットスタイルで利用されている配色をまとめており、クリックすることでHEX値やRGBなどお好みの形式でコピーすることも可能。配色に関しては、さまざまなカラーツールをまとめていますので、そちらも参考にどうぞ。

 

flat-ui-colors

https://flatuicolors.com/

目次へ戻る

 

 

16. PatternBolt

SVG でデザインされた背景パターンをコレクションしています。パターンサイズを自由に変更できるのも、SVGファイルの強みと言えるでしょう。設定したパターンは、そのままCSS/SASSファイルとしてダウンロード可能です。

 

css_tools_13

http://buseca.github.io/patternbolt/

目次へ戻る

 

 

17. CSS Animation Generator

手軽にCSSアニメーションを実装できるツール。アニメーションの種類を選択し、Ease
Linearなどの動きと時速時間を設定すれば、CSSソースコードをそのままダウンロードできます。「Go To Tool」よりどうぞ。

 

css_tools_14

https://coveloping.com/tools/css-animation-generator

目次へ戻る

 

 

18. CSS Shorthand Generator

いくつかの CSS プロパティをまとめて一つに短縮指定できる、ショートハンド。CSS コードを入力すれば、自動で実現してくれます。

 

css_tools_15

http://shrthnd.volume7.io/

目次へ戻る

 

 

19. Iconizr

SVGファイルをアップロードすると、CSSアイコンファイルに変換してくれるツール。作成されたアイコンはSVGのほか、PNG や CSS スプライトとしてダウンロードすることも可能で、管理しやすい Sass ファイルも一緒に出力されます。

 

css_tools_16

http://iconizr.com/

目次へ戻る

 

 

20. CSSynth

決めた順番どおりに CSS アニメーションを走らせることができるツール。ローディングアニメーションやイメージスライダーの作成などにも利用できます。

 

css_tools_17

http://bennettfeely.com/cssynth/

 

 

CSSだけでスタイリングされていると思えないほど滑らかなアニメーションを、ボタン操作ひとつで表現することができます。

 

目次へ戻る

 

 

21. Create CSS3

各ブラウザへの対応が必要な CSS プロパティのみを集め、インターフェース上で編集できるのはもちろん、作成したコードはそのまま CSS / SASS Compass ファイルとしてダウンロードできます。

 

css_tools_18

http://www.createcss3.com/

目次へ戻る

 

 

22. Flexplorer

マウスクリックで進めるだけで、思い描いた自由なグリッドレイアウトを直感的に作成できる、flexboxを利用したツール。

 

css_tools_19

http://bennettfeely.com/flexplorer/

目次へ戻る

 

 

23. Duri.me – Data URI Converter

イメージ写真をアップロードするだけで、HTML/CSSファイルに直接記述できる文字列データURIにエンコードしてくれます。ファイルサイズを減らしたいときにも効果的。

 

css_tools_20

http://duri.me/

目次へ戻る

 

 

24. CSS Shapes Editor

polygon()circle()ellipse()などの CSS シェイプを操作できるようにするChrome拡張機能プラグイン。

css-shapes-chrome-extention

CSS Shapes Editor

目次へ戻る

 

 

25. Gridpak Responsive Grid Generator

レスポンシブデザインに対応するグリッドシステムを、手軽に作成できるジェネレーターキット。カラムやパディング幅なども思い通りで、メディアクエリ用の breakpoint も個別で設定できます。

 

http://gridpak.com/

目次へ戻る

 

 

26. CSS Diner

CSSセレクタを覚えるのに役立つミニゲーム。レベルごとに正解であろうCSSを入力し、コンプリートを目指しましょう。

 

css_tools_23

http://flukeout.github.io/

目次へ戻る

 

 

この他にも役立つCSS関連ツール

  • CSS Vocabulary – CSSで使用される一般用語をまとめ、実際のコードと比較しながら確認できるライブラリ。英語の記事を読むときにも役立ちますよ。
  • Layoutit – インターフェース画面からドラッグ&ドロップするだけで、Bootstrap 対応HTMLテンプレートを作成できるビルダーツール。
  • NTH-TEST – スタイリングで間違いやすいnth-childnth-of-typeの表示を確認、検証できるツール。
  • Picssel-Art – ピクセルドット画を CSS でデザインすることができ、作成したCSSソースコードをそのままダウンロードできます。このツールを使えば、こんなこともできますね。
  • 随時更新予定、便利なツール募集中です。

目次へ戻る

 

 

 

プロが実践するモダン CSS の書き方入門テクニック20選まとめ

CSS を書きはじめたひとから、普段から親しんでいるひとまでを対象に、参考にしたいスタイルシート書き方のコツをまとめています。

20-protips-for-writing-modern-css

 

 

参照元リンク : 25 Free Web-Based Apps & Tools for Working with CSS – Envato Blog