「気味が悪い」とか「絵的に基地外」とか色々言われてるGoogleのDeep Dream。あの人工知能に絵を見せて、人工知能が解釈した結果を得る事ができるというジェネレーター。なかなか興味深いですねこれ。早速画像投稿してみましたが、なかなかに人気のようで「残り時間あと7時間」と言われました。oh… まぁ投稿したのはいつものように江頭の画像なんですけどね。間違っても自分や知り合いの写真とか投稿しないようにしたいと思います。夢に見そう。
CSSスプライトのコードと画像のジェネレーター。複数の画像ファイルをサイト内に放り込むだけで、それらを1つの画像ファイルに結合して、かつCSSスプライトのいわゆる座標コードをまとめて吐き出してくれます。1つの画像ファイルをマッピングしてコード生成するジェネレーターはいくつかあるけど、複数の画像を結合するタイプのものは珍しい気がします。個別に画像が保存されたサイトにおいて、ロード時間のスピードアップなどを目的にCSSスプライト化する際などに便利そうです。
CSSコードを最適化できるオンラインツールを集めた記事。最適化と言うても実際には色々ありまして、コードフォーマットを適用するもの、余計な空白やインデント、改行などを消してコードサイズを抑えるもの、重複指定などを1つにまとめて圧縮するものなど色々揃っております。また1度圧縮されたコードを、再度読みやすいコードフォーマットが適用された形に戻すものなんかもあります。汚いCSSコードを書いてしまった時の懺悔にも使えるかもしれません。
シンプルなシェアボタンのジェネレーター。Facebook, Twitter, Google+, Tumblr, Pinterest, Pocket, Reddit, LinkedIn, WordPress, PinboradといったメジャーどころのSNSに対応しています。それに加え「友達にメールする」的なボタンも生成できるようです。ベースデザインの指定、SNSの選択、ボタンを貼り付けるサイトの情報を一通り入力すると、ライブプレビューとソースコードが出力されるので、あとはそれを貼り付けるだけ。デザインがシンプルで、複数のSNSボタンをまとめて出力できるので使い勝手が良さそうです。
各種ソーシャルメディアへの投稿ボタンを、一括で生成してくれるジェネレーター。Facebook, Twitter, Google+, Tumblr, Pinterest, LinkedIn, Redditの7つのサービスに対応してます。基本的にShare用のボタンなので、ボタンを掲載するページのURLとその説明文を入れるだけでオッケー。ボタンのサイズも3つから選べます。統一されたデザインのボタンをまとめて作れるので便利です。
Webページにおいて何かをセンタリングさせたい時に役立つCSSジェネレーター。コード生成はウィザード形式で進めます。まずはセンタリングさせたい対象がテキストなのかDivなのか。ようするにインラインかブロックかって話ですね。次に親要素となるコンテナーの大きさについて。幅と高さが決まってるかどうかを聞かれます。決まってないようだったらUnknownで。最後に水平方向と垂直方向それぞれどこに位置させたいかを決めます。例えば水平方向にはセンターだけど垂直方向では上寄りなど。諸々決まったら「Generate Code」ボタンでコードが生成されます。特に垂直方向のセンタリングってWebだとめんどいっていうか、ちょっとコツがいるので、こういうジェネレーターは便利ですね。
レスポンシブグリッドのCSSジェネレーター。このサイトすごい便利です。グリッドの数、グリッド内のパディング、ガター（グリッド間のマージン）などの基本的な指定の他に、任意の位置でブレイクポイントを指定できます。数はいくつでもイイみたい。これらを一通り指定できたら、ページ左下にある「Download your Gridpak」をクリックする事で、ファイル一式をまとめてダウンロードできます。Zipファイル内にはCSSファイルの他にLESSとSCSSファイル、デザイン用のPNG、動作デモなどが同梱されており、デザイナー、コーダーの双方が幸せになれる内容となっております。サイトデザイン始める時にこれ使うのアリだなーと思いました。
Bootstrapを使ったグリッドレイアウトのためのソースコードを、サクっと作ってくれるHTMLコードジェネレーター。真ん中あたりのエリアをクリックすると、新規にROW（まぁ行みたいなもん）を作る事ができ、その中でドラッグする事でCOL（まぁ列というかカラムというか）を作る事ができます。ここで作ったROWやCOLにはそれぞれ名前を付ける事ができ、これはclass名となります。こうして一通り作ったレイアウトは、画面右側にあるエリアにリアルタイムでHTMLが生成されるので、あとはそれを保存するだけ。このサイト便利なのが、画面左側に出ているデバイスの一覧。これによりデバイスごとにレスポンシブレイアウトを組む事ができます。つまりxs、sm、md、lgそれぞれでのレイアウト変化を、ひとつの画面で行う事ができます。いやこれ便利ですわ。Bootstrap使ったレスポンシブレイアウト前提のサイトを作る時に、最初にココでレイアウト組んじゃうのアリですね。個人的には最近Pure.cssに若干浮気気味ではあるけど、今度使ってみようと思います。
