日本語でCSSを書きたい

1ec68e792f99c958b8ffbd0aadaa182a?s=47 ikkou
February 12, 2016

 日本語でCSSを書きたい

Meguro.es#2 の飛び込みLTで発表した資料です。
http://meguroes.connpass.com/event/25018/

1ec68e792f99c958b8ffbd0aadaa182a?s=128

ikkou

February 12, 2016
Tweet

Transcript

  1. 2.

    ྫ͑͹͜Μͳײ͡Ͱ……ɻ .foo { ෯: 200px; ߴ͞: 200px; എܠ৭: ࡩ৭; }

    .bar { ৭: ҉ࠇ৭; ߦἧ͑: தԝدͤ; ଠ͞: ଠ͘; ߦߴ: 1.4; }
  2. 7.

    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Λੜ੒͢Δπʔ ϧͰ͢
  3. 9.

    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 ͷΑ͏ͳɺจࣈྻ Λஔ͖׵͑Δఔ౓ͷ಺༰Ͱ͋Ε͹ɺ͜ͷΑ͏ʹࢸ ۃ؆୯ʹ࡞Δ͜ͱ͕ग़དྷ·͢
  4. 10.

    ରԠ͍ͯ͠ΔϓϥύςΟͷྫ • എܠը૾ -> background-image • ৭ -> color •

    ߴ͞ -> height • ෯ -> width • ϑΥϯτ໊ -> font-family • ଠ͞ -> font-weight
  5. 11.

    ରԠ͍ͯ͠Δ஋ͷྫ • ࿨໊ 465छྨ!! • தԝدͤ -> center • ۉ౳ׂ෇

    -> justify • ଠ͍ | ଠ͘ -> bold and • !ॏཁ -> !important