2013年10月3日 11:41 AM  カテゴリー: web制作, ソフト・便利ツール

最近いろいろなブログで目にすることが増えてきたので試しに使ってみることにしました。

SublimeText2

はその名の通りテキストエディタです。
GoogleChromeのリアルタイム更新。CSSファイルをいじると表示がリアルタイムに更新されるらしいので、とりあえずこれだけ試そうと実際使ってみたらちょっと感動しました。

http://www.sublimetext.com/

1. ダウンロードしてインストール。
2. Package Controlをインストール。
「View」→「ShowConsole」
エディタ最下部に出てきたコンソール内に、下記テキストをペースト。

↓PackageControlのページ
https://sublime.wbond.net/installation#st2

sublimetext-1

3. エディタを再起動。(Exit → 起動でOK)
ここまででプラグインを入れる準備が完了。

4. Ctrl(Command) + Shift + P
5. ぽこっと出てきたフォームに「install」と入力。
6. 「Package Control: Install Packages」を選択。
7. また出てきたフォームに「livestyle」と入力。出てきたら選択してEnter。
8. 今度はブラウザ側の設定。GoogleChromeのEmmet LiveStyleプラグインをインストールして有効にする。
Emmet LiveStyle

9. 「F12」、または編集したいサイトのブラウザ上で右クリック「要素を検証」。
10. タブの一番右にLivestyeがあったらクリック。
11. 編集したいサイトのCSSをSublimeText2を起動。
12.こうなってたらOK。
sublimetext-2

13.CSSファイルのひも付け
sublimetext-3
複数ファイルある場合は必要なCSSファイルをSublimeText2で開いておけば全部セレクトボックスの項目として出てきます。
出てきたものを紐付けして完了です。

14. この状態で開発者ツールのElements上で編集しても、SublimeText2上でCSSを編集してもどちらもリアルタイムで反映されます。

以上です。

まだまだ使い始めて間もないのでプラグインやショートコードなどわかりませんがもし使いこなせるようになったら結構いいかも。ということで記事を書きました。

個人的な使い方として、ブラウザ上の開発者ツールで使うよりブラウザとエディタを並べてエディタ側で編集してリアルタイムで更新される様を見るのが何とも心地よいです。

モニターが狭いと使いにくいのでデュアルモニタ、もしくはiMacの27インチとか高解像度のモニタを使用してる人なんかは相当快適なんじゃないかと思いました。

ABOUT

仕事と子育てを楽しむパパです。 趣味は漫画、映画、海外ドラマ、波乗り、スノボ、カメラ。 最近いけてないけど旅行も大好き。仕事はweb以外にも企業向け技術教育事業、投資、ディレクション、アパレル、写真、店舗プロデュースなどなどなんでもこなします。

Twitter