Sublime Text 2に登録できるCSSのスニペット集が配布されてます

スポンサーリンク

テキストエディタはSublime Text 2
が最高に自分に馴染むので去年、正式
に乗り換えたんですが、Sublime Text
2に登録出来るスニペットのCSSのが
沢山配布されていたのでご紹介。

テキストエディタの個人の好みはOSと同じくらい布教活動が盛んな、宗教染みた部分が垣間見えるので、正直言って心底ウザい言葉にするだけで不快に感じる方もいるかもと思ってからTwitterで言ったり記事にしたりとかにはしないようにしてるんですけど・・・(宗教が悪いと言ってるわけじゃないですよ。押し付け感や比較対象を貶す行為が嫌なだけです。)

折角なのでスニペットの紹介ついでに簡単にご紹介します。あ、もちろんWindows版もMac版もあります。僕はWindowsユーザーなのでその目線で書いていきますね。

Sublime Text 2


エディタは1に起動スピード、2に使いやすさ、カスタマイズ性もあると嬉しい、といった視点で選ぶので、さくさく起動、メモリもさほど食わず落ちることもほぼ無い、便利なパッケージ機能、テキストエディタで簡単にスニペットを登録できる、などの理由からSublime Text 2に落ち着いてます。

折角なので軽く機能をご紹介。

手軽に追加可能なスニペット

Sublime Text 2はトリガーとなる文字を入力してtabを押すだけで登録したスニペットが展開されます。

例えば<header>と書きたければ、headerと入力してtabを押すだけで

<header></header>

上記のように登録したコードが展開されます。

このスニペットの登録もエディタ内で簡単に追加可能です。↓

tool→New snippetでスニペット用のテンプレートが呼び出されますので登録したいスニペットコードを書いて保存すればフォルダ内にファイルが追加されます。

<snippet>
	<content><![CDATA[$1:active {
	$2
}

]]></content>
	<tabTrigger>act</tabTrigger>
    <description>CSS - :active</description>
    <scope>source.css</scope>
</snippet>

スニペットは上記のような感じで登録できます。

  • <content>は実際に展開されるコード。
  • <tabTrigger>はスニペットを呼びだす文字
  • <description>はスニペットの説明
  • <scope>はソースの種類です。PHPとかHTMLとか。

これで登録すると、「act」と打ってtabを押せば

:active {

}

という感じで展開されます。


↑ 登録したスニペットはコマンドパレット(tools→Command palette)から確認出来ます。

Package Controlが便利

パッケージを管理するPackage Controlが凄く便利です。これを入れれば様々な機能を手軽に自動で追加出来る様になります。

導入方法です。

まずSublime Text 2を起動してCtrl+@でコンソールを立ち上げます。


↑ んで、公式サイトに書いてあるコードをコンソールに貼り付けてEnter押せばインストール完了です。再起動すればPackage Controlが使えるようになります。


↑ 使えるようにしたらCtrl+Shift+pで検索窓を立ち上げてinstallと入力すればPackage Control: Install Packageに絞り込んでくれるのでそこから使いたいパッケージを探すだけ。インストールも削除も楽々です。尚、インストールしたパッケージを使う前に再起動する必要が有ります。

どんなパッケージがあるかは、Sublime Text Packageとかでググって下さい。以前、Nettuts+でもまとめ記事があったのでここから試してみるのもいいんじゃないでしょうか。また、パッケージのコミュニティも存在しますので入れたパッケージの挙動が怪しいときは見てみるといいかもしれません。

テーマも色々


テーマも色々あるので黒い画面が怖い方でも安心です。

Replaceとかもできるよ


置換機能も当然あります。Find→Replaceでもいいし、Alt+3で同じ文字列を選択出来るのでそのまま入力すれば一括で文字列を変更できます。

他にもいろいろ素敵な機能が備わってるんですけどもう面倒になってきたので終わりにします。好きなの使えばいいと思う。エディタ変えたから技術があがるわけじゃないですしね。僕も特にSublime Textをオススメしてないです。

Sublime Text 2に登録できるCSSのスニペット集


やっと本題。そんなSublime Text 2の特徴でもあるスニペット機能でCSSのが沢山配布されてたのでご紹介します。スニペットは50個ほど同梱されています。Sublime Textを使っているなら自分でスニペットを登録してるだろうとは思いますけど、まだ作ってないなら入れてみては如何でしょうか。

本題終わり。

A Collection of CSS Snippets for Sublime Text 2

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services