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

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

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

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

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

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

HTMLの「めんどうくさい」

閉じタグ
<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>

閉じタグのコメント
<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>

リストの作成
<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>

CSSの「めんどうくさい」

セレクタ
.header {}
.header .logo {}
.main h2 {}
.main .body {}
.main .body a {}
.footer .nav {}
.footer .copyright {}

プロパティや値が長い
display: inline-block;
display: table-cell;
background-color: #fff;
text-decoration: underline;
letter-spacing: 0.1em;
line-height: 1.4;

ベンダープリフィックス
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;

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

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

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

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

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

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

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

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

CUI（Character User Interface）

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

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

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

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

HTMLメタ言語
HTML Pre-processors

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

Syntax - Jade
#wrap
.main
h1 タイトル
p
| Lorem ipsum dolor sit amet.
br
| Deleniti veniam cupiditate numquam pariatur.
.side
ul.nav
li
a(href="/") home

CSSメタ言語
CSS Pre-processors

主要なCSSメタ言語
● Sass (2007年)
● Less (2009年)
● Stylus (2011年)

Sassの記述
● Sass記法 ● SCSS記法 (2010年)
.foo {
color: #f00;
.demo {
color: #fff;
}
}
.foo
color: #f00
.demo
color: #fff

Sassの特徴
● 変数
● 入れ子
● Mixins / Include
● Extend
● 制御構文（if, for, while）
● Function

変数 - Sassの特徴
$color: #f00;
$bg: #fff;
.foo {
color: $color;
background: $bg;
}
.foo {
color: #f00;
background: #fff;
}
CSS

入れ子 - Sassの特徴
.foo {
color: #000;
.demo {
color: #f00;
}
}
.foo {
color: #000;
}
.foo .demo {
color: #f00;
}
CSS

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

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

制御構文（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

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

CSSメタ言語を使って効率化するなら
まずは「変数」を覚えよう

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

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

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

Sass Framework & Mixin Library
Compass Refills（Bourbon）

Compassの機能
● リセットCSS
@include global-reset();
● ブラウザのサポート
$graceful-usage-threshold: 0.1;
● CSSスプライトの生成...など

Compassの利用方法
@import 'compass';
.foo {
@include border-radius(4px);
}

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

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

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

今回紹介したツール
● Emmet
● コンパイラ（CodeKit, Prepros...）
● HTMLメタ言語（Haml, Jade, Slim）
● CSSメタ言語（Sass, Less, Stylus）
● autoprefixer

Pre-processors
Haml, Jade
Slim
Sass, Less
Stylus
HTML
CSS
Post-processors
autoprefixer
Pleeease
Emmet
Task Runner
Grunt
gulp
GUI
CodeKit
Prepros

ありがとうございました

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (10)

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

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

More from 知己久保

More from 知己久保 (7)