シェアオフィス6F
貸会議室6F

こんにちは!スタッフのめぐみです。今回は CSS を書くときにちょっと便利なジェネレーターを集めてみました。HTML や CSS を書き始めたばかりの初心者の方は参考にしてみるといいかもしれません。

1. CSS3 Generator

css3-generator

URL
http://css3generator.com/

「Choose Something」と書かれた箇所をクリックすると、CSS3 のプロパティが表示されます。さらに各プロパティ名をクリックすると、ジェネレーターが表示され項目を入力するとその場で指定の CSS を生成することができます。プロパティによっては他のジェネレーターのサイトのリンクが貼ってある場合もあります。

2. CSS3 Click Chart

css3-click-chart

URL
http://css3clickchart.com/

各 CSS3 のプロパティをクリックすると、サンプルコードとライブプレビューを吐き出してくれます。そのプロパティが現在どのブラウザ(PC / mobile / tablet)でサポートされているのかも教えてくれます。

3. CSS triangle generator

css-triangle-generator

URL
http://apps.eky.hk/css-triangle-generator/

CSS で三角形を書くようなときに重宝するジェネレーターですね。普段あまり書かない CSS はこういったものをうまく利用して楽したいところです。

4. CSS ARROW PLEASE!

css-arrow-please

URL
http://cssarrowplease.com/

こちらは CSS で吹き出しが作れるジェネレーターです。position(arrow の位置), size, color, border color, border width をそれぞれ入力するとお好みの吹き出しを生成してくれます。

5. CSS Button Generator

css-button-generator

URL
http://css3buttongenerator.com/

このジェネレーターは、jQuery のプラグインでお馴染みの bxSlider を開発した bxCreative が作ったようです。必要な箇所を入力するとボタンを生成してくれます。hover した時の CSS も生成してくれるので便利ですね。

6. Ultimate CSS Gradient Generator

ultimate-css-gradient-generator

URL
http://www.colorzilla.com/gradient-editor/

グラデーションを生成してくれます。例えば CSS でボタンを実装して背景色をグラデーションにして立体感を出したい…というような時など様々な用途に使えそうですね。

7. Simple Sharing Buttons Generator

simple-sharing-buttons-generator

URL
http://simplesharingbuttons.com/

Simple Sharing Buttons Generator は Twitter や facebook などの SNS シェアボタンを生成してくれるサイトです。画面の指示に従って項目を選択または入力すると素敵なシェアボタンを生成してくれます。
GitHub ページはこちら

Can I use ?

can-i-use

URL
http://caniuse.com/

Can I use? はその CSS プロパティがどのブラウザのどのバージョンで使えるのかを一覧で表示してくれるサイトです。
例えば「box-shadow」と入力すると、以下のスクリーンショットのようになります。さらに Notes, Known Issues, Resorces, Feedback というタブではそのプロパティについての注意点やドキュメントのリンク等を示してくれます。

can-i-use-box-shadow

そしてこの記事を書いている途中でデザインカンプから CSS を起こすときは Photoshop や Illustrator から CSS をコピーすることができるということを思い出したので次回はそのことについて書こうと思います。

それでは皆様楽しい CSS ライフを〜!

スポンサーリンク

スポンサーリンク

この記事を書いた人

普段はフリーランスのWebデザイナーをしています。仕事以外ではWordPress系コミュニティでも活動中です。WordCamp Tokyo 2015 の Web制作チームリーダーをしたり、WordBench東京や埼玉でも顔を出しています。7FのWordPressもくもく会にもアドバイザーとして参加していますよ!EXPという共著ブログのメンバーとしても記事を時々書いているので、よかったら覗いてみてください。



メールマガジン登録

週1回程度でメールマガジンにて、コワーキングスペース7Fのイベントや勉強会情報や近況、Web関係や地域情報などを配信しています。
もし良ければ以下のフォームにメールアドレスを入力して登録してくださいね!

7F情報をぜひフォローください!


スポンサーリンク

月額会員募集中の申し込みフォーム
イベント情報
会議室ご予約
オープンスペースご予約
無料見学ご予約
お問い合わせ
メールマガジン登録フォーム
フロアマップ
よくある質問
Amazonコワーキングスペース7Fのほしい物リスト
一時託児施設利用
7F大学
リブライズ
Eightどこでもスキャン計画
7Fスタッフ募集のお知らせ
シェアオフィス6F
貸会議室6F

混雑状況やイベント情報

サイト内検索