html/cssを効率的にする メタ言語とツールのアレコレ
TRANSCRIPT
![Page 1: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/1.jpg)
HTML/CSSを効率的にするメタ言語とツールのアレコレ
クリ☆ステ vol.14
![Page 2: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/2.jpg)
自己紹介
久保知己
1985年生まれ。 HTML/CSSからCMSの構築まで、様々なサイトの制作に携わり、
2014年にまぼろしに入社。
「Web Design KOJIKA17」を運営中
![Page 3: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/3.jpg)
めんどうくさい
効率化のキーワード
![Page 4: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/4.jpg)
「めんどうくさい」と思うこと
● 画像100枚をリサイズする
● コーディングの確認時に、更新ボタンを押す
● 同じようなコードを、ひたすらコピペ
![Page 5: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/5.jpg)
「めんどうくさい」と思うことは、反復や繰り返し作業が多い。
![Page 6: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/6.jpg)
HTMLの「めんどうくさい」
![Page 7: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/7.jpg)
閉じタグ
<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>
![Page 8: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/8.jpg)
閉じタグのコメント
<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 -->
![Page 9: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/9.jpg)
リストの作成
<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>
![Page 10: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/10.jpg)
CSSの「めんどうくさい」
![Page 11: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/11.jpg)
セレクタ
.header {}
.header .logo {}
.main h2 {}
.main .body {}
.main .body a {}
.footer .nav {}
.footer .copyright {}
![Page 12: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/12.jpg)
プロパティや値が長い
display: inline-block;
display: table-cell;
background-color: #fff;
text-decoration: underline;
letter-spacing: 0.1em;
line-height: 1.4;
![Page 13: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/13.jpg)
ベンダープリフィックス
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
![Page 14: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/14.jpg)
グラデーションの構文 や 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;
![Page 15: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/15.jpg)
Emmet
![Page 16: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/16.jpg)
Emmet● Zen-codingの後継
● HTML/CSSを強力にサポート
● エディタの拡張機能
![Page 17: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/17.jpg)
Emmetの対応エディタ
● Sublime Text● Atom● Coda● Komodo Edit● Notepad++● Brackets● Adobe Dreamweaver
● Vim● WebStorm● PhpStorm● Emacs
![Page 18: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/18.jpg)
Emmet デモ
● 略語の展開(Expand Abbreviation)
● フィルター(|c)
● 略語の包括処理(Wrap with Abbreviation)
● 四則演算(Evaluate Math Expression)
● 要素の削除(Remove Tag)
● 属性などの選択(Select Item)
![Page 19: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/19.jpg)
Emmetのその他の機能
● 画像サイズの取得 (エディタによる)
● 文字列の結合
● 空の要素や属性に、カーソル移動
● 選択範囲の拡張
● HTML/CSSの主要なメタ言語に対応
![Page 20: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/20.jpg)
HTML/CSSメタ言語HTML/CSS Pre-processors
![Page 21: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/21.jpg)
メタ言語の種類
● HTML
○ Haml
○ Jade
○ Slim
● CSS
○ Sass
○ Less
○ Stylus
![Page 22: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/22.jpg)
メタ言語とは
メタ言語(メタげんご、英 Metalanguage)とはある言語について何らかの記述を
するための言語である。それだけでは具体的な利用に関する目的をもっておら
ず、特定のルールを加えることで具体的な応用として利用可能となる。
メタ言語 - Wikipedia
![Page 23: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/23.jpg)
CUI(Character User Interface)
![Page 24: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/24.jpg)
Task Runner - CUI
Grunt gulp
![Page 25: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/25.jpg)
GUI(Graphical User Interface)
CodeKit(Macのみ) Prepros App
![Page 26: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/26.jpg)
コンパイル
メタ言語Pre-processors
HTMLCSS
GUICodekitPrepros
CUIGruntgulp
![Page 27: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/27.jpg)
コンパイル
メタ言語Pre-processors
HTMLCSS
GUI
CodekitPrepros
CodekitPrepros
Gruntgulp
CUI
![Page 28: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/28.jpg)
コンパイル
メタ言語Pre-processors
HTMLCSS
GUICodekitPrepros
CUIGruntgulp
![Page 29: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/29.jpg)
画像と似てる
AIPSDPNG
JPEGPNGGIFSVGCodekit
Prepros
illustratorPhotoshopFireworks
![Page 30: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/30.jpg)
HTMLメタ言語HTML Pre-processors
![Page 31: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/31.jpg)
基本的なHTMLメタ言語の特徴
● インデントによる階層表現
● HTMLパーツや外部データの読み込み
● 変数やif文などの利用
![Page 32: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/32.jpg)
Syntax - Jade#wrap .main h1 タイトル p | Lorem ipsum dolor sit amet. br | Deleniti veniam cupiditate numquam pariatur. .side ul.nav li a(href="/") home
![Page 33: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/33.jpg)
CSSメタ言語CSS Pre-processors
![Page 34: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/34.jpg)
主要なCSSメタ言語
● Sass (2007年)
● Less (2009年)
● Stylus (2011年)
![Page 35: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/35.jpg)
Sassの記述
● Sass記法 ● SCSS記法 (2010年)
.foo {
color: #f00;
.demo {
color: #fff;
}
}
.foo
color: #f00
.demo
color: #fff
![Page 36: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/36.jpg)
Sassの特徴
● 変数
● 入れ子
● Mixins / Include● Extend● 制御構文(if, for, while)● Function
![Page 37: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/37.jpg)
変数 - Sassの特徴
$color: #f00;
$bg: #fff;
.foo {
color: $color;
background: $bg;
}
.foo {
color: #f00;
background: #fff;
}
CSS
![Page 38: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/38.jpg)
入れ子 - Sassの特徴
.foo {
color: #000;
.demo {
color: #f00;
}
}
.foo {
color: #000;
}
.foo .demo {
color: #f00;
}
CSS
![Page 39: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/39.jpg)
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
![Page 40: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/40.jpg)
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
![Page 41: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/41.jpg)
制御構文(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
![Page 42: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/42.jpg)
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
![Page 43: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/43.jpg)
CSSメタ言語を使って効率化するならまずは「変数」を覚えよう
![Page 44: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/44.jpg)
変数 - Sass
$color: #f00;
.foo {
color: $color;
}
値変数
![Page 45: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/45.jpg)
変数を使った応用
● 一括で色の変更
● 色彩を操作する関数
● Mixins
![Page 46: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/46.jpg)
変数やMixinsの使い方を覚えたら、ライブラリを使ってみよう
![Page 47: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/47.jpg)
Sass Framework & Mixin Library
Compass Refills(Bourbon)
![Page 48: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/48.jpg)
Compassの機能
● リセットCSS@include global-reset();
● ブラウザのサポート$graceful-usage-threshold: 0.1;
● CSSスプライトの生成...など
![Page 49: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/49.jpg)
Compassの利用方法
@import 'compass';
.foo {
@include border-radius(4px);
}
![Page 50: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/50.jpg)
@include を付けるのがちょっとめんどうくさい
![Page 51: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/51.jpg)
普通のCSS3を書くだけで、ベンダープリフィックスを付けれたらいいのに。
![Page 52: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/52.jpg)
autoprefixer
![Page 53: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/53.jpg)
autoprefixer
Pre-processorsSass
(Compass)Less
Stylus
CSS Post-processorscssmin
autoprefixercssobless
Pleeease
![Page 54: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/54.jpg)
autoprefixer デモ
![Page 55: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/55.jpg)
おさらい
![Page 56: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/56.jpg)
今回紹介したツール
● Emmet● コンパイラ(CodeKit, Prepros...)● HTMLメタ言語(Haml, Jade, Slim)● CSSメタ言語(Sass, Less, Stylus)● autoprefixer
![Page 57: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/57.jpg)
Pre-processors
Haml, JadeSlim
Sass, LessStylus
HTMLCSS
Post-processors
autoprefixerPleeease
Emmet
Task Runner
Gruntgulp
GUI
CodeKitPrepros
![Page 58: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/58.jpg)
Pleeease デモ
![Page 59: HTML/CSSを効率的にする メタ言語とツールのアレコレ](https://reader031.vdocuments.site/reader031/viewer/2022021814/58f1bcd81a28ab813b8b45d7/html5/thumbnails/59.jpg)
ありがとうございました