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

ITの隊長のブログ

ITの隊長のブログです。いや、まだ隊長と呼べるほどには至っていないけど、日々がんばります。CakePHPとPlayFrameworkを使って仕事しています。最近はAngular2をさわりはじめたお(^ω^ = ^ω^)

Emmetをドットインストールで覚えてみた

emmet html

スポンサードリンク

ドットインストールで勉強したことをメモ。


あと1周はしようかなと思っています。


最近HtmlとCSSばっか打っているいて、コーダーに興味がでてきました。



しかし、まだページを仕上げる速度が遅くて悩んでいました。


私はvimが使えるので、打つ速度はまぁまぁ早いと思うですが、いまいち組み立て方だったり、タグの打ち間違えで出戻りすることが多く。どうにか最適化できないかなぁーと思って、こいつに出会いました。


Emmet — the essential toolkit for web-developers



htmlとcssのコーディングを効率化することができるエディタのプラグインです。


しかし公式ドキュメントは英語なので、使い方はぱっと見ではわからないかも。


そこでドットインストール。



emmet で検索した結果 - プログラミングならドットインストール



動画で説明してくれているのでめちゃめちゃ捗ります。


というわけで、まずは1周したので復習します。

復習

!


ただのビックリマークです。そのあとに「control + e」を押すと

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

</body>
</html>


こうなります。emmentパネェ(°Д°)


タグの出力

<!-- タグの出力 -->
<!-- div -->
<div></div>

<!-- p -->
<p></p>


<!-- class id -->
<!-- div#main -->
<div id="main"></div>

<!-- div.main -->
<div class="main"></div>

<!-- ちなみにidとclassだけだとデフォでdivがでます -->
<!-- #main -->
<div id="main"></div>


入れ子での出力

<!-- div#main>p.test 「>」を使う -->
<div id="main">
	<p class="test"></p>
</div>

<!-- ul>li>a -->
<ul>
	<li><a href=""></a></li>
</ul>


複数のタグを出力

<!-- ul>li*3 アスタリスクを使う -->
<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>


並んで出力

<!-- div*3+ul>li*3 「+」を使う -->
<div></div>
<div></div>
<div></div>
<!-- divを3つ並べたあとに、ul>li*3を出力 -->
<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>

<!-- 続けて、p+div*2+ul>li*3 -->
<p></p>
<div></div>
<div></div>
<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>


子要素のあとに一旦上に戻ってタグを並べる。

<!-- div*2+p>span>a^div#main -->
<div></div>
<div></div>
<p>
	<span><a href=""></a><div id="main"></div></span>
</p>

<!-- わかりにくいので2つに増やす
div*2+p>span>a^^div#main -->
<div></div>
<div></div>
<p><span><a href=""></a></span></p>
<!-- p>span>aと親 > 子 > 孫と入れ込んでいたが、^^で 子 < 親に戻った -->
<div id="main"></div>


グルーピングも使える!すげぇ!

<!-- グルーピングは括弧で囲む -->
<!-- (div>p.test*3+p.test2)*2 -->
<div>
	<p class="test"></p>
	<p class="test"></p>
	<p class="test"></p>
	<p class="test2"></p>
	<p class="test2"></p>
</div>
<div>
	<p class="test"></p>
	<p class="test"></p>
	<p class="test"></p>
	<p class="test2"></p>
	<p class="test2"></p>
</div>

<!-- (ul>li*3)*2 -->
<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>
<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>


結構爽快です!便利やね。
どんどんいくぜ! ^^

<!-- ナンバリングもできる! -->
<!-- ul>li.item$*5 -->
<ul>
	<li class="item1"></li>
	<li class="item2"></li>
	<li class="item3"></li>
	<li class="item4"></li>
	<li class="item5"></li>
</ul>

<!-- !!!!! すごすぎ!!!-->

<!-- $の数で0の数を増やすこともできる -->
<!-- ul>li.item$$$ -->
<ul>
	<li class="item001"></li>
	<li class="item002"></li>
	<li class="item003"></li>
</ul>

<!-- @数字 をつけると数字から数えるようになる -->
<!-- ul>li.item$@5*5 -->
<ul>
	<li class="item5"></li>
	<li class="item6"></li>
	<li class="item7"></li>
	<li class="item8"></li>
	<li class="item9"></li>
</ul>

<!-- @- をつけると逆順になる -->
<!-- ul>li.item$@-*5 -->
<ul>
	<li class="item5"></li>
	<li class="item4"></li>
	<li class="item3"></li>
	<li class="item2"></li>
	<li class="item1"></li>
</ul>


タグの中身は変えられないのかい? 変えられます!

<!-- {} を使う -->
<!-- #main>ul>li{test}*5 -->
<div id="main">
	<ul>
		<li>test</li>
		<li>test</li>
		<li>test</li>
		<li>test</li>
		<li>test</li>
	</ul>
</div>

<!-- loremってやつがすごすぎ!!! -->
<!-- 適当な文字を入れてくれます -->
<!-- #main>ul>li*3>lorem -->
<div id="main">
	<ul>
		<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat aliquam, deleniti amet. Rem maiores, inventore possimus ex unde consequuntur, ratione vero natus, repellendus provident earum eius explicabo. Consectetur, repudiandae sint.</li>
		<li>Nostrum est, sapiente odio quaerat. Facere, alias fuga veniam minima laboriosam quibusdam corporis recusandae. Vitae ut error suscipit, delectus repellendus dicta perferendis tempora quo dolorem dignissimos, accusantium veritatis cumque, nobis.</li>
		<li>Ad autem, quod sint officiis consequuntur at recusandae excepturi, dolorem repellat quo distinctio commodi ipsum ratione nemo quae quia ea. Dicta accusantium, quod nemo. Unde nobis blanditiis molestiae perferendis fugit?</li>
	</ul>
</div>

<!-- 必要な単語数も制限することができる!! -->
<!-- #main>ul>li*3>lorem3 -->
<div id="main">
	<ul>
		<li>Lorem ipsum dolor.</li>
		<li>Ex, illum, nostrum!</li>
		<li>Facere, quidem, optio.</li>
	</ul>
</div>


あとは忘れちまった(´・ω・`)
次に記載します。