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
450
日本語で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.4k
Expectations for the Immersive Web: Insights from the WebXR Japanese Community
ikkou
0
62
WebXRの現状確認 2023 Autumn / Check the current status of WebXR 2023 Autumn
ikkou
3
2.2k
あなたの知らないARの可能性を空間レベルで拡げるVPSの世界 / The World of VPS
ikkou
1
4.8k
WebXR 最前線 2022 ~ メタバースとWeb3を添えて / WebXR Frontline 2022
ikkou
1
1.7k
メタバースの激流とXR業界のイマ / The Metaverse Torrent and the XR Industry Today
ikkou
0
1.9k
Recent Feature Topics on WebAR - 2021-06-06
ikkou
0
72
iOSではじめるWebAR 2021 - iOSDC Japan 2021 / webar-in-ios-2021
ikkou
1
4.2k
あなたの知らないSafariのExperimental Featuresの世界 - iOSDC Japan 2021 / Experimental Features in Safari You Didn't Know
ikkou
2
7.4k
Other Decks in Programming
See All in Programming
Honoとフロントエンドの 型安全性について
yodaka
7
1.5k
color-scheme: light dark; を完全に理解する
uhyo
7
490
ソフトウェアエンジニアの成長
masuda220
PRO
12
2.1k
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.2k
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
150
ML.NETで始める機械学習
ymd65536
0
230
kintone開発を効率化するためにチームで試した施策とその結果を大放出!
oguemon
0
150
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
310
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
830
sappoRo.R #12 初心者セッション
kosugitti
0
280
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
330
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
40
16k
Featured
See All Featured
Being A Developer After 40
akosma
89
590k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
The World Runs on Bad Software
bkeepers
PRO
67
11k
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ϥΠϑΛ!!