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><!-- /.body -->

<div class="body"><p></p></div><!-- /.body -->

</div><!-- /.b -->

</div><!-- /.a -->

リストの作成

<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 Boxbackground: 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

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）

Task Runner - CUI

Grunt gulp

GUI（Graphical User Interface）

CodeKit（Macのみ） Prepros App

コンパイル

メタ言語Pre-processors

HTMLCSS

GUICodekitPrepros

CUIGruntgulp

コンパイル

メタ言語Pre-processors

HTMLCSS

GUI

CodekitPrepros

CodekitPrepros

Gruntgulp

CUI

コンパイル

メタ言語Pre-processors

HTMLCSS

GUICodekitPrepros

CUIGruntgulp

画像と似てる

AIPSDPNG

JPEGPNGGIFSVGCodekit

Prepros

illustratorPhotoshopFireworks

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

autoprefixer

Pre-processorsSass

（Compass）Less

Stylus

CSS Post-processorscssmin

autoprefixercssobless

Pleeease

autoprefixer デモ

おさらい

今回紹介したツール

● Emmet● コンパイラ（CodeKit, Prepros...）● HTMLメタ言語（Haml, Jade, Slim）● CSSメタ言語（Sass, Less, Stylus）● autoprefixer

Pre-processors

Haml, JadeSlim

Sass, LessStylus

HTMLCSS

Post-processors

autoprefixerPleeease

Emmet

Task Runner

Gruntgulp

GUI

CodeKitPrepros

Pleeease デモ

ありがとうございました