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.

マークアップの作業効率をあげよう!

1,199 views

Published on

2015年8月27日
第12回HTML5ビギナーズ登壇資料
マークアップの作業効率をあげよう!
登壇者 河島美津雄

Published in: Engineering
  • (Unlimited)....ACCESS WEBSITE Over for All Ebooks ................ 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 FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. 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 THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. 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

マークアップの作業効率をあげよう!

  1. 1. 第12回 HTML5ビギナーズ 目指せ脱初心者! 現場で使われている実践スキルとは? ハッシュタグ #html5jbg
  2. 2. html5jスタッフ html5j ビギナー部 部長 河島 美津雄
  3. 3. 活動理念 日本のWebのベースづくりに貢献する
  4. 4. マークアップの作業効率をあげよう!
  5. 5. マークアップ速度を上げる
  6. 6. Emmet すでにエディタやIDEに用意されいてそのまま使え たり、エディタにプラグインとしてインストール して使える。 ※自動補完ではない 省略記法を用いることでタイピングを少なくし、 マークアップを楽に、そして速くすることが できるツール。
  7. 7. 省略記法 → 展開 基本的な使い方
  8. 8. DEMO
  9. 9. 省略記法について http://docs.emmet.io/cheat-sheet/ チートシートを参考に
  10. 10. 展開について エディタ、IDEによって展開方法が違う。 「tab」とか「com(Ctrl)+E」 先ほどのデモは「tab」で展開していて、 たった3タイピング(shift + 1 + tab)で htmlのベースを記述することが出来ます。
  11. 11. さっきのはちょっと 唐突だったかもしれないので もう一度DEMO
  12. 12. 速いですよね
  13. 13. そう、書くだけは…ね…
  14. 14. でも、ただ書けば イイってもんじゃないですよね いろいろと考えないといけないことが ありますよね
  15. 15. DEMO
  16. 16. これ、他の箇所でも使ってそうな名前だな… ちょっと調べてみようかな
  17. 17. ∩ ^ω^) カタカタ /_ミつ / ̄ ̄ ̄/__ \/___/
  18. 18. ( ゚д゚) ページ数多くてヨクワカラン… / ヾ __L| / ̄ ̄ ̄/__ \/___/
  19. 19. 消したらやばいかもしれないし とりあえず置いとこ…
  20. 20. 逆に、リユースできるスタイルがわからないので 同じスタイルを書いてしまったり…
  21. 21. こうしてCSSファイルは どんどん大きくなっていきます
  22. 22. このような現象がどのような弊害をもたらすか
  23. 23. このような現象がどのような弊害をもたらすか ・運用コストの増加 ・パフォーマンスの低下
  24. 24. メンテナンス性の悪さ → 運用コストの増加
  25. 25. パフォーマンスの悪化 → 1つの機能価値を失っている ※パフォーマンスは機能です!
  26. 26. CSS設計を考えよう
  27. 27. flocss FLOCSS(フロックス)は、OOCSSやSMACSS 、BEM、SuitCSSのコンセプトを取り入れた、モ ジュラーなアプローチのためのCSS構成案です。 MCSSのレイヤー構成にも大きな影響を受けてい ます。 ※https://github.com/hiloki/flocssより 2015/8/27
  28. 28. ・どれがリユースできるのか ・スタイルの影響範囲がどこまでか ・どれが捨ててもよいスタイルか がわかりやすい
  29. 29. CSSメタ言語の活用
  30. 30. いろいろあります Sass, Less, Stylus, TASS, PCSSなど。変数が扱 えたり、ネスト(入れ子)で記述できたりなどさ まざまな便利な機能があります。 今回注目したいのは、ファイルを結合できるとい うこと。 これにより、目的のものが探しやすく、また追加 ・削除しやすい。 ※ディレクトリの構成が明確という前提です。
  31. 31. DEMO
  32. 32. あれ? @importって普通に CSSで使えんじゃね?
  33. 33. CSSファイルで@importを使うと パフォーマンスが悪化します。 運用と機能の両面を考えて マークアップしていきましょう。
  34. 34. ご静聴ありがとうございました

×