読者です 読者をやめる 読者になる 読者になる

nomal note

新人Webデザイナーが個人的に覚えたり作ったりしたコードを投下していきます。検証用なので支離滅裂注意。

【DAI語感覚】学生もコーディング速度をあげたいなら、Emmet(省略記法)で書くのです( ˘ω˘ )

コーディングをするとき、SassやScss、Lessをつかわないで、CSSに直書きしてる方って結構いるんじゃないですか?コツコツ書いてたら、いくら時間があっても足りません。 爆速コーダーの第一歩として、省略記法Emmetでのコーディングをつよくオススメします。

f:id:nomal_f:20160707192704p:plain

 

■Emmetってなんだよ 

f:id:nomal_f:20160707142535p:plain

Emmet — the essential toolkit for web-developers

Emmetは、HTMLやCSSの編集を強化するプラグインのひとつです。
コーディングをする際に、タグやスタイルが長くなりますよね。
それを、数文字打つだけで自動的に補完してくれる便利なものです。

くだいてまとめると「DAI語」みたいなもんです。略して打てるんですよ。

【たとえば】

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

これ、チマチマ打ってませんか?

 

そんなめんどくさいこと、今日でおさらばです。

ul>li*5

を打った文末で【TAB】か【Control+E】をおして展開して終了です。

タグの閉じもれも解消してくれて一石二鳥ですね。
これが、省略記法ができるプラグイン、Emmetの力なのです。( ˘ω˘ )

■まずは、インストールしたまえ

f:id:nomal_f:20160707144721p:plain

Atomの場合】

⌘+,→Emmetで検索→インストールする

 

■では、本題。省略記法の書き方

基本(省略するための記号を理解する)

>(ネスト)や*(複製)これらを組み合わせると、よくつかう自分オリジナルの省略記法が応用で作れます。絶対、覚えるべし。

応用(記号全て使った場合の省略記法の例)

クラス名をつけて、見出しタイトルを記載。dtとddを3回複製する省略記法

HTML

CSS

スタイルはたくさん覚えておくほど効率がアップしますよ

★もっと極めたい人にはチートシートあります。

f:id:nomal_f:20160707183713p:plain

じつは公式で、省略記法一覧のチートシートCheat Sheet)が用意されています。 フリーランスの方々も重宝されてるそうですから、ブクマしときましょうね。

 

■もっと、もーっと、省略したい方はユーザー辞書をつかってみそ。

f:id:nomal_f:20160707184028p:plain

ライターさんやテープ起こししてる方は、もはやデフォルトになっているユーザー辞書の活用。こちらもEmmetと組み合わせると便利です。まず登録するときに一通りおさらいになるので、学習にもオススメですね。

 

■おわりに

コーディングの生産速度をあげる手段はいろいろありますが、Sassなどは環境を整えるまでに少々知識や時間がかかってしまいます。まずは、ショートカットキーを覚える感覚でお手軽に導入できる、Emmetからはじめてみちゃいましょう。ちなみに、うちの会社では必須スキルです。省略記法でかけたら、未経験の子は即戦力になりますね。ぜひ、チャレンジしてくださいな( *˘ω˘* )