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
130
WebXRの現状確認 2023 Autumn / Check the current status of WebXR 2023 Autumn
ikkou
3
2.3k
あなたの知らないARの可能性を空間レベルで拡げるVPSの世界 / The World of VPS
ikkou
1
5.2k
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
92
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
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
210
NEWT Backend Evolution
xpromx
1
160
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
2
220
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
240
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
2
200
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
3
510
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
660
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
190
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
8
360
What's new in Adaptive Android development
fornewid
0
120
Understanding Kotlin Multiplatform
l2hyunwoo
0
230
AI Ramen Fight
yusukebe
0
120
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Embracing the Ebb and Flow
colly
86
4.8k
BBQ
matthewcrist
89
9.8k
It's Worth the Effort
3n
185
28k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Typedesign – Prime Four
hannesfritz
42
2.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
A Modern Web Designer's Workflow
chriscoyier
695
190k
The Cult of Friendly URLs
andyhume
79
6.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
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ϥΠϑΛ!!