Dreamweaver歴8年半の僕が3日前にSublime Text 2にしてやったこと
これまでかたくなに Dreamweaver を利用していたのですが、CS6 にアップデートしたあたりから動作が重くなり、直近ではもーやってられんとなりましたので重い腰をあげて Sublime Text 2 デビューをはたしました。
これでやっと僕にも春が来るのかなとワクワクしております。
参考にした記事
以下あたりを読みました。
- 基本
- Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ | Mnemoniqs Web Designer Blog
- Sublime Text2の複数カーソルの使い方 #SublimeText2 – Qiita [キータ]
- SublimeText2を3ヶ月使ってみて利用を決めたPackageまとめ | 濃紺ピッチャー
- Emmet系
- Sublime Text 2のEmmetでdivの閉じタグにコメントを自動で入れるカスタマイズ|Blog|Skyward Design
- CSSの記述を高速化する、Emmet (Zen-Coding)|Web Design KOJIKA17
- スニペット系
- Sublime Text 2で自分用のスニペットを作る方法 | prime factor
- Sublime Text 2でjQuery用のスニペットを自作するときの注意点 | REFLECTDESIGN
その他にもいろいろ読みましたが、ほとんどが流し読みで、参考にしたのはおもに上記だったと思います。
インストールしたパッケージ
上記の記事を読んでいただき個々に精査いただくのが良いかと思いますが、個人的に以下を入れております。
- AutoFileName
- BracketHighlighter
- ColorPicker
- Compass
- CSS Snippets
- Emmet
- HTML5
- jQuery
- Package Control
- Sass
- SASS Snippets
- SideBarEnhancements
自作したスニペット
CSS はいつも Sass/Compass です。それ用に便利なのを探しきれなかったのでスニペットを作りました。
作ったスニペット (8KB)
よろしければお試しください。
使い方
「/Users/user/Library/Application Support/Sublime Text 2/Packages/User/」内に解凍した User フォルダ内の .sublime-snippet ファイルをいれていただき、Sublime Text 2 を再起動すれば利用できるはずです。
スニペットには tabTrigger というのがありまして、何を入力したときにスニペット候補を出すのかっていう文字列なわけですが、僕の場合は以下の4つの接頭辞にしています。
- compass.
- mixin.
- mq.
- and.
スニペットのファイル名も上記の接頭辞からはじまっておりますのでどのファイルがどれなのかも一目瞭然ですね。
スニペットの説明
以下の表のとおりです。
展開されるコード列でハイライトされている箇所が展開後に選択される箇所となっています。
展開後に選択される箇所だけでなく、tabキーで移動できる箇所があるものもありますので、気になる方は実際にtabキー操作をしてみたり、スニペットの中身をご覧になってみてください。
「compass.」系
tabTrigger | 展開されるコード |
---|---|
compass.background-size | @include background-size(value); |
compass.border-image | @include border-image(url(value) 00 round fill); |
compass.border-radius | @include border-radius(value); |
compass.box-shadow | @include box-shadow(value rgba(0,0,0,0)); |
compass.box-sizing | @include box-sizing(border-box); |
compass.inline-image | background: inline-image(‘value‘) left top no-repeat; |
compass.linear-gradient | @include background(linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%)); |
compass.opacity | @include opacity(.6); |
compass.rotate | @include rotate(value); |
「mixin.」系
tabTrigger | 展開されるコード |
---|---|
mixin.inline-block | @include inline-block; |
mixin.sprite-background | @include sprite-background(value); |
いつも利用している mixin は以下のファイルにあります。
_mixin.zip (602B)
以降の「mq.」系のものも上記の mixin に入っています。
「mq.」系
メディアクエリ系ですね。
tabTrigger | 展開されるコード |
---|---|
mq.pc |
@include pc(&point-pc) { property } |
mq.sp |
@include sp(&point-sp) { property } |
mq.tablet |
@include tablet(&point-tablet-1,&point-tablet-2) { property } |
「and.」系
tabTrigger | 展開されるコード |
---|---|
and.first-child |
&:first-child { property } |
and.first-of-type |
&:first-of-type { property } |
and.last-child |
&:last-child { property } |
and.first-child |
&:first-child { property } |
and.link |
&:hover, &:focus, &:active { property } |
and.not |
&:not(value) { property } |
and.nth-child |
&:nth-child(value) { property } |
and.nth-of-type |
&:nth-of-type(value) { property } |
その他同僚に教えてもらったこと
ショートカットキーなんかはなかなか覚えきれないので、われらがキム兄にちょいちょい教えてもらってます。
また、僕は普段のマークアップのさいに HTML にはインデントをつけないのですが、デフォだとインデントが付いてしまいます。
HTML だけにインデントをつけないようにするには、なにかしらの HTML ファイルを開いた状態で「Sublime Text 2メニュー > Preferences > Settings – More > Syntax Specific – User」を開くとまっさらかと思いますので、以下のように記述すればOKです。
こちらは井上さんに教えてもらいました。
{
"auto_indent": false
}
ということで
まだまだ Dreamweaver 一本です、という方は試してみてください!
こちらもどうぞよろしくお願いいたします。
jQuery入門講座 2013年6月8日開催のお知らせ
ピンバック: ツカエル!ネットの話題 » Blog Archive » 04月25日 05:00版
ピンバック: 2013年04月22日から2013年04月28日までのつぶやき | BENNO9
ピンバック: 便利過ぎる!視覚的にCSSを編集出来る様になる「Emmet LiveStyle」 | えんぞーどっとねっと
ピンバック: 便利過ぎる!視覚的にCSSを編集出来る様になる「Emmet LiveStyle」|えんぞーどっとねっと