Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ウラカタ勉強会 2016年11月度 PostCSS
Search
Urakata
December 01, 2016
Technology
0
220
ウラカタ勉強会 2016年11月度 PostCSS
Urakata
December 01, 2016
Tweet
Share
More Decks by Urakata
See All by Urakata
ウラカタ勉強会 2017年2月度 Vagrantによるローカル仮想環境の構築
urakata
2
300
ウラカタ勉強会 2017年1月度 最近のWebから学ぶデザイン術
urakata
0
210
ウラカタ勉強会 2016年11月度 AdminLTEの有料テンプレートが良かった
urakata
0
310
ウラカタ勉強会 2016年10月度 カタラウ勉強会
urakata
0
180
ウラカタ勉強会 2016年9月度 静的サイトジェネレータを 利用してみよう!
urakata
0
150
ウラカタ勉強会 2016年7月度 事例から学ぶ!Sass大解剖
urakata
0
350
Other Decks in Technology
See All in Technology
「れきちず」のこれまでとこれから - 誰にでもわかりやすい歴史地図を目指して / FOSS4G 2025 Japan
hjmkth
1
320
Claude Code Subagents 再入門 ~cc-sddの実装で学んだこと~
gotalab555
10
16k
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
8.8k
物体検出モデルでシイタケの収穫時期を自動判定してみた。 #devio2025
lamaglama39
0
230
初めてのDatabricks Apps開発
taka_aki
1
140
ガバメントクラウドの概要と自治体事例(名古屋市)
techniczna
3
240
FinOps について (ちょっと) 本気出して考えてみた
skmkzyk
0
110
防災デジタル分野での官民共創の取り組み (2)DIT/CCとD-CERTについて
ditccsugii
0
310
技育祭2025【秋】 企業ピッチ/登壇資料(高橋 悟生)
hacobu
PRO
0
110
エンタメとAIのための3Dパラレルワールド構築(GPU UNITE 2025 特別講演)
pfn
PRO
0
520
AI時代におけるデータの重要性 ~データマネジメントの第一歩~
ryoichi_ota
0
700
今この時代に技術とどう向き合うべきか
gree_tech
PRO
2
2k
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
303
21k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Unsuck your backbone
ammeep
671
58k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
How to Think Like a Performance Engineer
csswizardry
27
2k
GraphQLとの向き合い方2022年版
quramy
49
14k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Mobile First: as difficult as doing things right
swwweet
225
10k
The Pragmatic Product Professional
lauravandoore
36
6.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Transcript
None
デザイナーの中嶋です。 制作会社・フリーを経て 2008年に名案企画に入社。 ただひたすらデザインと マークアップをしてます。 最近、驚いた事 → KABAちゃんの変貌ぶり 自己紹介
None
錬金術に関係あり?
アジェンダ 1. PostCSSとは 2. PostCSSの特長 3. PostCSSを使う 4. おすすめプラグイン 5.
PostCssの現実
PostCSSとは
http://postcss.org/
A tool for transforming CSS with JavaScript JavaScriptでCSSを変換するツール CSS JS
NEW CSS
SassとPostCSSの違い • 変数 • Mixin • 四則演算 • ループ •
ネスト • Extend • 関数 • パーシャル etc... パッケージ化している
変数 SassとPostCSSの違い etc... パーシャル Mixin ネスト 四則演算 ループ 関数 必要なプラグインを選ぶ
PostCSSは • PostCSS本体だけでは、CSSに変更を加える ことはできない。 • プラグインは機能ごとに細かく分けられている • 「プラグイン」を組み合わせて使用する
PostCSSの特長
• カスタマイズ性が高い • パフォーマンスに優れている • 次世代CSSが使える
PostCSSのプラグイン • ネスト • 変数 • 四則演算 • Mixin、Extend •
ループ、条件分岐 • パーシャル • 画像サイズ取得 • 独自プロパティ • ベンダープリフィックス • プロパティの並び替え • flexboxのバグ修正 • フォールバック • コードチェック • 圧縮 • メディアクエリをまとめる • 出力コードの整形 好みのプラグインを組み合わせて使う
PostCSSのプラグイン http://postcss.parts/
PostCSSのパフォーマンス
次世代CSSが利用できる W3Cで仕様策定中の次世代 CSS をパッケージ化
PostCSSを使う
PostCSSのコンパイル コンパイルにはタスクランナーが必要
インストール $ npm i gulp-postcss --save-dev
gulpfile.js var gulp = require('gulp'); var postcss = require('gulp-postcss'); gulp.task("css",
function() { return gulp.src('./src/style.css') .pipe(postcss([])) .pipe(gulp.dest('./css')) });
プラグインを追加する var gulp = require('gulp'); var postcss = require('gulp-postcss'); gulp.task("css",
function() { return gulp.src('./src/style.css') .pipe(postcss([ require('cssnano'), require('autoprefixer')({ browsers: ['last 2 versions'] }) ])) .pipe(gulp.dest('./css')) });
おすすめプラグイン
Autoprefixer gulp.task("css", function() { return gulp.src('./src/style.css') .pipe(postcss([ require('autoprefixer')({ browsers: ['last
2 versions'] }) ])) .pipe(gulp.dest('./css')) }); ベンダープレフィックスを追加するプラグイン npm install --save-dev postcss-cssnext
cssnext npm install --save-dev postcss-cssnext 最新のCSS構文が使えるプラグイン • 変数 • カスタムセレクター
• カラー関数 etc...
CSS MQPacker メディアクエリをまとめてくれるプラグイン npm install --save-dev css-mqpacker
CSS MQPacker
PostCSSの現実
• Sassがデファクトスタンダード • Sassの拡張として使うのが良い • 次世代CSSは使い方に注意が必要
まとめ
• PostCSSはカスタマイズして使うもの • 次世代CSSは使い方に注意が必要 • パフォーマンスに優れているので、大型案件の 載せ替えにはメリットがありそう • 無理にSass移行は考えず、便利プラグインのみ を使用するのが現実的
おしまい。 ありがとうございました。