初心者のEmmetの使い方

コーディングでのEmmetの使い方について

初心者のはるさんがよく使いそうなEmmetの使用方法だけ、分かりやすいように自分なりの解釈でメモしています。物事を覚えるには自分なりの解釈で理解することが

記憶の定着を助けるらしいといつかに何かで読みましたので^_^

Emmetを使ってコーディングが早くなるとサイトの制作が一段と楽しくなるんだろうなぁ

①はるさんでも覚えれそうなEmmet

例、ul.list>li.item*4

emmetについての画像

ul.(class名)・・・ulに .(ピリオド)を後ろにclass名をつけてをつける

> ・・・右に置いたものを左の中に入れることができる

*(必要な数)・・・*(アスタリスク)の隣に必要な数を記述する

+・・・横並びで置きたい時に使う

②Divにクラスつけて中にh2とpを横並びspanをpの中に入れたい時

div.ringo*3>h2+p>span

emmetについての画像

作業が効率化できますね!!でもEmmetを考える時間もとるし、、ミスったら二度手間、笑

慣れたらかっこいいし、何より感動です。学校の時にテラパッド使って全部打ってたこと考えるとマジですげえってなります。

Liのクラスを連番にしたい時は$を使う

emmetについての画像

慣れるまではコーディング頑張らないとなと思います。
スラスラ打てたらとっても楽しくて気持ちいんだろうなと思うのでこれからもEmmetをうまく取り入れながらコツコツとコーディングをやっていこうと思うのでした。

他にもwebデザインに関することをメモのように忘れないようにwordpressに書いていこうと思います。興味があったら見て見てください(^ ^)

  • X

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA