Emmet 入門HTMLを卒業しよう( 1部 )

Emmetとは?

Emmetとは

少ないタイピングで HTML・CSSを生成できる テキストエディターのプラグインのこと。

使用可能な テキストエディター

http://emmet.io/download/

実際に試してみよう

http://jsdo.it/emmetが試せる

コードの共有サイト

右上でログインしようtwitterでログインがおすすめ

次は 左上で始めるStart coding をクリック

これで準備おkHTMLタブを選択し全て消してください。

HTML

早速ひな形を 一瞬で作ろう

!「 ! 」を入力して Tab キーを入力。

これだけ あとTabキー

ひな形が一瞬

今回は Tab キー ですが、

テキストエディターだと Ctrl + E (win) Cmd + E (mac)

h2「 h2 」を入力して Tab キーを入力。

< >は不要

p#btn{へぇ～}「 p#btn 」を入力して Tab キーを入力。

id は『#』class は『.』

ul>li*5>a[href=#]{$}これを押すと。。。

ul>li*5>a[href=#]{$}

ul>li*5>a[href=#]{$} > は 入れ子 *5 は 繰り返し [ ] は 属性 { } は 中身 $ は 連番

CSS

CSSのタブを選択

h2{ ta:c }入力後 ta:cの後ろで Tabキー

text-align: centerta:c

#btn に以下を記述

• tac

• bgc#aaa

• c#fff

• w150

• h150

• lh150px

• m0-auto

• bdrs50%

• bxsh0-10-0-#888

先ほどのta:c 『:』も省略可能

複数の値は『-』ハイフンで繋ぐ

ベンダープレフィックスも展開

こんなのができた？へぇ～ボタン

http://docs.emmet.io/cheat-sheet/覚えれないよね？チートシートあります！

blog.cheekpouch.comAtomエディターでのemmet設定など記事書いてるよ。

今回の復習用記事書く予定。

ネットで共有するおFBでシェアーする予定 欲しい人は友達申請してね

余った時間で 一杯いこうか。

Flickr: Matthew Coughlin

ご静聴 ありがとうございました。