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の使い方

611 views

Published on

Emmetの要点をまとめた、講義用資料です。

Published in: Technology
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ...................................ALL FOR EBOOKS................................................. Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Emmetの使い方

  1. 1. Emmetを使おう みんなが大好きEmmet
  2. 2. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 2 Emmetとは • Emmetの特徴 – HTML・CSSの省略記法で簡単に入力 – ショートカットキーのように使える • 対応エディタ – Dreamweaver CC 2015(ネイティブサポート) – Brackets(拡張機能→’Emmet’を追加) – Sublime Text 3(Package→’Emmet’を追加) – Atom(プラグイン→’Emmet’を追加)
  3. 3. Emmetの 記述方法
  4. 4. まずはHTML
  5. 5. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 5 Emmet記述方法 • ! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> | </body> </html> Tabキー
  6. 6. 基本は 要素名Tabキー
  7. 7. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 7 要素名Tab • h1 • link • img • input Tabキー <h1>|</h1> Tabキー <link rel="stylesheet" href="|" /> Tabキー <img src="|" alt="" /> Tabキー <input type="text" />
  8. 8. 要素:属性Tabキー
  9. 9. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 9 要素:属性Tab • script:src • input:r • form:post Tabキー <script src="|"></script> Tabキー Tabキー <form action="|" method="post"></form> <input type="radio" name="|" >
  10. 10. id/classを設定
  11. 11. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 11 id/classの指定 • #header • .title • p.c1.c2.c3 Tabキー <div id="header">|</div> Tabキー Tabキー <p class="c1 c2 c3">|</p> <div class="title">|</div>
  12. 12. 複数要素を設定
  13. 13. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 13 複数要素の基本 • +は要素の併記 div+p • >は子孫要素 ul>li • *は複数要素 li*2 Tabキー <div></div> <p></p> Tabキー <ul> <li></li> </ul> Tabキー <li></li> <li></li>
  14. 14. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 14 複数要素 • nav>ul>li Tabキー <nav> <ul> <li></li> </ul> </nav>
  15. 15. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 15 複数要素 • ul>li*5>a Tabキー <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul>
  16. 16. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 16 複数要素 • ul>li.item$*5 Tabキー <ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> </ul>
  17. 17. 次はCSS
  18. 18. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 18 要素名Tab • m • mt • bd • bd+ Tabキー margin:|; Tabキー margin-top:|; Tabキー border:|; Tabキー border:1px solid #000;
  19. 19. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 19 要素名Tab • bxz • pos • trf • ta:c Tabキー box-sizing:border-box; Tabキー position:relative; Tabキー transform:|; Tabキー text-align:center;
  20. 20. 詳しくは cheat-sheetを参考に

×