CSS3の新プロパティジェネレータのまとめ15と、それぞれの特徴分析

ブクマ整理用まとめ第2弾です。
他ブログでも同じようなまとめがあるのですがそこはやんわりスルーで。一応、他よりも特徴説明に力入れたつもり。

CSS3で新しく追加されたプロパティを使えば、ビジュアル的にかなり優れたBOXやボタン等が作れるんですが、なかなか頭の中でビジュアルイメージ→コードに変換するのは至難の業。

そこで頼りたいのが各種ジェネレータ。しかしブクマしすぎてどれがどれやら状態なので、各ジェネレータの特徴と個人的好みをまとめます。

対応プロパティ表記について

  • gradient(グラデーション)
  • border-radius(角丸)
  • box-shadow(ボックスにドロップシャドウ)
  • text-shadow(文字にドロップシャドウ)
  • transform(変形-移動/回転/拡大・縮小/ゆがみ-)
  • transition(遷移・変化:webkitのみ)
  • animation(繰り返すアニメーション:webkitのみ)
  • alpha(透明度指定)
  • Multi Column(段組指定)

新プロパティが複数揃ってる系

GUI、細かい設定などで好みが分かれそうですね。
それぞれ得手・不得手がありますので場面に応じて使い分けるのがよいかと。

CSS 3.0 Maker

  • 対応プロパティ
    gradient/border-radius/box-shadow/text-shadow/transform/transition/animation/alpha
  • 所感
    ほとんどの新プロパティに対応した「全部入り」ジェネレータ。
    なんだかんだでかなり使いやすいかな、と思います。アニメーション系にも対応。

CSS3 Playground

  • 対応プロパティ
    gradient/border-radius/box-shadow/text-shadow/transition/animation/alpha/Multi Column
  • 所感
    上記同様「全部入り」なのですが、コレのいいところは、複数のプロパティを同時に指定できるところ。
    outlineやpadding,text-size,text-alignなどの指定も出来るので、より実用的な気がします。
    ただ、アニメーション系はちと物足りない。

westciv.com/tools

  • 対応プロパティ
    gradient/border-radius/box-shadow/text-shadow/transform/Multi Column
  • 所感
    テキストやBOX系は他と大差ないのですが、transformに強い感じがしました。
    transitionのプレビューはできるのですが、コードは吐き出してくれないみたいです…私だけ?
    あと、グラデーションをradial指定する場合は、このサイトのプレビューが見やすいかな。

CSS3, please!

  • 対応プロパティ
    gradient/border-radius/box-shadow/text-shadow/transform/transition/alpha
  • 所感
    これ正直最初使い方が???でした。。。カラー指定で、ピッカーがないのが不便ではあります。
    良いところは、OperaやIE用のコードも吐き出してくれるところかな。

CSS3 Generator -widgetpad.com-

  • 対応プロパティ
    gradient/border-radius/box-shadow/text-shadow/transform/alpha/box-reflect/text-stroke
  • 所感
    これは、完全WebKit専用ジェネレータ。
    最大の特徴は、先行実装しているbox-reflect(水面反射),text-stroke(袋文字)プロパティが使えること。

CSS3 Generator v1.7

  • 対応プロパティ
    border-radius/box-shadow/text-shadow/transform/transition/animation/alpha/resize/box-sizing
  • 所感
    一度に1つのプロパティしか選べないので、それぞれのプロパティの挙動をじっくり見たい時に使うのがおすすめ。
    他のツールであまり載ってない、resizeプロパティとbox-sizingの指定をした時の挙動の確認ができます。
    (※グラデーションは、下記で紹介する別のジェネレータへ飛びます。)

CSS3プロパティジェネレーター

  • 対応プロパティ
    border-radius/box-shadow/text-shadow/alpha
  • 所感
    最大の特徴はズバリ「国産」!Web制作を始めた方ならほとんどが一度はお世話になっているであろう、”CSS-EBLOG“の管理人えどさんが作られたツールです。
    アニメーション系はありませんが、シンプルで使いやすいですね。さすがです。

特定の用途に特化してる系

CSS Corners

  • 対応プロパティ
    gradient/border-radius
  • 所感
    BOXの角丸とグラデーションに特化したジェネレーター。ボタン作成用かな?

border-image-generator

  • 対応プロパティ
    border-image
  • 所感
    BOXのborderに画像を使う場合のCSSを吐き出すことに特化したジェネレーター。
    紹介した他のツールに載ってないから貴重かも。

Button Maker

  • 対応プロパティ
    gradient/border-radius/box-shadow/text-shadow
  • 所感
    ボタン作成に特化したジェネレーター。hoverとactive時のスタイルも一緒に吐き出してくれるのが便利かな。
    box-shadowとtext-shadowは付けてくれるけど、自分で指定は出来ないっぽい。

Grad? Gradient!-CSS3 GradientButton Generator-

  • 対応プロパティ
    gradient/border-radius/box-shadow/text-shadow
  • 所感
    これは国産の、ボタン作成用ジェネレーター。
    いくつかサンプルボタンが用意されているので、それを参考につくってみるとよさげ。

Ultimate CSS Gradient Generator

  • 対応プロパティ
    gradient
  • 所感
    グラデーション作成に特化したジェネレーター。
    Photoshopのスタイルみたいに、いくつかプリセットが用意されてるのもよい。書き方の参考になります。

CSS3 Gradient Generator

  • 対応プロパティ
    gradient
  • 所感
    これもグラデーション作成用ジェネレーター。
    上記のサイトは、グラデの方向が縦横しか選べませんが、こっちは指定が細かく出来ます。(多少面倒だけど)

CSS3 Rounded Corner Generator

  • 対応プロパティ
    border-radius
  • 所感
    角丸BOX作成に特化したジェネレーター。
    border指定も一緒に出来ます。わりとシンプルなツール。

border radius

  • 対応プロパティ
    border-radius
  • 所感
    角丸BOX作成に特化した、もっともっとシンプルなジェネレーター。
    無駄なものを極限までそぎ落とした感じがいいですね。

ちなみに

当たり前かもですが、IE系では操作自体NGなのも多いです。

CSS3をバリバリ取り入れた案件ってまだうちの会社ではないので、自己満足的にこっそり取り入れる程度なのですが、いつ実践でガリガリ書くことになっても困らないようにしておかないとね!!

#
はぁはぁ・・・やっと書けた。
まとめ記事ってちゃんと書くとこんな大変なんだ。。。自分のためじゃなかったら絶対書けんわ。ブクマ数稼ぐためとか絶対モチベーションもたん。。。
アルファブロガーさんたち、まじ尊敬です。。。

コメント / トラックバック 1 件

Tweets that mention 【本年最後のブログ更新】ありがちなネタですが、他サイトよりかなり詳しく解説したつもり。|CSS3の新プロパティジェネレータのまとめ15と、それぞれの特徴分析 -- Topsy.com2010/12/31 13:00

[…] This post was mentioned on Twitter by moka. moka said: RT @mypacecreator: 【本年最後のブログ更新】ありがちなネタですが、他サイトよりかなり詳しく解説したつもり。|CSS3の新プロパティジェネレータ […]

コメントをどうぞ

メールアドレス (必須・公開されません)
コメント本文

  • スパム・迷惑コメント投稿防止のため、メールアドレスの入力が必須ですが、公開はされません。何卒ご協力のほどお願いいたします。
  • 投稿いただいたコメントは管理者のチェック後掲載しておりますので、即時には反映されません。
  • 記載内容に関する批判や間違いの指摘などはそのまま掲載する方針ですが、投稿内容と無関係な誹謗中傷、一方的な罵詈雑言の場合は削除させていただく可能性があります。
  • 通常業務の合間にコメントチェックをしておりますので、すべてのコメントへのお返事が出来ない場合もございます。あらかじめご了承ください。
  • 管理人個人への連絡等は、コメント欄ではなくコンタクトフォームをご利用ください。

書籍を執筆しました

WordPress 標準デザイン講座【Version 4.x対応】


翔泳社さんより、2015/02/27発売しました。2年経ちますのでもう賞味期限切れだとは思いますが、一応実績として...

寄付歓迎(・ω<)☆

当ブログの記事があなたの役に立ったら、気が向いたらでいいのでドネーションいただけると更新の励みになります!
気が向いた方はこちらから

ブログ内検索