>> 
マウスでかんたんにCSS3プロパティを作成できるCSSジェネレーターをFirefoxに実装する CSSsir 0.3.20120729 追加機能
 >> 
マウスでかんたんにCSS3プロパティを作成できるCSSジェネレーターをFirefoxに実装する CSSsir 0.3.20120729 追加機能

スポンサーサイト

  • このエントリーをはてなブックマークに追加
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

マウスでかんたんにCSS3プロパティを作成できるCSSジェネレーターをFirefoxに実装する CSSsir 0.3.20120729 追加機能

  • このエントリーをはてなブックマークに追加
マウスでかんたんにCSS3プロパティを作成できるCSSジェネレーターをFirefoxに実装する CSSsir 0.3.20120729 夜中のオリンピックの生放送を見ようとしても毎回寝落ちしてしまう管理人です。


プレビューしながらマウス操作で簡単にCSS3プロパティを作成するCSSジェネレーターをFirefoxに実装するCSSsir」についての再エントリーです。

バージョンアップに伴い新たに OutlineConverterTag Cleaner の三種類のCSSジェネレーターが追加されました。




CSSsir 0.3.20120729

CSSsir」は、プレビューしながらマウス操作で簡単にCSS3プロパティを作成するCSSジェネレーターをFirefoxに実装する アドオンです。

CSSsir :: Add-ons for Firefox

以前「CSS3ジェネレーターを Firefox に搭載する CSSsir 0.1.20120618」をエントリーしてから、個人的にWeb制作でとても役にたっている「CSSsir」がバージョンアップされ新たにCSS3ジェネレーターが追加されました。

今回、新たに追加されたCSS3ジェネレーターは以下の三種類で個人的にありがたいと思える機能があったので再エントリーしました。

  • Outline - アウトラインのオフセット値を指定
  • Converter - RGB、フォントサイズの単位変換ツール
  • Tag Cleaner - HTML整形ツール

以下、実際に使ってみた様子です。




CSS3プロパティを作成するCSSジェネレーターをFirefoxに実装する

▼ CSSジェネレーター一覧

CSS3プロパティを作成するCSSジェネレーターをFirefoxに実装する - CSSsir 0.3.20120729

以前のエントリー にも書いたように「CSSsir」をインストールするとツールバーに ボタンボタン - CSSsir 0.1.20120618 が追加され、ボタン右側の ▼ をクリックするとCSSジェネレーター一覧が表示され各CSSジェネレーターを選択して使用します。

今回、バージョンアップに伴い新たに OutlineConverterTag Cleaner の三種類のCSSジェネレーターが追加されました。

CSSジェネレーター(Outline、Converter、Tag Cleaner) を使ってみた様子は以下から



Outline

Outline - CSSsir 0.3.20120729

Outline では outlineプロパティoutline-offsetプロパティ を画面左側のプレビューを見ながらマウスでスライダーを動かして指定し、生成されたコードをコピペして使用します。

指定できる値は以下の通りです。

  • Style: 線種
  • Width: 線の太さ
  • Offset: ボーダーとアウトラインの距離
  • Color: 線色



Converter
Converter は、変換系CSSジェネレーターです。
現在は、RGB変換(RGB ←→ HEX)フォントサイズの単位変換(em ←→ px) を行う事ができます。



RGB ←→ HEX

RGB ←→ HEX - CSSsir 0.3.20120729

RGB ←→ HEX では、16進数のカラーコード(HEX) と RGB を変換する事ができます。
個人的にCSS3から "RGBaプロパティ" を使用する事が多くなり "16進数のカラーコード" より "RGB" を使うようになったので助かります。



em ←→ px

em ←→ px - CSSsir 0.3.20120729

em ←→ px では、フォントサイズの単位変換を行う事ができます。
ベース(基準)となるフォントサイズ(Base pixel size)を入力して、単位変換後のフォント値を測る事ができます。



Tag Cleaner

CSSsir 0.3.20120729

Tag Cleaner では、HTMLタグ内の余分なスペースや改行、属性の削除などを行えます。

画面の左側のテキストエリアにHTMLタグを貼り付けて右側の項目にチェックを入れて "Remove" をクリックして使用します。戻すには "Ctrl + z"

画面右側の項目の訳は以下の通りです。

  • Remove Tags
    すべてのHTMLタグを削除します。

    Exception Tags

    CSSsir 0.3.20120729

    削除しないHTMLタグを指定する事もできます。
  • Remove Attributes
    HTMLタグに記述してある id、class、style、src、alt などの属性だけを削除します。
  • Remove Special Characters
    >、<、  などの特殊文字を削除します。
  • Remove Empty Lines
    空行を削除します。
  • Remove Extra spaces
    二つ以上ある半角スペースを一つだけ残して削除します。全角スペースは削除されません。




インストールページ

関連記事
-0 comments
管理者にだけ表示を許可する
-0 trackbacks