採用ミスマッチはなぜ起こる？企業が陥りやすい原因と改善ポイントを解説
- 働き方
CSSジェネレーターはコーディングの強い味方。アニメーションやレスポンシブのメニュー、統計情報を表示させたりソートを行ったり、円形のメニューを作成したりとWeb制作を行うときによく使うものや欲しいものが用意されたジェネレーターをご紹介します。
SVG画像作成
1. CIRCULUS.SVG
CIRCULUS.SVGは、SVGで円形のメニューを作るジェネレーターです。メニューの数、ボタンの位置、中心の軸の大きさなどを指定し、SVGでダウンロードできます。
2. SVGOMG
Webベースで使えるCSSジェネレーターアプリケーションのSVGOMG。SVGの最適化と制作が可能です。余白や宣言、コメント等を削除できます。
3. SVGeneration
画像を使わなくても背景用のパターンが作成できるのは便利ですよね。SVGenerationは、SVGの背景画像を作成できるCSSジェネレーターです。SVGでダウンロードできるほか、CSSコードとして書き出すことも可能です。
4. Glyphter
Glyphterは、SVGのアイコンフォントを作れるCSSジェネレーターです。ドラッグ&ドロップで操作できるので使いやすいです。
5. iconizr
iconizrは、SVGをCSSアイコンに変換すことができます。トップページにアイコンをドロップするだけ、という簡単操作です。
6. iconmelon
GitHub上で公開されているiconmelonは、SVGアイコンのライブラリーを作成することのできるCSSジェネレーターです。カテゴリーわけがしっかりされているので、アイコンを選びやすいのが特徴。
アイコン検索＆成生
7. GlyphSearch
GlyphSearchは、Font Awesome、Glyphicons、IcoMoon、IoniconsなどのCSSジェネレーターサイトからアイコンを検索するためのツールです。より多くの選択肢から選びたい時に便利ですね。
8. FontAwesome Finder
FontAwesome Finderは、FontAwesomeのアイコンを検索するためのツールです。こちらも一括で検索できるので、時短を図る上でも試してみたいですね。
9. Fontello
Fontelloは、Font Awesome、Entypo、Typiconsのようなサービスからアイコンフォントを制作します。
10. Fontsatic
Fontsaticは、6,000以上のアイコンからカスタムのアイコンフォントを作成できるCSSジェネレーターです。
カラーパレット＆グラデーション生成
11. Clrs
Clrsは、プロトタイプに使用しやすいCSSクラスがまとめられています。デフォルトカラーとして使えるカラーパレットです。
12. Pantone Sass
Pantone Sassは、PantoneのカラーがSASSの変数として定義されています。シンプルなUIで使いやすいです。
13. Flat UI Colors
Flat UI Colorsは、世界中のデザイナーが作ったカラーパレットが公開されています。上部のメニューバーからだいたいの色を選ぶと、紫なら紫系統、黄色なら黄色系統と、雰囲気の近い色が表示されます。
14. BADA55.io
BADA55.ioは、良くないと感じたCSSのカラーがまとめられています。サイトのデザイン自体の美しさも特徴的です。
タイポグラフィ設定
15. Font Library
Font Libraryは、Googleフォントをタグ付けして管理しています。オープンソースのプロジェクトとして運営しています。
16. TypeWonder
指定したWeb ページを、好みのWeb フォントで表示してくれるサービスである、TypeWonder。使ってみたいWebフォントをテストするときに役立つツールです。トップページの検索窓に、試したいサイトのURLを入力するだけです。
17. typesetwith.me
typesetwith.meは、Webブラウザ上で文字の読みやすさを確認できます。ただし英文のみ対応。
18. Type Scale
Type Scaleは、フォントのサイズを計算するのに役立つツールです。pxとemの比率を指定した上で、文字サイズの数値を表示できます。
アニメーション作成
19. CSSynth
CSSynthは、動きを指定してアニメーション作成します。同一画面上ですぐに確認できます。
20. Rocket
GiuHub上に公開されているRocketは、上へ向かって飛んでいくアニメーションが簡単に追加できます。リアルタイムで確認できないのが惜しい……！
21. SpinKit
SpinKitには、いくつかの使いやすいローディングアニメーションが集められています。左右にスライドするとアニメーションが表示され、「Sorce」ボタンを押すとコードが表示されます。シンプルかつ、フラットを意識したモダンなデザインなので、おすすめです。
その他のコーディング補助ツール
22. CSS Ruler
CSS Rulerは、CSS RulerはCSSで使うpx、em、remという単位のサイズを比較するためのツールです。
px; }px; }; }
上記の３つの数値を指定すると、数字やボックス型のオブジェクトのサイズがリアルタイムで変更されます。
23. Visualize the box-model
Visualize the box-modelを使えば、ボックスモデルを可視化できます。
24. EnjoyCSS
EnjoyCSSは、ボックス要素のCSSコードを生成します。テキスト、ボックスの色、影、角度など８つの項目から指定できます。直感的な操作で簡単なのが嬉しいですね。
25. Flexy Boxes
Flexy Boxesは、CSSのフレックスボックスの挙動を確認したり、コードを生成したりができます。
26. Create CSS3
Create CSS3は、とてもシンプルなCSS3のジェネレーターです。アコーディオン形式のメニューを開き、デザインしたい処理の数値を指定します。使いたいスタイルを自由に追加していけるので、複雑なCSSも生成できます。
27. CSS3 Generator
CSS3 Generatorは、あらかじめ決められた項目に入力するだけで必要なコードを生成します。13のメニューがありますが、Create CSS3より自由度は低めです。
28. Pie Menu Generator
Pie Menu Generatorは、簡単にパイメニューを作ることができます。形やメニューの数を決めるのも、パイメニューやスイッチで操作します。
29. CSSComb
CSSCombは、CSSのプロパティの整形をしてくれるプラグイン。特定の順番でCSSのプロパティやエレメントの書き順を揃えます。
30. One Click Encoding Decoding Tool
One Click Encoding Decoding Toolは、文字コードをASCIIに変換するツールです。エンコードとでコードがそれぞれできます。
One Click Encoding Decoding Tool
31. extractCSS
extractCSSは、HTMLからCSSのIDとCLASSを抽出してCSSへ記述します。
32. CSS Shrink
CSS Shrinkは、CSSを圧縮するためのツールです。サクサク動かして、UX改善に役立てましょう。
33. px-em
px-emは、px（ピクセル）からem（エム）に変換を行います。ピクセル単位の指定によく使われるpxは、環境によって変化しない絶対単位です。一方emは、文字の高さを基準にした単位で、1emは1文字分の長さを表します。
MacOSやWindowsなどの環境によって、単位の大きさが変わります。
34. NTH-TEST
NTH-TESTは、CSS3で追加されたセクレタのnth-childとnth-of-typeのテストツールです。
（執筆：Paul Andrew 翻訳：Asuka Nakajima 編集：Workship MAGAZINE編集部 提供元：speckyboy）
人気のフリーランス・副業求人
【リモートワークOK】大手からスタートアップまで、幅広い領域でユーザー体験を担うデザイナー/アートディレクター募集！
- #副業OK
- #新規事業
- #スタートアップ
- #急募
- #長期案件
- #スポット案件（1ヶ月）
- #フルリモートOK
職種：デザイナー
時給：2,500円 〜 4,000円
働き方：どちらでも可
エリア：東京都
【リモート可】【子育てママ歓迎】IoTサービスで世界中の家族を幸せに。アプリデザイナー(スマホ・タブレット) /Webデザイナー募集
- #スタートアップ
職種：デザイナー
時給：2,000円 〜
働き方：どちらでも可
エリア：東京都
【リモートOK】アート・エンタメ×ITでイノベーションを！新規事業のデザイナー募集！
- #スタートアップ
- #土日週末OK
- #急募
- #長期案件
- #正社員募集
- #フルリモートOK
職種：デザイナー
時給：5,000円 〜 8,000円
働き方：どちらでも可
エリア：東京都
Way back in October 2007, we initially launched Speckyboy as a small inspirational site for web designers.
この記事はspeckyboyからの転載です。配信元または著者とコンテンツ契約を結び配信しています。
30 Free Tools & Apps for Working With CSS
