ドットインストールの学習メモです
emmetはhtmlやCSSを書くときに使う便利な記省略法。
#タグの属性の指定
- . クラス
- # id
- [] クラス、id以外（aタグのtitle属性など), 複数の属性を一気につけたい場合
- {} 要素ないのテキストを指定(pタグのhelloテキストなど）
html
<!-- div#target -->
<div id="target"></div>
<!-- div.container -->
<div class="container"></div>
<!-- div#reset.btn.disabled -->
<div id="reset" class="btn disabled"></div>
<!-- a[title="Mysite"] -->
<a href="" title="Mysite"></a>
<!-- div[data-id="5" title="Mysite"] -->
<div data-id="5" title="Mysite"></div>
<!-- p{hello} -->
<p>hello</p>
<!-- div[data-id="5" title="Mysite"]{hello} -->
<div data-id="5" title="Mysite">hello</div>
こんなんでやってたらなんかかっこいい件について。
#複数の要素の展開
<!-- p*3 -->
<p></p>
<p></p>
<p></p>
<!-- p{hello}*3 -->
<p>hello</p>
<p>hello</p>
<p>hello</p>
<!-- div.item*10 -->
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<!-- div.item$*5 -->
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
<div class="item5"></div>
<!-- div.item$$$*5 -->
<div class="item001"></div>
<div class="item002"></div>
<div class="item003"></div>
<div class="item004"></div>
<div class="item005"></div>
<!-- div.item$@3*5 -->
<div class="item3"></div>
<div class="item4"></div>
<div class="item5"></div>
<div class="item6"></div>
<div class="item7"></div>
階層の展開の表現
<!-- main>section*3 -->
<main>
<section></section>
<section></section>
<section></section>
</main>
<!-- main>section*3+div.btn -->
<main>
<section></section>
<section></section>
<section></section>
<div class="btn"></div>
</main>
<!-- main>section*3^footer -->
<main>
<section></section>
<section></section>
<section></section>
</main>
<footer></footer>
<!-- ul*3>li*3 -->
<!-- (ul>li*3)*2 -->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
emmet abbreviation最高ー。結果を示してくれるなんて。
#暗黙的な補完機能
<!-- .container -->
<div class="container"></div>
<!-- ul>.item*5 -->
<ul>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
<!-- table>.row*2>.col*4 -->
<table>
<tr class="row">
<td class="col"></td>
<td class="col"></td>
<td class="col"></td>
<td class="col"></td>
</tr>
<tr class="row">
<td class="col"></td>
<td class="col"></td>
<td class="col"></td>
<td class="col"></td>
</tr>
</table>
#formに関するタグを展開
<!-- form:post -->
<form action="" method="post"></form>
<!-- input:te -->
<input type="text" name="" id="">
<!-- input:r -->
<input type="radio" name="" id="">
<!-- input:c -->
<input type="checkbox" name="" id="">
<!-- select>[value="item$"]*5 -->
<select name="" id="">
<option value="item1"></option>
<option value="item2"></option>
<option value="item3"></option>
<option value="item4"></option>
<option value="item5"></option>
</select>
#margin,paddingを展開 CSS
body {
/* m */
margin: 10px;
/* p */
padding: 10px;
/* m10 */
margin: 10px;
/* m10p */
margin: 10%;
/* m10r */
margin: 10rem;
/* m10p20p */
margin: 10% 20%;
/* m10-20-30 */
margin: 10px 20px 30px;
/* mb10 */
margin-bottom: 10px;
}
ら、楽すぎる〜！
#CSSのプロパティの展開
body {
/* fsz */
font-size: ;
/* cup */
cursor: pointer;
/* fwe */
font-weight: normal;
/* psa */
position: absolute;
/* psr */
position: relative;
}
感覚的に書き込むだけ・・・凄すぎる。。。
#テキストを囲ってみよう
<div class="container">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis illum aliquid tempora repudiandae ab! Sed beatae perferendis illum vitae fugit accusamus iste saepe facere, ipsam id temporibus numquam nulla ex.</p>
</div>
<ul>
<li>red</li>
<li>blue</li>
<li>pink</li>
</ul>
command + shift + p でコマンドパレット
wrapで検索、全体か個々かを選択。
ul>li*\t ulの下にliを。 個別に。|t 頭についてる記号や数字を取り除く。*
#画像に関する譲歩を取得・計算
<img src="img/logo.png" alt="" width="650" height="108">
<img src="img/logo.png" alt="" width="650*2" height="108">
#Emmet記法のカスタマイズ
<!-- mt -->
<mytag></mytag>
これは上級者向けと言われたが、案外使えるのでは・・・？