こんにちは!スタッフのめぐみです。今回は CSS を書くときにちょっと便利なジェネレーターを集めてみました。HTML や CSS を書き始めたばかりの初心者の方は参考にしてみるといいかもしれません。
「Choose Something」と書かれた箇所をクリックすると、CSS3 のプロパティが表示されます。さらに各プロパティ名をクリックすると、ジェネレーターが表示され項目を入力するとその場で指定の CSS を生成することができます。プロパティによっては他のジェネレーターのサイトのリンクが貼ってある場合もあります。
各 CSS3 のプロパティをクリックすると、サンプルコードとライブプレビューを吐き出してくれます。そのプロパティが現在どのブラウザ(PC / mobile / tablet)でサポートされているのかも教えてくれます。
CSS で三角形を書くようなときに重宝するジェネレーターですね。普段あまり書かない CSS はこういったものをうまく利用して楽したいところです。
こちらは CSS で吹き出しが作れるジェネレーターです。position(arrow の位置), size, color, border color, border width をそれぞれ入力するとお好みの吹き出しを生成してくれます。
このジェネレーターは、jQuery のプラグインでお馴染みの bxSlider を開発した bxCreative が作ったようです。必要な箇所を入力するとボタンを生成してくれます。hover した時の CSS も生成してくれるので便利ですね。
グラデーションを生成してくれます。例えば CSS でボタンを実装して背景色をグラデーションにして立体感を出したい…というような時など様々な用途に使えそうですね。
Simple Sharing Buttons Generator は Twitter や facebook などの SNS シェアボタンを生成してくれるサイトです。画面の指示に従って項目を選択または入力すると素敵なシェアボタンを生成してくれます。
GitHub ページはこちら。
Can I use? はその CSS プロパティがどのブラウザのどのバージョンで使えるのかを一覧で表示してくれるサイトです。
例えば「box-shadow」と入力すると、以下のスクリーンショットのようになります。さらに Notes, Known Issues, Resorces, Feedback というタブではそのプロパティについての注意点やドキュメントのリンク等を示してくれます。
そしてこの記事を書いている途中でデザインカンプから CSS を起こすときは Photoshop や Illustrator から CSS をコピーすることができるということを思い出したので次回はそのことについて書こうと思います。
それでは皆様楽しい CSS ライフを〜!
スポンサーリンク普段はフリーランスのWebデザイナーをしています。仕事以外ではWordPress系コミュニティでも活動中です。WordCamp Tokyo 2015 の Web制作チームリーダーをしたり、WordBench東京や埼玉でも顔を出しています。7FのWordPressもくもく会にもアドバイザーとして参加していますよ!EXPという共著ブログのメンバーとしても記事を時々書いているので、よかったら覗いてみてください。
2012-2022 © コワーキングスペース7F All Rights Reserved.
運営会社 株式会社コミュニティコム