WEBデザインの仕事をされている方にオススメの
HTML/CSS/javascriptを利用したコーディングで役に立つ
便利なWEBサービスを紹介いたします。
この記事の目次
CSS/CSS3関連
OneClickCSS
http://css.miugle.info/HTMLソースをもとに、id,class名CSS、子孫セレクタCSS、子セレクタCSS、LESS、SASS、SCSSを自動生成するオンラインサービスです。
文書構造だけで整形したHTMLソースを入力して、真ん中のボタンをクリックすると、右のフォームの中に自動でCSSのセレクタの指定が作製されるサービスです。
css3-icons
http://www.uiplayground.in/css3-icons/
表示されているアイコンをクリックすると、そのままそれを使用することができるそのためのコードを取得表示してくれます。欲しいアイコンを視覚的に探すことができ、それを簡単に利用することができます。
Ultimate CSS Gradient Generator
http://www.colorzilla.com/gradient-editor/
CSSでの綺麗なグラデーションを簡単に作製することが出来るジェネレーターです。
クロスブラウザでも表示されるようにベンダープレフィックスの指定まで行ってくれるので、
ちょっとしたグラデーションを取り入れる際はかなり重宝します。
clippy
http://bennettfeely.com/clippy/
クリップパスプロパティは、基本形状（円形、楕円形、多角形、または挿入図）に要素をクリッピングすることによってCSSの複雑な形状を作ることができ、またはSVGソースにも変換ができるWEBサービスです。
個人的に使用用途は多くないのですが、センスの良いデザインのサイトを作製する時に使えそうです。
longshadows
http://sandbox.juan-i.com/longshadows/
CSSだけで綺麗な影のエフェクトを作製することが出来るジェネレーターです。
手入力で同様のエフェクトを再現するとかなり緻密な作業が必要になる長い影を簡単に作製することができます。
CSS3 Button Generator
http://css3button.net/CSS3を使用したボタンを生成してくれるジェネレーターです。簡単にクオリティの高いボタンをテキストだけで再現することができるので、LPやECサイトなどのコーディング製作をされる方は重宝するのではないでしょうか。
Google Fonts
https://www.google.com/fonts700種類以上ものWEBフォントを公開しているサイトです。天下のgoogle様はやはり凄いです・・・。
利用方法もかなり簡単で、使用したいフォントを選択して発行されるcssファイルを読み込み指定するだけになっています。
CSS ARROW PLEASE!
http://cssarrowplease.com/cssで簡単に吹出しを作る事ができるジェネレーターです。
can i use
CSSがどのブラウザのどのバージョンまで適応されているのかを確認できるWEBサービスです。
ベンダープレフィックスを入れる必要があるかどうかの確認など、利用用途はかなり広いと思われます。
Online JavaScript/CSS Compressor
HTML/CSS/JavaSciptの圧縮を行ってくれるWEBサービスです。
あまり使用用途は多くないかもしれないですが、モバイルファーストが提唱されている昨今は、
サイトの表示速度に関わる所全て対応してくれ、というクライアントさんも少なからずいますので、
情報として覚えておいて損は無いと思います。
jsbeautifier
Online JavaScript/CSS Compressorとは真逆で、こちらは圧縮されたコードを整形してくれるWEBサービスです。
クライアントから参考サイトの（JavaScriptを利用した）この動きを取り入れたい！みたいな要望があった時に、
こういった整形ツールを利用したほうが、早く納品できる可能性があります。
まとめ
本当、作って頂いた秀才の皆様に感謝。
世の中、どんどん新しいWEBサービスが公開されてきていて、
その度にコーディングというハードルの敷居が低くなってきていて驚きます。。。
http://jsdo.it/で見たコードそのまま試せるし
そもそも勉強しなくても、bootstrapを利用すれば、
簡単にクオリティの高いLPが作れてしまうし、無料のフリー素材のレベルもバカ高いし、、、、
「こんなスキルじゃあ、仕事なくなるわな。」
って焦燥感ばかりがが大きくなりますねｗ
流行り廃りの早い世界だこと。
さて、頑張って仕事を作っていこうか！！