[CSS,エディター]brackets-cssfierがどんなものか使ってみた(インストール方法とか)

[CSS,エディター]brackets-cssfierがどんなものか使ってみた(インストール方法とか)
Sassネタは今日はお休みしてbrackets-cssfierが気になったので使ってみました。感想やら手順などをちょこっと。
ちょこっとしか書かないってことはどういうことだかお利口さんなみんなは分かるよね。

まずはエディタの準備から。
使うエディタはGithubで公開されているAdobe Bracketsです。

とりあえずダウンロードしてインストールしておきましょう。
Adobe Brackets

brackets-cssfierのインストール

ファイル→拡張機能マネージャーをクリック。
Adobe Brackets

URLからインストールをクリック。
Adobe Brackets

テキストボックスに「https://github.com/rcaferati/brackets-cssfier」を貼り付けてインストールをクリック。
以上でbrackets-cssfierのインストールは終わりです。

さっそくbrackets-cssfierを使ってみる

使い方は至ってシンプルです。
htmlを書く→コピーする→cssファイル(scssファイル)に貼り付ける
以上です。

htmlを書く
htmlを書く
コピーする
※今回はnav,ul,li,aまでをコピーしてみました。

cssファイルに貼り付ける
cssファイルに貼り付ける

あら不思議。
コピーしたhtmlがcssのセレクタに変身しましたね!
超便利!超楽!

まとめ

環境も簡単に作れてcssを書くのが楽になりそうですね。
でもcss大好きなみんなは気づいてると思うけど2階層までしか対応しないみたいです。
階層を明確に書くようにしている方にはちょっとですね。
しかし今回のようにサンプルみたいなものを作る際はすごく手間が省けてゆっくりコーヒーを飲む時間もできますね。
要は使いドコロを選ぶしSass派のみんなには不向きかな?ってツールの紹介でした。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク