css2020.yml

locale: ja-JP
translations:
  ###########################################################################
  # Introduction
  ###########################################################################

  - key: introduction.css2020
    t: |
      <span class="first-letter">忘</span>れましょう、CSSについて知っているすべてを。忘れられなくても、多くのことを見直す準備はしておきましょう。あなたが私と同じく、10年以上CSSを書いているひとなら、2020年のCSSは私たちが慣れ親しんだものとまったくもって違うものに見えるでしょう。

      ブレークポイントの代わりにCSS Gridを使えば、様々はビューポートの大きさに対応するレスポンシブなレイアウトを、ずっと短いコードで書けます。グローバルなスタイルシートではなく、CSS-in-JSを使ってコンポーネントとスタイルを同じ場所に置くと、テーマのカスタマイズをしやすいデザインシステムを実現できます。

      ほとんどの人にとって、Tailwind CSSは突然現れたものだったでしょう。そのユーティリティファーストなCSSという思想により、セマンティックなクラス名をつけようというこれまでの教えを考え直させました。

      これらの変化は、意気がったブログ記事や荒れたツイートを生み出してしまうかもしれません。このサイトの提供するデータや、トレンドのハイライトが、来年も慌ただしくなるであろうCSS界を進む手助けになることを祈っています。

      ### チーム

      State of CSSは、私たちが開発・管理しています。

      - [Sacha Greif](https://twitter.com/sachagreif): デザイン、ライティング、コーディング
      - [Raphaël Benitte](https://twitter.com/benitteraphael): データ分析、ビジュアリゼーション

      ### データのダウンロード

      [アンケートの回答データ（JSON）をダウンロードできます](https://www.kaggle.com/sachag/state-of-css)。何か新しいビジュアリゼーションをつくったら、ぜひ教えてください。

      ### そのほかのリンク

      - [State of CSSホームページ](https://stateofcss.com)
      - [State of JS](https://stateofjs.com)

      ### Thanks

      アンケートの設計を手伝ってくれたみなさん、とくに[Chen Hui-Jing](http://chenhuijing.com/)、[Philip Jägenstedt](https://blog.foolip.org/)、[Adam Argyle](https://nerdy.dev/)、[Ahmad Shadeed](https://www.ishadeed.com/)、[Robert Flack](https://github.com/flackr)、[Dominic Nguyen](https://www.chromatic.com/)、[Fantasai](http://fantasai.inkedblade.net/)、[Kilian Valkhof](https://kilianvalkhof.com/)に感謝します。

      翻訳について手伝ってくれた[Alexey Pyltsyn](https://github.com/lex111)にも感謝します。

      ### Credits & Stuff

      このサイトで使われている書体はIBM Plex Monoです。

      質問やフィードバックがあればぜひ[教えてください！](mailto:hello@stateofjs.com)

      では、2020年のCSSについて見てみましょう！

      <span class="conclusion__byline">– Sacha and Raphaël</span>

  ###########################################################################
  # Tshirt
  ###########################################################################

  - key: sections.tshirt.title
    t: Tシャツ

  - key: sections.tshirt.description
    t: |
      ## アンケートをサポートしておしゃれになろう！

      結果の前に、すこしお知らせをさせてください。🎈🎉👕 State of CSS Tシャツ 👕🎉🎈 ができました！

      このTシャツの何がすごいかというと、実際のCSSテクニックを教えてくれるただひとつの衣類なのです。

      カンファレンスでも、面接でも、仕事でも、このTシャツはあなたがCSSに精通していることを示してくれます。ほかのTシャツではこうはいきませんよ！

  - key: tshirt.about
    t: Tシャツについて

  - key: tshirt.description
    t: |
      このTシャツはState of CSSのロゴと、その実装に使ったCSSのコードをプリントしています。もしかすると、何か新たに学べるかもしれませんよ！

      このTシャツは、高品質でとてもやわらかなトライブレンドの生地を使っています。スリムフィットなので、ゆったり着たい場合にはいつものサイズのひとつ上をおすすめします（写真はMを着用）。

  - key: tshirt.getit
    t: 購入する

  - key: tshirt.price
    t: 24ドル（＋送料）

  ###########################################################################
  # Sections Introductions
  ###########################################################################

  - key: sections.user_info.description
    t: |
      今年のアンケートは**102**か国、**11,492**人もの人が回答してくれました。また、すばらしい翻訳ボランティアのみなさんの力により、今回初めて複数の言語で結果をお届けできるようになりました。

  - key: sections.features.description
    t: |
      CSSはここ数年、新しい機能が急増しています。新しいプロパティが使われるまでには時間がかかるので、機能の普及は少し遅れてやってくるでしょう。

  - key: sections.units_selectors.description
    t: |
      知らなかったことがきっとあるはずです！賭けてもいいですよ。

  - key: sections.technologies.description
    t: |
      CSSのエコシステムはリニューアルの流れにあります。Bootstrapのようなベテランの主力がいる中に、新たにTailwind CSSなどの新人が登場しました。CSS-in-JSのムーブメントは言わずもがなです。メインストリームなCSSとのクロスオーバーが実現しているとはまだ言えませんが、とても強い流れであるのは間違いありません。

  - key: sections.other_tools.description
    t: |
      特に驚きはないでしょう。しかし、旧来の開発者ツールより一歩踏み込み、開発にフォーカスしたPolypaneやSizzyなどのブラウザが登場したことは注目に値するでしょう。

  - key: sections.environments.description
    t: |
      CSSが元来持っている強みのひとつに、異なる環境に適応できることがあります。しかし印刷メディアやメールなど、CSS開発者のほとんどが踏み入れていない領域もあります。これらがCSSの次のフロンティアになるかもしれませんよ…？

  - key: sections.resources.description
    t: |
      「そのほかの回答」に書かれた回答が、CSSコミュニティの豊かさ、多様さを表していることが分かります。みなさんが取り上げたブログやポッドキャストが、来年のアンケートの選択肢に加わるかもしれません！

  - key: sections.opinions.description
    t: |
      みなさんの意見が、言語がより成熟してきたこと、一方で複雑になったことをうかがわせます。そして、変化のペースについていくのが大変なことをふまえると、私たちはCSSをあまり楽しめていないのかもしれません。

  ###########################################################################
  # Notes
  ###########################################################################

  - key: blocks.gender.note
    t: |
      回答者のジェンダーのバランスについては、[ブログ記事](https://dev.to/sachagreif/is-our-survey-biased-against-women-49oj)を書いています。

  - key: blocks.css_missing_features.note
    t: |
      質問への回答の完全なデータセットは、[サイドプロジェクト](https://whatsmissingfromcss.com/)を立ち上げそこで公開しました。

  - key: blocks.source.note
    t: |
      このチャートはリファラー、URLパラメーター、自由回答を集計したものです。

      - State of JS: [State of JS](https://stateofjs.com)のメーリングリストです

      - State of CSS: State of CSSのメーリングリストと、`email`, `by email`といった文言を含めています

      - Work: `work`, `colleagues`, `coworkers`といった文言を集めたものです

  ###########################################################################
  # Awards
  ###########################################################################

  - key: award.feature_adoption_delta_award.comment
    t: 2020年に**{value}**の増加をみせたCSS Gridは、新しい技術からすっかり定着した技術になったといえるでしょう。

  - key: award.tool_usage_delta_award.comment
    t: Tailwind CSSの昨年比**{value}**という数字に対抗できるツールはありませんでした。

  - key: award.tool_satisfaction_award.comment
    t: PostCSSの**{value}**という満足度は、ひとつのことをとてもうまくやっているプロダクトにかなうものはないことを示しています。

  - key: award.tool_interest_award.comment
    t: \**{value}**という数字から、CSS開発者にとってCSS Modulesがどれだけ興味を集めたかがわかります。

  - key: award.most_write_ins_award.comment
    t: 多くの設問で自由入力欄を設けましたが、最も多かったのが**{value}**件の回答を集めたPhpStormでした。

  ###########################################################################
  # Conclusion
  ###########################################################################

  - key: sections.conclusion.description
    t: |
      JavaScript開発者がCSSを1行書いたら、もうそれでCSS開発者になったと言えるのでしょうか？

      この公案はウェブ開発の世界にある、いまのトレンドを表しています。CSS開発者がどんどんとJavaScriptを学ぶ必要にかられ、またJavaScript開発者も`font-weight: bold;`以外にもCSSがあることに気づき始めているのです。

      こうなると「CSSの現状」を問うのは、とても難しくなります。相手が誰によるかで答えが変わってしまうからです！様々な答えの中から、どの答えが正しいとどうやって決められるのでしょうか？

      ここでもうひとつの公案です。正しい答えは、そんなものなんてないということです。ここで取り上げた多くのツール、設計手法、フレームワーク、ライブラリ、それぞれがフロントエンドのエコシステムの一部を担っているのです。

      複雑なReactアプリを作る？Styled Componentsはとてもいいものです。静的なランディングページを作る？Sassを使えばそう間違えは起こしません。一時期のハイプこそ収まってはいますが、テーマやプラグインの数においてBootstrapにかなうものはありません。

      このプロジェクトは今後も、GitHubに毎週のように現れる新しいプロジェクトを見続けますが、ツールやテクニック、そしてなによりCSSの灯りを守ってきた人々を忘れてはいけません。CSSを2021年、そして未来にむけて進めるには、みんなの力が必要なのです！

  ###########################################################################
  # Picks
  ###########################################################################

  - key: picks.my_2020_pick
    t: "My 2020 Pick: "
  - key: picks.intro
    t: We asked members of the CSS community to share their “pick of the year”

  - key: picks.shadeed9.bio
    t: Author of debuggingcss.com
  - key: picks.shadeed9.description
    t: |
      Container queries are a long-time awaited feature for us, 
      and I’m thrilled that the Chrome team is working on support for it natively!

  - key: picks.argyleink.bio
    t: CSS at Google
  - key: picks.argyleink.description
    t: |
      The humble CSS box is more dynamic every year, and for me 2020 was about logical sides, instead of physical sides. Free internationally contextual content flow, spacing and shorthands? pls & ty

  - key: picks.sachagreif.bio
    t: Creator of this survey
  - key: picks.sachagreif.description
    t: |
      With this blog post, Amelia Wattenberger didn't just go the extra mile, she ran a whole marathon! The animations and quiz will ensure you finally understand the CSS cascade.

  - key: picks.christianoliff.bio
    t: Front-end developer for Trimble MAPS
  - key: picks.christianoliff.description
    t: |
      One thing I've really started using and appreciating this year though is Purge CSS- an awesome tool for removing unused CSS. It can greatly reduce the size of your CSS, and its fast and easy to use.

  - key: picks.kilianvalkhof.bio
    t: Web developer and creator of Polypane
  - key: picks.kilianvalkhof.description
    t: |
      `content-visibility` is making a huge difference in the performance of my web apps already, but at the same time I think it should be the job of browsers to optimize this, not devs.

  - key: picks.walterstephanie.bio
    t: User Centered Designer & CSS Lover
  - key: picks.walterstephanie.description
    t: |
      A series of YouTube videos that explain all the new cool CSS features to build modern designs.

  - key: picks.piccalilli_.bio
    t: Freelance designer & dev who runs piccalil.li
  - key: picks.piccalilli_.description
    t: |
      This blog is an absolute gold mine of CSS knowledge. Michelle is a CSS legend and every post or tutorial they write is heaped with useful content.

  - key: picks.sarasoueidan.bio
    t: Independent UI/design engineer
  - key: picks.sarasoueidan.description
    t: |
      My pick is a person, namely Rachel Andrew. She taught CSS Grid to a whole generation of developers.

  - key: picks.5t3ph.bio
    t: Software Engineer @ Microsoft
  - key: picks.5t3ph.description
    t: |
      In this conference talk, Manuel Matuzovic provides thoughtfully 
      crafted examples that are engaging, approachable, and actionable.

  - key: picks.hugogiraudel.bio
    t: Non-binary accessibility & diversity advocate
  - key: picks.hugogiraudel.description
    t: |
      Fela is an amazing piece of software. 
      It’s pretty powerful, relatively easy to use and very performant

  - key: picks.foolip.bio
    t: Software Engineer @ Google
  - key: picks.foolip.description
    t: |
      Sergio has recently fixed lots of Flexbox in WebKit and even some in Chromium, 
      notably bringing flex gap to WebKit, 
      which means that soon it will be available on all modern browsers.

  - key: picks.jina.bio
    t: Design systems advocate and practitioner
  - key: picks.jina.description
    t: |
      The media query to reduce motion, which helps avoid 
      triggering dizziness and discomfort.