emmet 入門 〜htmlを卒業しよう〜
TRANSCRIPT
![Page 1: Emmet 入門 〜HTMLを卒業しよう〜](https://reader037.vdocuments.net/reader037/viewer/2022100305/55cf6140bb61ebbc5d8b46bd/html5/thumbnails/1.jpg)
Emmet 入門HTMLを卒業しよう( 1部 )
![Page 2: Emmet 入門 〜HTMLを卒業しよう〜](https://reader037.vdocuments.net/reader037/viewer/2022100305/55cf6140bb61ebbc5d8b46bd/html5/thumbnails/2.jpg)
Emmetとは?
![Page 3: Emmet 入門 〜HTMLを卒業しよう〜](https://reader037.vdocuments.net/reader037/viewer/2022100305/55cf6140bb61ebbc5d8b46bd/html5/thumbnails/3.jpg)
Emmetとは
少ないタイピングで HTML・CSSを生成できる テキストエディターのプラグインのこと。
![Page 4: Emmet 入門 〜HTMLを卒業しよう〜](https://reader037.vdocuments.net/reader037/viewer/2022100305/55cf6140bb61ebbc5d8b46bd/html5/thumbnails/4.jpg)
使用可能な テキストエディター
![Page 5: Emmet 入門 〜HTMLを卒業しよう〜](https://reader037.vdocuments.net/reader037/viewer/2022100305/55cf6140bb61ebbc5d8b46bd/html5/thumbnails/5.jpg)
http://emmet.io/download/
![Page 6: Emmet 入門 〜HTMLを卒業しよう〜](https://reader037.vdocuments.net/reader037/viewer/2022100305/55cf6140bb61ebbc5d8b46bd/html5/thumbnails/6.jpg)
実際に試してみよう
![Page 7: Emmet 入門 〜HTMLを卒業しよう〜](https://reader037.vdocuments.net/reader037/viewer/2022100305/55cf6140bb61ebbc5d8b46bd/html5/thumbnails/7.jpg)
http://jsdo.it/emmetが試せる
コードの共有サイト
![Page 8: Emmet 入門 〜HTMLを卒業しよう〜](https://reader037.vdocuments.net/reader037/viewer/2022100305/55cf6140bb61ebbc5d8b46bd/html5/thumbnails/8.jpg)
右上でログインしようtwitterでログインがおすすめ
![Page 9: Emmet 入門 〜HTMLを卒業しよう〜](https://reader037.vdocuments.net/reader037/viewer/2022100305/55cf6140bb61ebbc5d8b46bd/html5/thumbnails/9.jpg)
次は 左上で始めるStart coding をクリック
![Page 10: Emmet 入門 〜HTMLを卒業しよう〜](https://reader037.vdocuments.net/reader037/viewer/2022100305/55cf6140bb61ebbc5d8b46bd/html5/thumbnails/10.jpg)
これで準備おkHTMLタブを選択し全て消してください。
![Page 11: Emmet 入門 〜HTMLを卒業しよう〜](https://reader037.vdocuments.net/reader037/viewer/2022100305/55cf6140bb61ebbc5d8b46bd/html5/thumbnails/11.jpg)
HTML
![Page 12: Emmet 入門 〜HTMLを卒業しよう〜](https://reader037.vdocuments.net/reader037/viewer/2022100305/55cf6140bb61ebbc5d8b46bd/html5/thumbnails/12.jpg)
早速ひな形を 一瞬で作ろう
![Page 13: Emmet 入門 〜HTMLを卒業しよう〜](https://reader037.vdocuments.net/reader037/viewer/2022100305/55cf6140bb61ebbc5d8b46bd/html5/thumbnails/13.jpg)
!「 ! 」を入力して Tab キーを入力。
![Page 14: Emmet 入門 〜HTMLを卒業しよう〜](https://reader037.vdocuments.net/reader037/viewer/2022100305/55cf6140bb61ebbc5d8b46bd/html5/thumbnails/14.jpg)
これだけ あとTabキー
![Page 15: Emmet 入門 〜HTMLを卒業しよう〜](https://reader037.vdocuments.net/reader037/viewer/2022100305/55cf6140bb61ebbc5d8b46bd/html5/thumbnails/15.jpg)
ひな形が一瞬
![Page 16: Emmet 入門 〜HTMLを卒業しよう〜](https://reader037.vdocuments.net/reader037/viewer/2022100305/55cf6140bb61ebbc5d8b46bd/html5/thumbnails/16.jpg)
今回は Tab キー ですが、
テキストエディターだと Ctrl + E (win) Cmd + E (mac)
![Page 17: Emmet 入門 〜HTMLを卒業しよう〜](https://reader037.vdocuments.net/reader037/viewer/2022100305/55cf6140bb61ebbc5d8b46bd/html5/thumbnails/17.jpg)
h2「 h2 」を入力して Tab キーを入力。
![Page 18: Emmet 入門 〜HTMLを卒業しよう〜](https://reader037.vdocuments.net/reader037/viewer/2022100305/55cf6140bb61ebbc5d8b46bd/html5/thumbnails/18.jpg)
< >は不要
![Page 19: Emmet 入門 〜HTMLを卒業しよう〜](https://reader037.vdocuments.net/reader037/viewer/2022100305/55cf6140bb61ebbc5d8b46bd/html5/thumbnails/19.jpg)
p#btn{へぇ~}「 p#btn 」を入力して Tab キーを入力。
![Page 20: Emmet 入門 〜HTMLを卒業しよう〜](https://reader037.vdocuments.net/reader037/viewer/2022100305/55cf6140bb61ebbc5d8b46bd/html5/thumbnails/20.jpg)
id は『#』class は『.』
![Page 21: Emmet 入門 〜HTMLを卒業しよう〜](https://reader037.vdocuments.net/reader037/viewer/2022100305/55cf6140bb61ebbc5d8b46bd/html5/thumbnails/21.jpg)
ul>li*5>a[href=#]{$}これを押すと。。。
![Page 22: Emmet 入門 〜HTMLを卒業しよう〜](https://reader037.vdocuments.net/reader037/viewer/2022100305/55cf6140bb61ebbc5d8b46bd/html5/thumbnails/22.jpg)
ul>li*5>a[href=#]{$}
![Page 23: Emmet 入門 〜HTMLを卒業しよう〜](https://reader037.vdocuments.net/reader037/viewer/2022100305/55cf6140bb61ebbc5d8b46bd/html5/thumbnails/23.jpg)
ul>li*5>a[href=#]{$} > は 入れ子 *5 は 繰り返し [ ] は 属性 { } は 中身 $ は 連番
![Page 24: Emmet 入門 〜HTMLを卒業しよう〜](https://reader037.vdocuments.net/reader037/viewer/2022100305/55cf6140bb61ebbc5d8b46bd/html5/thumbnails/24.jpg)
CSS
![Page 25: Emmet 入門 〜HTMLを卒業しよう〜](https://reader037.vdocuments.net/reader037/viewer/2022100305/55cf6140bb61ebbc5d8b46bd/html5/thumbnails/25.jpg)
CSSのタブを選択
![Page 26: Emmet 入門 〜HTMLを卒業しよう〜](https://reader037.vdocuments.net/reader037/viewer/2022100305/55cf6140bb61ebbc5d8b46bd/html5/thumbnails/26.jpg)
h2{ ta:c }入力後 ta:cの後ろで Tabキー
![Page 27: Emmet 入門 〜HTMLを卒業しよう〜](https://reader037.vdocuments.net/reader037/viewer/2022100305/55cf6140bb61ebbc5d8b46bd/html5/thumbnails/27.jpg)
text-align: centerta:c
![Page 28: Emmet 入門 〜HTMLを卒業しよう〜](https://reader037.vdocuments.net/reader037/viewer/2022100305/55cf6140bb61ebbc5d8b46bd/html5/thumbnails/28.jpg)
#btn に以下を記述
![Page 29: Emmet 入門 〜HTMLを卒業しよう〜](https://reader037.vdocuments.net/reader037/viewer/2022100305/55cf6140bb61ebbc5d8b46bd/html5/thumbnails/29.jpg)
• tac
• bgc#aaa
• c#fff
• w150
• h150
• lh150px
• m0-auto
• bdrs50%
• bxsh0-10-0-#888
先ほどのta:c 『:』も省略可能
複数の値は『-』ハイフンで繋ぐ
![Page 30: Emmet 入門 〜HTMLを卒業しよう〜](https://reader037.vdocuments.net/reader037/viewer/2022100305/55cf6140bb61ebbc5d8b46bd/html5/thumbnails/30.jpg)
ベンダープレフィックスも展開
![Page 31: Emmet 入門 〜HTMLを卒業しよう〜](https://reader037.vdocuments.net/reader037/viewer/2022100305/55cf6140bb61ebbc5d8b46bd/html5/thumbnails/31.jpg)
こんなのができた?へぇ~ボタン
![Page 32: Emmet 入門 〜HTMLを卒業しよう〜](https://reader037.vdocuments.net/reader037/viewer/2022100305/55cf6140bb61ebbc5d8b46bd/html5/thumbnails/32.jpg)
http://docs.emmet.io/cheat-sheet/覚えれないよね?チートシートあります!
![Page 33: Emmet 入門 〜HTMLを卒業しよう〜](https://reader037.vdocuments.net/reader037/viewer/2022100305/55cf6140bb61ebbc5d8b46bd/html5/thumbnails/33.jpg)
blog.cheekpouch.comAtomエディターでのemmet設定など記事書いてるよ。
今回の復習用記事書く予定。
![Page 34: Emmet 入門 〜HTMLを卒業しよう〜](https://reader037.vdocuments.net/reader037/viewer/2022100305/55cf6140bb61ebbc5d8b46bd/html5/thumbnails/34.jpg)
ネットで共有するおFBでシェアーする予定 欲しい人は友達申請してね
![Page 35: Emmet 入門 〜HTMLを卒業しよう〜](https://reader037.vdocuments.net/reader037/viewer/2022100305/55cf6140bb61ebbc5d8b46bd/html5/thumbnails/35.jpg)
余った時間で 一杯いこうか。
Flickr: Matthew Coughlin
![Page 36: Emmet 入門 〜HTMLを卒業しよう〜](https://reader037.vdocuments.net/reader037/viewer/2022100305/55cf6140bb61ebbc5d8b46bd/html5/thumbnails/36.jpg)
ご静聴 ありがとうございました。