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.

HTML/CSSを効率的にする メタ言語とツールのアレコレ

2,032 views

Published on

2014/09/17に話した内容のスライド。
Google Slideから移動

Published in: Technology
  • Download or read that Ebooks here ... ......................................................................................................................... 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 } ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Download or read that Ebooks here ... ......................................................................................................................... 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 } ......................................................................................................................... .........................................................................................................................
       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
  • 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 THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. 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

HTML/CSSを効率的にする メタ言語とツールのアレコレ

  1. 1. HTML/CSSを効率的にする メタ言語とツールのアレコレ クリ☆ステ vol.14
  2. 2. 自己紹介 久保知己 1985年生まれ。 HTML/CSSからCMSの 構築まで、様々なサイトの制作に携わり、 2014年にまぼろしに入社。 「Web Design KOJIKA17」を運営中
  3. 3. めんどうくさい 効率化のキーワード
  4. 4. 「めんどうくさい」と思うこと ● 画像100枚をリサイズする ● コーディングの確認時に、更新ボタンを押す ● 同じようなコードを、ひたすらコピペ
  5. 5. 「めんどうくさい」と思うことは、 反復や繰り返し作業が多い。
  6. 6. HTMLの「めんどうくさい」
  7. 7. 閉じタグ <div class="a"> <h1>Title</h1> <div class="b"> <h2>Subtitle</h2> <div class="body"><p></p></div> <div class="body"><p></p></div> </div> </div>
  8. 8. 閉じタグのコメント <div class="a"> <h1>Title</h1> <div class="b"> <h2>Subtitle</h2> <div class="body"><p></p></div><!-- /.body --> <div class="body"><p></p></div><!-- /.body --> </div><!-- /.b --> </div><!-- /.a -->
  9. 9. リストの作成 <ul class="nav"> <li><a href="/">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="concept.html">Concept</a></li> <li><a href="work.html">Work</a></li> <li><a href="contact.html">Contact</a></li> </ul>
  10. 10. CSSの「めんどうくさい」
  11. 11. セレクタ .header {} .header .logo {} .main h2 {} .main .body {} .main .body a {} .footer .nav {} .footer .copyright {}
  12. 12. プロパティや値が長い display: inline-block; display: table-cell; background-color: #fff; text-decoration: underline; letter-spacing: 0.1em; line-height: 1.4;
  13. 13. ベンダープリフィックス -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px;
  14. 14. グラデーションの構文 や Flexible Box background: gradient(linear, left top, left bottom, color-stop(0%, #000), color-stop(100%, #fff)); background: linear-gradient(top, #000, #fff); background: linear-gradient(to bottom, #000, #fff); display: box; display: flexbox; display: flex;
  15. 15. Emmet
  16. 16. Emmet ● Zen-codingの後継 ● HTML/CSSを強力にサポート ● エディタの拡張機能
  17. 17. Emmetの対応エディタ ● Sublime Text ● Atom ● Coda ● Komodo Edit ● Notepad++ ● Brackets ● Adobe Dreamweaver ● Vim ● WebStorm ● PhpStorm ● Emacs
  18. 18. Emmet デモ ● 略語の展開(Expand Abbreviation) ● フィルター(|c) ● 略語の包括処理(Wrap with Abbreviation) ● 四則演算(Evaluate Math Expression) ● 要素の削除(Remove Tag) ● 属性などの選択(Select Item)
  19. 19. Emmetのその他の機能 ● 画像サイズの取得 (エディタによる) ● 文字列の結合 ● 空の要素や属性に、カーソル移動 ● 選択範囲の拡張 ● HTML/CSSの主要なメタ言語に対応
  20. 20. HTML/CSSメタ言語 HTML/CSS Pre-processors
  21. 21. メタ言語の種類 ● HTML ○ Haml ○ Jade ○ Slim ● CSS ○ Sass ○ Less ○ Stylus
  22. 22. メタ言語とは メタ言語(メタげんご、英 Metalanguage)とはある言語について何らかの記述を するための言語である。それだけでは具体的な利用に関する目的をもっておら ず、特定のルールを加えることで具体的な応用として利用可能となる。 メタ言語 - Wikipedia
  23. 23. CUI(Character User Interface)
  24. 24. Task Runner - CUI Grunt gulp
  25. 25. GUI(Graphical User Interface) CodeKit(Macのみ) Prepros App
  26. 26. コンパイル メタ言語 Pre-processors HTML CSS GUI Codekit Prepros CUI Grunt gulp
  27. 27. コンパイル メタ言語 Pre-processors HTML CSS GUI Codekit Prepros Codekit Prepros Grunt gulp CUI
  28. 28. コンパイル メタ言語 Pre-processors HTML CSS GUI Codekit Prepros CUI Grunt gulp
  29. 29. 画像と似てる AI PSD PNG JPEG PNG GIF SVGCodekit Prepros illustrator Photoshop Fireworks
  30. 30. HTMLメタ言語 HTML Pre-processors
  31. 31. 基本的なHTMLメタ言語の特徴 ● インデントによる階層表現 ● HTMLパーツや外部データの読み込み ● 変数やif文などの利用
  32. 32. Syntax - Jade #wrap .main h1 タイトル p | Lorem ipsum dolor sit amet. br | Deleniti veniam cupiditate numquam pariatur. .side ul.nav li a(href="/") home
  33. 33. CSSメタ言語 CSS Pre-processors
  34. 34. 主要なCSSメタ言語 ● Sass (2007年) ● Less (2009年) ● Stylus (2011年)
  35. 35. Sassの記述 ● Sass記法 ● SCSS記法 (2010年) .foo { color: #f00; .demo { color: #fff; } } .foo color: #f00 .demo color: #fff
  36. 36. Sassの特徴 ● 変数 ● 入れ子 ● Mixins / Include ● Extend ● 制御構文(if, for, while) ● Function
  37. 37. 変数 - Sassの特徴 $color: #f00; $bg: #fff; .foo { color: $color; background: $bg; } .foo { color: #f00; background: #fff; } CSS
  38. 38. 入れ子 - Sassの特徴 .foo { color: #000; .demo { color: #f00; } } .foo { color: #000; } .foo .demo { color: #f00; } CSS
  39. 39. Mixins / Include - Sassの特徴 @mixin box($params) { -moz-box-sizing: $params; box-sizing: $params; } .foo { @include box(border-box); color: #000; } .foo { -moz-box-sizing: border-box; box-sizing: border-box; color: #000; } CSS
  40. 40. Extend - Sassの特徴 %btn { border-radius: 4px; color: #fff; } .btn-a { @extend %btn; background: #f00; } .btn-b { @extend %btn; background: #ff0; } .btn-a, .btn-b { border-radius: 4px; color: #fff; } .btn-a { background: #f00; } .btn-b { background: #ff0; } CSS
  41. 41. 制御構文(if, for, while) - Sassの特徴 $class-margin: true; @if($class-margin) { @for $i from 1 through 5 { $n: $i * 8px; .m-#{$n} { margin: $n; } } } .m-8 { margin: 8px; } .m-16 { margin: 16px; } .m-24 { margin: 24px; } .m-32 { margin: 32px; } .m-40 { margin: 40px; } CSS
  42. 42. Function - Sassの特徴 .foo { color: rgba(#f00, 0.4); color: lighten(#f00, 0.4); color: lighten(#f00, 10); color: darken(#f00, 10); } .foo { color: rgba(255, 0, 0, 0.4); color: #ff0202; color: #ff3333; color: #cc0000; } CSS
  43. 43. CSSメタ言語を使って効率化するなら まずは「変数」を覚えよう
  44. 44. 変数 - Sass $color: #f00; .foo {  color: $color; } 値変数
  45. 45. 変数を使った応用 ● 一括で色の変更 ● 色彩を操作する関数 ● Mixins
  46. 46. 変数やMixinsの使い方を覚えたら、 ライブラリを使ってみよう
  47. 47. Sass Framework & Mixin Library Compass Refills(Bourbon)
  48. 48. Compassの機能 ● リセットCSS @include global-reset(); ● ブラウザのサポート $graceful-usage-threshold: 0.1; ● CSSスプライトの生成...など
  49. 49. Compassの利用方法 @import 'compass'; .foo { @include border-radius(4px); }
  50. 50. @include を付けるのが ちょっとめんどうくさい
  51. 51. 普通のCSS3を書くだけで、 ベンダープリフィックスを 付けれたらいいのに。
  52. 52. autoprefixer
  53. 53. autoprefixer Pre-processors Sass (Compass) Less Stylus CSS Post-processors cssmin autoprefixer csso bless Pleeease
  54. 54. autoprefixer デモ
  55. 55. おさらい
  56. 56. 今回紹介したツール ● Emmet ● コンパイラ(CodeKit, Prepros...) ● HTMLメタ言語(Haml, Jade, Slim) ● CSSメタ言語(Sass, Less, Stylus) ● autoprefixer
  57. 57. Pre-processors Haml, Jade Slim Sass, Less Stylus HTML CSS Post-processors autoprefixer Pleeease Emmet Task Runner Grunt gulp GUI CodeKit Prepros
  58. 58. Pleeease デモ
  59. 59. ありがとうございました

×