Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Emmet 入門 〜HTMLを卒業しよう〜

517 views

Published on

『人に何かを教える』というお題の授業で使用する資料

HTMLベタ打ちは終わりにしようをテーマに
Emmet編を担当しその時の資料です。
Emmetを使いこなすというより興味を持ってもらう
を目標に構成しました。

  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Emmet 入門 〜HTMLを卒業しよう〜

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

×