> CSS > WEBデザイナー必見!CSSジェネレータ集
WEBデザイナー必見!CSSジェネレータ集

WEBデザイナー必見!CSSジェネレータ集

  • 投稿日:2015/10/25 |最終更新:2015/10/26
  • CSS

WEBサイトを作成する際に絶対に役立つスタイルシートのジェネレータ集です。
設定項目を調整するだけで自動的にソースを構成してくれます。

Layer Styles

Layer Styles
リンク先へはこちらをクリック

box-shadow、背景色(グラデーション)、border(線色)、border-radius(角丸)を設定できます。
Adobeに似たインターフェイスなので調整しやすいと思います。

CSS 3.0 MAKER

CSS3.0 MAKER
リンク先へはこちらをクリック

border、border-radius(角丸)、グラデーション、text-shadow、box-shadowはもちろん、transform(角度)、アニメーションなども調整可能です。
グラデーションは2色のみとなっています。

CSS Buttun Generator

CSS Buttun Generator
リンク先へはこちらをクリック

text-shadow、box-shadow、border、border-radius(角丸)、グラデーションを調整できます。
グラデーションは2色のみとなっています。

CSS3 GENERATOR

CSS3 GENERATOR
リンク先へはこちらをクリック

border-radius(角丸)、box-shadow、背景色(グラデーション)、透明度(opacity)を調整できます。
グラデーションは2色のみとなっています。

css generator

css generator
リンク先へはこちらをクリック

border-image、text-shadow、box-shadow、border-radius(角丸)を調整できます。
border-imageを調整できるのが特徴的です。

Ultimate CSS Gradient Generator

Ultimate CSS Gradient Generator
リンク先へはこちらをクリック

グラデーション用のCSSを生成するためのジェネレータです。
サンプルの画像もあるので好きなスタイルを選択し、色や透明度を調整できます。

CSS3 Text Shadow Generator

CSS3 Text Shadow Generator
リンク先へはこちらをクリック

text-shadowを生成するためのジェネレーターです。
影色、角度などを調整して生成するシンプルなジェネレーターです。

box-shadowジェネレーター

box-shadowジェネレーター
リンク先へはこちらをクリック

box-shadowを生成するジェネレーターです。
border(線色)、border-radius(角丸)も調整可能です。
日本語なので利用しやすいです。

この記事が気に入ったらシェアしてください

関連記事

コピペで使えるCSSだけでつくる矢印・三角形

コピペで使えるCSSだけでつくる矢印・三角形

CSSだけで 電話番号のリンクを PC・タブレット時には無効化し スマートフォン時にのみ発信させる方法

CSSだけで 電話番号のリンクを PC・タブレット時には無効化し スマートフォン時にのみ発信させる方法

同じSVGを画面内で複数回使用してCSSで色やサイズを変更する方法

同じSVGを画面内で複数回使用してCSSで色やサイズを変更する方法

orderでflexブロック内のアイテムの並び順を任意に変更する方法

orderでflexブロック内のアイテムの並び順を任意に変更する方法

flex-directionでflexブロック内のアイテムの並び方を変更する方法

flex-directionでflexブロック内のアイテムの並び方を変更する方法

Youtubeの埋め込み用タグをレスポンシブに対応させる方法

Youtubeの埋め込み用タグをレスポンシブに対応させる方法

Comment Form

コメント投稿はこちらをクリックしてください
  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)