Download as PDF, PPTX
More Related Content
Similar to HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
- 1.
- 2.
- 3.
- 4. 「めんどうくさい」と思うこと ● 画像100枚をリサイズする ● コーディングの確認時に、更新ボタンを押す ●同じようなコードを、ひたすらコピペ
- 5.
- 6.
- 7. 閉じタグ <div class="a"> <h1>Title</h1> <div class="b"> <h2>Subtitle</h2> <divclass="body"><p></p></div> <div class="body"><p></p></div> </div> </div>
- 8. 閉じタグのコメント <div class="a"> <h1>Title</h1> <div class="b"> <h2>Subtitle</h2> <divclass="body"><p></p></div><!-- /.body --> <div class="body"><p></p></div><!-- /.body --> </div><!-- /.b --> </div><!-- /.a -->
- 9. リストの作成 <ul class="nav"> <li><a href="/">Home</a></li> <li><ahref="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.
- 11. セレクタ .header {} .header .logo{} .main h2 {} .main .body {} .main .body a {} .footer .nav {} .footer .copyright {}
- 12. プロパティや値が長い display: inline-block; display: table-cell; background-color:#fff; text-decoration: underline; letter-spacing: 0.1em; line-height: 1.4;
- 13. ベンダープリフィックス -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius:4px; -o-border-radius: 4px; border-radius: 4px;
- 14. グラデーションの構文 や FlexibleBox 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.
- 16.
- 17. Emmetの対応エディタ ● Sublime Text ●Atom ● Coda ● Komodo Edit ● Notepad++ ● Brackets ● Adobe Dreamweaver ● Vim ● WebStorm ● PhpStorm ● Emacs
- 18. Emmet デモ ● 略語の展開（ExpandAbbreviation） ● フィルター（|c） ● 略語の包括処理（Wrap with Abbreviation） ● 四則演算（Evaluate Math Expression） ● 要素の削除（Remove Tag） ● 属性などの選択（Select Item）
- 19. Emmetのその他の機能 ● 画像サイズの取得 (エディタによる) ●文字列の結合 ● 空の要素や属性に、カーソル移動 ● 選択範囲の拡張 ● HTML/CSSの主要なメタ言語に対応
- 20.
- 21. メタ言語の種類 ● HTML ○ Haml ○Jade ○ Slim ● CSS ○ Sass ○ Less ○ Stylus
- 22.
- 23.
- 24. Task Runner -CUI Grunt gulp
- 25. GUI（Graphical User Interface） CodeKit（Macのみ）Prepros App
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 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.
- 34. 主要なCSSメタ言語 ● Sass (2007年) ●Less (2009年) ● Stylus (2011年)
- 35. Sassの記述 ● Sass記法 ●SCSS記法 (2010年) .foo { color: #f00; .demo { color: #fff; } } .foo color: #f00 .demo color: #fff
- 36. Sassの特徴 ● 変数 ● 入れ子 ●Mixins / Include ● Extend ● 制御構文（if, for, while） ● Function
- 37. 変数 - Sassの特徴 $color:#f00; $bg: #fff; .foo { color: $color; background: $bg; } .foo { color: #f00; background: #fff; } CSS
- 38. 入れ子 - Sassの特徴 .foo{ color: #000; .demo { color: #f00; } } .foo { color: #000; } .foo .demo { color: #f00; } CSS
- 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. 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. 制御構文（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. 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.
- 44. 変数 - Sass $color:#f00; .foo { color: $color; } 値変数
- 45.
- 46.
- 47. Sass Framework &Mixin Library Compass Refills（Bourbon）
- 48. Compassの機能 ● リセットCSS @include global-reset(); ●ブラウザのサポート $graceful-usage-threshold: 0.1; ● CSSスプライトの生成...など
- 49. Compassの利用方法 @import 'compass'; .foo { @includeborder-radius(4px); }
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56. 今回紹介したツール ● Emmet ● コンパイラ（CodeKit,Prepros...） ● HTMLメタ言語（Haml, Jade, Slim） ● CSSメタ言語（Sass, Less, Stylus） ● autoprefixer
- 57. Pre-processors Haml, Jade Slim Sass, Less Stylus HTML CSS Post-processors autoprefixer Pleeease Emmet TaskRunner Grunt gulp GUI CodeKit Prepros
- 58.
- 59.