Yuta Watanabe's Blog

開発周りと、その他諸々

Bootstrap を使った HTML/CSS コーディングがはかどる Sublime Text パッケージ

こんにちは。

マイクロソフトの渡辺です。

f:id:yuwata:20141020231732p:plain

久しぶりに Bootstrap を使って HTML/CSS を書く機会があったので、改めて便利だと感じた Sublime Text のパッケージを 3つご紹介します。

Sublime Text へのパッケージ追加方法は下記記事をご覧ください。


Sublime Text をインストールする - Yuta Watanabe's Blog

Bootstrap を使った HTML/CSS コーディングがはかどる Sublime Text パッケージ

Bootstrap 3 Snippets

bs3- で始まるスニペットで Bootstrap 3 のコードをサクサク書いていけます。

例えば、bs3-col:6 + "tabキー" で下記のコードが挿入されます。

Bootstrap 3 Snippets: bs3-col:6

公式ページにスニペット一覧が掲載されていますので、よく書くコードから活用していきましょう。

Loremlsum

ダミーのテキストをボリュームを指定して挿入できます。

ショートカットキーは "Alt+Command+l" ( WIndows の場合は Control+Alt+l )。数字を入力してからショートカットを呼び出すと行数が指定できます。

HTMLBeautify

先の2つのパッケージ、Bootstrap 3 Snippets と Loremlsum を使い倒していると、インデントがずれたり無駄な改行が入ってしまったりしてきます。そんなときは、この HTMLBeautify を使いましょう。

HTML のソースコードをきれいに整形してくれます。呼び出し方は "Command+Option+Shift+F" ( Windows の場合は、Cntrol+Alt+Shift+F )。自分はメニューバーから Edit->Beautify HTML で呼び出しています。

このあとは

Sublime Text で活用できるパッケージは、今回ご紹介した物以外にもたくさんあります!ぜひ、自分の仕事を効率化してくれるパッケージを探してみてください。


Sublime Text インストール後に追加するパッケージを探す - Yuta Watanabe's Blog