Top Firefox拡張機能(アドオン) >FirefoxにCSS3ジェネレータを装備できるアドオン「CSSsir」
2012年07月09日

FirefoxにCSS3ジェネレータを装備できるアドオン「CSSsir」

ウェブサイトオーナーやサイト管理者の方なら、サイトをCSSで装飾するような作業を行うことはよくあることだと思います。

最近ではこのような作業も優秀なフリーソフトやオンラインツールで簡単に行うことができるようになっていますが、サイトを閲覧しながら思い立った時にすぐ実行したいということもあるでしょう。

こんな時、ブラウザから素早くCSSを生成することができれば便利かもしれませんね。

Firefoxに「CSSsir」というアドオンをインストールしておけば、そんな場面でも素早くCSSジェネレータを起動し、コードを生成することができるようになります。

「CSSsir」は、Firefoxのツールバーボタンから7種のCSS3クロスブラウザコードを生成することができるようになるというアドオンです。

アドオンをインストール後ツールバーに設置されるボタンをクリックし、メニューから生成したいCSSを選択するだけで、各CSSをプレビューしながら生成することができるようになっています。


01_CSSsir Firefox Add-ons.JPG


たとえば、メニューから[Text-shadow]を選択すると、以下のようなウィンドウが開くようになっています。


02_CSSsir Firefox Add-ons.JPG


ここでプレビューを見ながら縦横のレンジやカラーを選択すると、下部に生成されたコードが表示されるようになっており、これをコピペして利用するようになっています。

その他に生成できるコードは以下の通りです。


■RGBA


03_CSSsir Firefox Add-ons.JPG


■Text-rotation


04_CSSsir Firefox Add-ons.JPG


■Transform


05_CSSsir Firefox Add-ons.JPG


■Box-Shadow


06_CSSsir Firefox Add-ons.JPG


■Border-radius


07_CSSsir Firefox Add-ons.JPG


■Multiple Columns


08_CSSsir Firefox Add-ons.JPG


■Gradient


09_CSSsir Firefox Add-ons.JPG


また、[Bonus]を選択することで、各種セレクタ一覧などを参照することができるようになっています。


10_CSSsir Firefox Add-ons.JPG


このように、特に複雑な知識がなくてもブラウザから簡単にCSSを生成することができるようになるというアドオンです。

かなり気軽に使うことができますので、サイト管理者の方やブログオーナーの方は、使ってみてはいかがでしょうか。


ダウンロード:CSSsir(Add-ons for Firefox)


<関連記事>


■スタイルシート(CSS)を含んだ完全なページ保存ができるFirefoxアドオン「Save Complete」

■マウスポイントした箇所のCSSプロパティを簡単に確認できるFirefoxアドオン「CSS Viewer」

■閲覧しているページのCSSをリアルタイムに編集して状態を維持できるGoogle Chromeエクステンション「Stylebot」

■Firefoxで閲覧中のWebページスタイルを自在に変更してGreasemonkeyスクリプトとして保存できるアドオン「Platypus」

■表示ページを自由自在に編集してソースを取得できるFirefoxアドオン「Edit Page」

■Firefoxに"Dreamweaver"ライクなHTMLエディタをビルトインするアドオン「Codetch」




この記事をはてなブックマークに登録 follow us in feedly このエントリを del.icio.us に登録 この記事をクリップ!Yahoo!ブックマークに登録
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック