Download - 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 デモ
ありがとうございました