ユーザーが任意で選んだ2色のコントラストをチェックできるツール。左のパネルで描画色を、真ん中のパネルで背景色を選ぶ事で、右のパネルにその結果が、描画色はテキストとして、背景色は背景としてリアルタイムに反映されます。色はRGBのそれぞれの値を直接入力したり、スライダーを動かす事で作る事ができます。このチェックツールで便利なのが、右パネル内に見た目だけでなく様々なチェック結果が数値として出る点。輝度や色の差、コントラストレシオなどに加え、WCAG 2.0（Web Content Accessibility Guidelines 2.0）の基準を満たしているかどうかをYes or Noで判断してくれます。そうした基準に厳格なサイト作る際に役立ちそうです。
多機能なCSSジェネレーター。まずはフォーム、ブロック、ボタンの3種類の内からテンプレートを選びます。すると画面左に白いキャンバスが出てくるので、右側の各項目をエディットする事ができます。編集内容はキャンバスにリアルタイムに反映され、完成したら画面右上の「Get the Code」ボタンからCSSソースをダウンロードする事ができます。またGalleryには他の人が作った作例が色々掲載されているので、それをテンプレートにしてもイイかもしれません。慣れた人から見ると「んなもん自分で書いた方が早いよ」と思うかもしれませんが、コーディング初心者の人にとってはわりと使いやすいツールのような気がしないでもありません。
CSSのコードフォーマットに関する便利なオンラインツールをまとめた記事。CSSのプロパティソート、CSS圧縮、nth-childのシミュレーター、CSS整形ツールなどが紹介されています。圧縮ツールが色々ありますね。整形や圧縮ツールって、作る側の癖に合うか合わないかってのもあるので、使い勝手の良いツールが見つかるといいですね。CSS書くのめっちゃ汚い人とかたまにいるので、そういう人に「お前これ使えや」とか言ったりするとちょっとイヤミになるのでアレだしナニだったりもしますが。
フラットデザインが盛り上がり始めてた頃にあちこちで見かけた「フラットデザインではロングシャドウが流行る！」的なの、今思うと「あーーあったね」的なアレではありますが、実際どうなんでしょうね。あんまし見る機会ないんですが。このLong Shadows GeneratorはロングシャドウエフェクトをCSSで描画するためのジェネレーターです。影の長さや濃さをスライダーで調節して、「Show Code」ボタンを押すとCSSソースが出力されます。テキストを内包するボックス要素のClass名に「.shape」を入れると動作するようです。ソース見ると分かるんですが、text-shadowを何重にもかける事でシャドウ部分を描画しています。自分で書こうとするとメンドくさそうですねこれ。（そういう機会があるかどうかの話は別として）CSSでロングシャドウを描画したい時に使えそうです。
サイト名そのまんまの、様々な種類のCSSジェネレーターが揃ったサイト。イメージギャラリー、レイアウト関連、吹き出し、ボタン、イメージスライダー、CSSフィルターを使った画像エフェクト、テキストエフェクト、テーブル、ボックスシャドウ、Font Face、カラム生成、ボーダー、トランジション、トランスフォーム、グラデーション、角丸などなど、よく使われるCSSによる装飾に関するジェネレーターが一通り揃ってます。品揃えが素晴らしいですね。これだけあればCSSを深く知らなくてもたいていの装飾はできるんじゃないかとさえ錯覚します。
HTMLから、そのページ内で指定すべきIDやclass名の一式を抜き出してくれるオンラインツール。使い方はページ内左の入力欄にHTMLをペーストするだけ。もちろん直書きしても大丈夫です。すると右側のエリアに、そのHTML内で指定されているID名やclass名の一式を、プロパティ類が空の状態で抽出してくれます。抽出ルールもIDやclass、インラインCSSを含めるかどうか、インデントはスペースなのかタブなのか、細かい調整が可能です。サイト制作する際まずはHTMLだけ素組みして、さぁこれからCSS書くゾというタイミングで使いやすい気がします。
黄金比の計算機。ひとつの値を元に、黄金比にすると他方の値はいくつになるのかをサクっと算出できます。黄金比ってだいたい1:1.6くらいだから計算しようと思えばできるんだけど、こういう計算機があると色々捗りますな。長辺であるa、短辺であるb、そしてその和であるa+bのどの数値からでも算出できる点がナイスです。どれか1つ入れるだけで他全ての値を出してくれます。2カラムあるサイトの左右配分とか決める時に便利です。
RGBAでの色指定と、従来のHEX（16進法）による色指定との相互の変換ツール。上段のフォームがRGBAで、下段がHEX指定となっており、どちらかを変更すると他方にも反映されるというもの。RGBAの方がアルファチャンネルがあるので便利ですが、古いファッキンIEとかではこの指定法が使えないので、石器時代のブラウザをサポートする際の変換に使えます。まぁ個人的にはそんなレガシーなしょうもないゴミを使うようなユーザーなんて切り捨てればいいと思うのですが、仕事でサポートブラウザに入るというパターンもありますしねおすし。大人の事情によるアレがコレで色々ではありますな。
