コーディング

HTML・CSSコーディングを1秒でも速くする方法

  • このエントリーをはてなブックマークに追加

制作部の鈴木です(*- -)(*_ _)ペコリ

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

  • このエントリーをはてなブックマークに追加

【Webデザイナー募集!】D-Gripで一緒に働きませんか?

ただいま株式会社D-Gripシステムでは、制作部として一緒に働いてくれるWebデザイナーさんを募集しています。

実務経験がある方はもちろん、専門学校や独学で勉強された未経験の方でも歓迎です!
800サイト以上の運営実績のある会社で、プロのWEBデザイナーへの道を着実に歩んでいきませんか?

お問い合わせはコチラから↓
採用サイトへ

お電話はコチラから↓
TEL:03-5363-2191

採用サイトへ