WEBサイト制作
2019.10.11
Dreamweaver × Emmetで爆速コーディングを実現！
コーディング作業をする上で、コードヒントなどの機能を利用することで、素早くミスのないコードを記述。
いわゆるマークアップエンジニアと呼ばれる職種の方は活用していることと思います。
今回ご紹介するのは、DreamweaverとEmmetを活用してコーディング速度をさらにアップする方法です。
Emmet自体はDreamweaverに限らず、他のテキストエディタでも使用可能ですが、Dreamweaverと組み合わせることで作業速度が3倍にも4倍にもなるとか…
ちなみにEmmetはDreamweaver CCに初期で組み込まれています。
ぜひEmmetを活用して爆速を体験してみてください。
Emmetとは
Emmetは主にHTML・CSSの記述・編集をサポートするプラグインで、省略記法で記述した後に、tabキーを押すとコードが展開され、タイプミスの防止やコーディングのスピードアップにつながります。
HTML編
「.」や「#」で要素にclass名、ID名をつける
「.」の後にクラス名、「#」の後にID名を記述します。
展開前
.test
#test
展開後
<div class="test"></div>
<div id="test"></div>
「>」で入れ子構造の作成
要素を入れ子にさせたい場合は間に「>」を記述します。
展開前
.test>.inner
展開後
<div class="test">
<div class="inner"></div>
</div>
「*」で同じ要素を繰り返す
「*」の後に複製したい数を記述すると、その数だけ要素が繰り返されます。
展開前
ul>li*3
展開後
<ul>
<li></li>
<li></li>
<li></li>
</ul>
「$」で連番を作成する
クラス名やID名の後に「$」をつけて、複製したい数をいれると、その数だけクラス名、ID名が連番になります。
展開前
ul>li.item$*3
展開後
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
「+」で兄弟要素を作成する
兄弟要素にしたいタグ同士を「+」でつなぐことができます。
展開前
p+a
展開後
<p></p>
<a href=""></a>「｛｝」テキストを記述する
aタグなどでテキストにしたい部分は「｛｝」で括ることができます。
展開前
a{view more}
展開後
<a href="">view more</a>
「()」で囲むことでグループ化
囲みたいグループを「()」で括るだけでグループ化が可能です。
展開前
.test>(.inner>ul>li*3>p)+footer
展開後
<div class="test">
<div class="inner">
<ul>
<li>
<p></p>
</li>
<li>
<p></p>
</li>
<li>
<p></p>
</li>
</ul>
</div>
<footer></footer>
</div>
応用
展開前
(header>.menu>ul>li*3>a)+(.contetns>.inner>ul>li.item.item$*3>p+a>span{view more})+footer展開後
<header>
<div class="menu">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
</header>
<div class="contetns">
<div class="inner">
<ul>
<li class="item item1">
<p></p>
<a href=""><span>view more</span></a>
</li>
<li class="item item2">
<p></p>
<a href=""><span>view more</span></a>
</li>
<li class="item item3">
<p></p>
<a href=""><span>view more</span></a>
</li>
</ul>
</div>
</div>
<footer></footer>慣れると長い記述でも1行で書けてしまいます。覚えるととても便利ですよ！
CSS編
プロパティと値の頭文字をつなげる
展開前
posr
db
w100
fz16
fwb
c#000
展開後
position: relative;
display: block;
width: 100px;
font-size: 16px;
font-weight: bold;
color: #000;上記の記述を改行せず、1行で一気に展開したい場合は、
プロパティと値の頭文字を「+」でつなげます。
↓ こんな感じで
展開前
posr+db+w100+fz16+fwb+c#000
展開後
position: relative;
display: block;
width: 100px;
font-size: 16px;
font-weight: bold;
color: #000;
単位指定
数値のデフォルト単位はpxになりますが、指定することもできます。
展開前
fz16+fz100p+fz2e+fz2r
展開後
font-size: 16px;
font-size: 100%;
font-size: 2em;
font-size: 2rem;
複数の数値を入力
「-」を数値の間に記述することで、複数の値が指定できます。
展開前
m0-auto+p10-20-5-15
展開後
margin: 0 auto;
padding: 10px 20px 5px 15px;
ベンダープレフィックス
先頭に「-」を付けると、ベンダープレフィックスをまとめて記述することができます。
展開前
-jcsb
展開後
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-o-justify-content: space-between;
justify-content: space-between;
まとめ
いかがでしたか？
覚えるのが大変ですが、覚えてしまったら、かなりの時間短縮になると思います。
Emment公式サイトのチートシートに省略記述が詳しく掲載されています。
普段よく使う記述だけでも覚えると作業スピードがアップすること間違いなしですよ！
詳しくは下記のページをご覧ください。
https://docs.emmet.io/cheat-sheet/