パンセのタネWebデザインを追求したり、Web業界の最新トレンド、ネットPRなどのお役立ち情報を紹介するスタッフブログです。

Web制作者必見!おすすめCSS3ジェネレーター

2015年08月17日

ども!ものぐさコーダーのおーみです。

今やHTML5とCSS3で制作されたWebサイトは珍しくないですよね。とりわけCSS3は、PC・スマートフォンで同じ見た目の装飾が実装でき、見た目もイケてるという非常に便利でナイスなものです。今まで手間をかけて画像で切り出していた作業も、デザインによってはCSSだけで対応でき、工数も削減できるので利用しない手はありません!

Web制作会社の多くは、デザインとHTMLコーディングそれぞれ別々に担当者がいるかと思います。しかしながらCSS3を高度に活用しようと思うと、デザイナーとコーダーともにCSS3の知識が必要不可欠なのが困りもの・・・。

特にデザインを専門にされている方がCSS3を一から学ぶというのは中々キビシイものがあるはず。そこで、本記事ではCSS3で実装可能なデザイン部分について、下記条件を満たしたジェネレーターをまとめてみました。

  • スタイルをリアルタイムに調整しながら確認できる
  • スタイルが決まったらそのまま設定情報を伝えられる

cssarrowplease

image_01.jpg

ブロック要素に吹き出しを上下左右どの方向にも設置できます。左カラムの入力内容によってリアルタイムに反映され、CSSコードもリアルタイムで右カラムに出力されるので、コピペするだけでそのまま使えます。

Ultimate CSS Gradient Generator

image_02.jpg

背景色をグラデーション指定できるジェネレーターです。始点と終点の間には、途中色のインジケータをいくつでも設定でき、自由にグラデーションを作成することができます。右カラムの「Orientation」で水平方向、垂直方向、斜め方向、円形を選択できます。
こちらのサイトもCSSをリアルタイムにいつでもコピペすることができます。

CSS3 Text Shadow Generator

image_06.jpg

テキストに影を設置できます。影の色、垂直方向の距離、水平方向の距離、ぼかし具合、透明度を設定できます。こちらもCSSコードをそのままコピーすることができます。

Css3 drop shadow generator

image_03.jpg

ブロック要素そのものに影をつけることができます。
デフォルトでは垂直方向の距離、水平方向の距離、ぼかし具合、透明度を設定できます。ページ左上の「Shadow Style」で影のスタイルを変更することができます。コピペも可能。

box-shadowジェネレーター

image_04.jpg

この手のツールでは珍しい日本語対応のジェネレーターです。
ブロック要素の角丸(border-radius)に加え、影も付けられます。日本語サイトだけあってシンプルで非常にわかりやすいです。

CSS3 Generator

image_05.jpg

角丸、ボックスシャドウ、グラデーション、ブロック要素の透明度を調整できる全部入りのジェネレーター。設定部分と結果部分とのメリハリがあってとても利用しやすいのでおすすめです。

まとめ

いかがだったでしょうか。

上記のジェネレーターを活用することで、あんなにめんど・・・大変だった画像での処理が、
デザイナーさんの「ここをこの設定でお願いします」の一言で、完璧に素早く対応できる夢のような制作環境が生まれる・・・といいですね。

某CMの「おせちもいいけどカレーもね」ならぬ「画像もいいけどCSSもね」を今後ともどうぞよろしくお願いいたします。

 

仕事のご依頼・お問い合わせ

この記事を書いた人
おーみ

更新情報をお届けします

Facebookもよろしく!

Pick Up! おすすめ記事

制作実績一覧

カテゴリー

Twitter

この記事を読んだ人はこんな記事も読んでいます。

カテゴリ別

パンセのタネ トップへ戻る制作実績