制作部の鈴木です(*- -)(*_ _)ペコリ
D-Grip制作部では、業務効率化・制作レベルの向上を目的として月に1度勉強会を開いています。
今月の勉強会のテーマは「便利ツール・技術の共有」
普段自分が何気なく使っているツールが他者からすれば「何それめっちゃ便利！」となるものがあるのでは…ということで、上記テーマで勉強会を行いました。
メンバー1人1人が様々なツールや技術の説明をする中、私は「Emmet（エメット）」というプラグインを紹介しました。
偶々メンバーがEmmetを知らなかったため鈴木は得意気に説明したわけですが、超ドヤ顔かましていたらすみません。
この場でこっそり謝罪…。
Emmet（エメット）とは？
一言でいうと、「短縮記法でコードを展開するテキストエディタ用のプラグイン」です。
……何のことやらって感じですね。
こういう時は実例が一番です！
例えばCSSで1pxの黒い枠線を設定する時
「border: 1px solid #000;」
とコードを打ちますよね。
ところがEmmetのプラグインをインストールすると
「bd+」
と打って、最後にTabキーをッターン！と叩くだけで「border: 1px solid #000;」が展開されます。
自分が使いやすいようにカスタマイズできたりもするのですが、とりあえずはHTMLとCSS記述でよく使う簡単なコードだけでも覚えるといいかなぁと思います。
【短縮コード参考】
http://docs.emmet.io/cheat-sheet/
個人的に多用しているのは
「db」
↓（Tabキーをッターン！）
「display: block;」
とか
「m0-a」
↓（Tabキーをッターン！）
「margin: 0 auto;」
とかで、主にCSSで大活躍です。
この便利なEmmetはDreamweaverCCでは標準装備されてますし、Sublime Text等様々なテキストエディタにインストールできます。
http://emmet.io/download/
ざっくりとした説明だけでしたが、気になった方は深くまで調べてみてくださいm(__)m
