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
日本語でCSSを書きたい
Search
ikkou
February 12, 2016
Programming
0
460
日本語でCSSを書きたい
Meguro.es#2 の飛び込みLTで発表した資料です。
http://meguroes.connpass.com/event/25018/
ikkou
February 12, 2016
Tweet
Share
More Decks by ikkou
See All by ikkou
GitHub Copilot全社導入のその後とGitHub×ZOZOTOWNコラボレーションの舞台裏 / GitHub ZOZOTOWN
ikkou
0
1.8k
Expectations for the Immersive Web: Insights from the WebXR Japanese Community
ikkou
0
150
WebXRの現状確認 2023 Autumn / Check the current status of WebXR 2023 Autumn
ikkou
3
2.3k
あなたの知らないARの可能性を空間レベルで拡げるVPSの世界 / The World of VPS
ikkou
1
5.3k
WebXR 最前線 2022 ~ メタバースとWeb3を添えて / WebXR Frontline 2022
ikkou
1
1.8k
メタバースの激流とXR業界のイマ / The Metaverse Torrent and the XR Industry Today
ikkou
0
2k
Recent Feature Topics on WebAR - 2021-06-06
ikkou
0
94
iOSではじめるWebAR 2021 - iOSDC Japan 2021 / webar-in-ios-2021
ikkou
1
4.5k
あなたの知らないSafariのExperimental Featuresの世界 - iOSDC Japan 2021 / Experimental Features in Safari You Didn't Know
ikkou
2
7.8k
Other Decks in Programming
See All in Programming
The state patternの実践 個人開発で培ったpractice集
miyanokomiya
0
150
エンジニアのための”最低限いい感じ”デザイン入門
shunshobon
0
130
ワープロって実は計算機で
pepepper
2
1.4k
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
110
一人でAIプロダクトを作るための工夫 〜技術選定・開発プロセス編〜 / I want AI to work harder
rkaga
13
2.8k
兎に角、コードレビュー
mitohato14
0
150
KessokuでDIでもgoroutineを活用する / Go Connect #6
mazrean
0
120
Namespace and Its Future
tagomoris
6
540
実践!App Intents対応
yuukiw00w
1
360
tool ディレクティブを導入してみた感想
sgash708
1
150
testingを眺める
matumoto
1
110
CSC305 Summer Lecture 12
javiergs
PRO
0
130
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
Scaling GitHub
holman
462
140k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Automating Front-end Workflow
addyosmani
1370
200k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
KATA
mclloyd
32
14k
Unsuck your backbone
ammeep
671
58k
Transcript
ຊޠͰCSSΛॻ͖͍ͨ Meguro.es#2 in Drecom 2016/02/10
ྫ͑͜Μͳײ͡Ͱ……ɻ .foo { ෯: 200px; ߴ͞: 200px; എܠ৭: ࡩ৭; }
.bar { ৭: ҉ࠇ৭; ߦἧ͑: தԝدͤ; ଠ͞: ଠ͘; ߦߴ: 1.4; }
postcss-japanese-stylesheets
҆৺͍ͯͩ͘͠͞npmͷͰ͢
whoami • @ikkou • g1983ers • Drecom • Front-end Engineer?
• Meguro.esͷதͷਓ
postcss-japanese-stylesheets • PostCSS ͷϓϥάΠϯͱͯ͠ಈ࡞͠·͢ • Ұ෦ͷϓϩύςΟͱΛຊޠͰهड़Ͱ͖·͢ • ಛʹ৭ʹྗΛೖΕ͍ͯ·͢ • e.g.
҉ࠇ৭, ۚࢳ৭, ৭
PostCSS PostCSS is a tool for transforming styles with JS
plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more. ฏͨ͘ݴ͑ɺPostCSS ɺJavaScriptͷϓϥά ΠϯΛࣗ༝ʹΈ߹ΘͤͯɺCSSΛੜ͢Δπʔ ϧͰ͢
PostCSSͷϓϥάΠϯ ͨ͘͞Μ͋Γ·͢ʂ https://github.com/postcss/postcss/blob/ master/docs/plugins.md ͪͳΈʹ postcss-japanese-stylesheets ɺΧς ΰϦͱͯ͠ Fun ʹଐ͢ΔωλཁૉΛؚΉϓϥά
ΠϯͰ͢ɻ
PostCSSϓϥάΠϯͷ࡞Γํ var postcss = require('postcss'); module.exports = postcss.plugin('postcss-japanese-stylesheets', function (opts)
{ opts = opts || {}; return function (css) { css.eachDecl(function transformDecl(decl) { decl.prop = decl.prop.replace('৭', 'color'); }); }; }); postcss-japanese-stylesheets ͷΑ͏ͳɺจࣈྻ Λஔ͖͑Δఔͷ༰Ͱ͋Εɺ͜ͷΑ͏ʹࢸ ۃ؆୯ʹ࡞Δ͜ͱ͕ग़དྷ·͢
ରԠ͍ͯ͠ΔϓϥύςΟͷྫ • എܠը૾ -> background-image • ৭ -> color •
ߴ͞ -> height • ෯ -> width • ϑΥϯτ໊ -> font-family • ଠ͞ -> font-weight
ରԠ͍ͯ͠Δͷྫ • ໊ 465छྨ!! • தԝدͤ -> center • ۉׂ
-> justify • ଠ͍ | ଠ͘ -> bold and • !ॏཁ -> !important
PostCSSͷϓϥάΠϯ؆୯ʹ࡞Ε·͢
ٸ͖ΐɺࠓ࡞ͬͯࠓެ։͠·ͨ͠
npmͷެ։͋͘͠Γ·ͤΜ
ָ͍͠PostCSSϥΠϑΛ!!