1.
HTML/CSSを効率的にする
メタ言語とツールのアレコレ
クリ☆ステ vol.14

2.
自己紹介
久保知己
1985年生まれ。 HTML/CSSからCMSの
構築まで、様々なサイトの制作に携わり、
2014年にまぼろしに入社。
「Web Design KOJIKA17」を運営中

3.
めんどうくさい
効率化のキーワード

4.
「めんどうくさい」と思うこと
● 画像100枚をリサイズする
● コーディングの確認時に、更新ボタンを押す
● 同じようなコードを、ひたすらコピペ

5.
「めんどうくさい」と思うことは、
反復や繰り返し作業が多い。

6.
HTMLの「めんどうくさい」

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.
閉じタグのコメント
<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.
リストの作成
<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.
CSSの「めんどうくさい」

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.
グラデーションの構文 や 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.
Emmet

16.
Emmet
● Zen-codingの後継
● HTML/CSSを強力にサポート
● エディタの拡張機能

17.
Emmetの対応エディタ
● Sublime Text
● Atom
● Coda
● Komodo Edit
● Notepad++
● Brackets
● Adobe Dreamweaver
● Vim
● WebStorm
● PhpStorm
● Emacs

18.
Emmet デモ
● 略語の展開（Expand Abbreviation）
● フィルター（|c）
● 略語の包括処理（Wrap with Abbreviation）
● 四則演算（Evaluate Math Expression）
● 要素の削除（Remove Tag）
● 属性などの選択（Select Item）

19.
Emmetのその他の機能
● 画像サイズの取得 (エディタによる)
● 文字列の結合
● 空の要素や属性に、カーソル移動
● 選択範囲の拡張
● HTML/CSSの主要なメタ言語に対応

20.
HTML/CSSメタ言語
HTML/CSS Pre-processors

21.
メタ言語の種類
● HTML
○ Haml
○ Jade
○ Slim
● CSS
○ Sass
○ Less
○ Stylus

22.
メタ言語とは
メタ言語（メタげんご、英 Metalanguage）とはある言語について何らかの記述を
するための言語である。それだけでは具体的な利用に関する目的をもっておら
ず、特定のルールを加えることで具体的な応用として利用可能となる。
メタ言語 - Wikipedia

23.
CUI（Character User Interface）

24.
Task Runner - CUI
Grunt gulp

25.
GUI（Graphical User Interface）
CodeKit（Macのみ） Prepros App

26.
コンパイル
メタ言語
Pre-processors
HTML
CSS
GUI
Codekit
Prepros
CUI
Grunt
gulp

27.
コンパイル
メタ言語
Pre-processors
HTML
CSS
GUI
Codekit
Prepros
Codekit
Prepros
Grunt
gulp
CUI

28.
コンパイル
メタ言語
Pre-processors
HTML
CSS
GUI
Codekit
Prepros
CUI
Grunt
gulp

29.
画像と似てる
AI
PSD
PNG
JPEG
PNG
GIF
SVGCodekit
Prepros
illustrator
Photoshop
Fireworks

30.
HTMLメタ言語
HTML Pre-processors

31.
基本的なHTMLメタ言語の特徴
● インデントによる階層表現
● HTMLパーツや外部データの読み込み
● 変数やif文などの利用

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.
CSSメタ言語
CSS Pre-processors

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.
CSSメタ言語を使って効率化するなら
まずは「変数」を覚えよう

44.
変数 - Sass
$color: #f00;
.foo {
color: $color;
}
値変数

45.
変数を使った応用
● 一括で色の変更
● 色彩を操作する関数
● Mixins

46.
変数やMixinsの使い方を覚えたら、
ライブラリを使ってみよう

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 {
@include border-radius(4px);
}

50.
@include を付けるのが
ちょっとめんどうくさい

51.
普通のCSS3を書くだけで、
ベンダープリフィックスを
付けれたらいいのに。

52.
autoprefixer

53.
autoprefixer
Pre-processors
Sass
（Compass）
Less
Stylus
CSS Post-processors
cssmin
autoprefixer
csso
bless
Pleeease

54.
autoprefixer デモ

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
Task Runner
Grunt
gulp
GUI
CodeKit
Prepros

58.
Pleeease デモ

59.
ありがとうございました