ドットインストールで勉強したことをメモ。
あと1周はしようかなと思っています。
最近HtmlとCSSばっか打っているいて、コーダーに興味がでてきました。
しかし、まだページを仕上げる速度が遅くて悩んでいました。
私はvimが使えるので、打つ速度はまぁまぁ早いと思うですが、いまいち組み立て方だったり、タグの打ち間違えで出戻りすることが多く。どうにか最適化できないかなぁーと思って、こいつに出会いました。
Emmet — the essential toolkit for web-developers
htmlとcssのコーディングを効率化することができるエディタのプラグインです。
しかし公式ドキュメントは英語なので、使い方はぱっと見ではわからないかも。
そこでドットインストール。
emmet で検索した結果 - プログラミングならドットインストール
動画で説明してくれているのでめちゃめちゃ捗ります。
というわけで、まずは１周したので復習します。
復習
!
ただのビックリマークです。そのあとに「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> <!-- わかりにくいので２つに増やす 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>
あとは忘れちまった（´・ω・｀）
次に記載します。
