ホーム お問合せはこちらから ページのトップへ戻る

新潟のホームページ制作会社・ワードプレスでウェブサイトを製作するドコドア
お問合せはこちらから お電話でのお問い合わせは0120-66-0209まで

SEOブログ

スタッフブログ

62 CSS3ジェネレータまとめ

2014.8.28

html62

CSS3ジェネレータについて

CSS3ジェネレータを使用する事で、様々なコードを一瞬で生成してコピペで使用する事ができます。各ブラウザに対応したコードも一緒に生成されるので、うまく使えば作業の時間短縮にもなります。

ここでは、おすすめのジェネレータをいくつか紹介していきたいと思います。

01. CSS3 Generator

CSS3 Generator

CSS3 Generatorは、ボックスシャドウや角丸など、色々なコードを生成することができます。英語サイトですが、数値を入力するだけで画面内でスタイルが確認できるので、直感的に操作ができます。

02. CSS Gradient Generator

CSS Gradient Generator

CSS Gradient Generatorは、グラデーションのコードを生成することができます。カラーピッカーを使った簡単な操作で使用出来るので、おすすめです。

03. Button Maker

Button Maker

Button Makerは、画像を使用せずに、CSSのみでPhotoshopで作ったようなボタンを生成することができます。右側のバーでスタイルを調整して、左側のボタンをクリックするとコードが表示されます。

04. css3.0maker

css3.0maker

css3.0makerは、アニメーションなどの様々なプロパティを生成する事ができます。やれる事の幅が広く、どのブラウザに対応しているかも分かりやすいです。

05. Transforms

Transforms

Transformsは、2D、3D変形といった複雑なCSSを生成してくれます。あまり使う頻度は高くないと思いますが、勉強などに使えそうです。

06. cssarrowplease

cssarrowplease

Transformsは、吹き出しを作る事ができるジェネレータです。これも使う頻度は少ないと思いますが、確実に時間短縮できると思います。

07. Grad3

Grad3

Grad3は、ボタン生成に特化した国産のサイトです。アイコンや背景を入れたりなど、出来る事の幅がかなり広いジェネレータです。

08. 3D Ribbon Generator

3D Ribbon Generator

3D Ribbon Generatorは、立体的なリボンのグラフィクを生成してくれます。サイトの見出しなどに使えると思います。

09. Long Shadows Generator

Long Shadows Generator

Long Shadows Generatorは、テキストや要素に長い影をつけることの出来るジェネレータです。使いどころが絞られている分、シンプルで分かりやすいです。

10. CSS Animation Generator

CSS Animation Generator

CSS Animation Generatorは、アニメーションに特化したジェネレータで、全部で50種類以上のアニメーションを生成できます。セレクタを切り替えるだけで要素の動きを確認する事が出来るので、初心者にも分かりやすいです。

11. Form Builder

Form Builder

Form Builderは、フォームを生成する事の出来るジェネレータです。普通に一から作るとかなり時間がかかってしまうので、とても便利なジェネレータです。

主にコーディング作業や納品後の更新作業を担当しています。デザイン業務もちょこちょこやってます。PHPやらJQueryの勉強中。
>清野哲郎のプロフィールを見る

お問合せメールフォーム

このページがあなたにとって役に立ったと感じたら下のボタンから共有をよろしくお願いします。

WORKS

制作事例一覧を見る
  • case72i
  • case89i
  • case107i
  • case108i
  • case120i
  • case111i
  • case88i
  • case98i
  • case110i
  • case116i
  • case115i
  • case118i
  • case119i
  • case117i
  • case113i
  • case112i
  • case102i
  • case114i
  • case106i
  • case104i
  • case103i
  • case100i
  • case99i
  • case109i
  • case96i
  • case105i
  • case86i
  • Ciel02
  • case22_1
  • toiro
  • case80i
  • case79i
  • case78i
  • case06-2i
  • case76i
  • case74i
  • case73i
  • case97i
  • スクリーンショット 2016-04-05 18.41.36
  • case90i
  • case82i
  • case87i
  • case71アイキャッチ
  • 国際大学
  • case84i
  • dejimo0
  • case65アイキャッチ
  • kirin_hanbai
  • case67アイキャッチ
  • case75i
  • flowerhome0
  • keiwa
  • greenstyle0
  • case57_1
  • case92i
  • case56_2
  • case54_2
  • case52_1
  • case51-1
  • case49-1
  • joywood0
  • case59_1
  • 上越どんぶり巡り様
  • yu
  • 無添加住宅
  • neal
  • hukuhuku1
  • sasa-t
  • shinoda
トップへ戻るボタン

WORKS

case110i case52_1 node2
新潟のホームページ制作・Webデザイン製作のドコドア

本 社 新潟県三条市土場1-5 tel 0120-66-0209
新潟オフィス 新潟市中央区天神1-1 プラーカ3 2F
東京オフィス 渋谷区道玄坂1-12-1 渋谷マークシティW22F