Frontend Weekly Vol.181

本文テキストサイズ、CSS Paint API、Flex Boxのチュートリアルほか計12リンク

Your Body Text Is Too Small by Marvel Blog

本文のテキストサイズは小さすぎるのではないか?

本文のテキストサイズは 16px では小さすぎる。
なぜ小さすぎると考えるのか、また大きくするとどんな利点があるのか? 日本語には関係ないと思わずにぜひ一読を。

2006年に公開されたiAのOliver Reichenstein氏による記事でも同じ様な事を啓蒙していたので、合わせてどうぞ。 Web Design is 95% Typography: How to Use Type on the Web

The CSS Paint API by CSS-Tricks

CSS Houdini: CSS Paint APIとは

CSSに取ってエキサイティングな存在であるCSS Houdini。そんなCSS HoudiniからCSS Paint APIについて紹介。 何ができるのか、何故そんなAPIが必要とされているのか、そしてどうやって使うのかまでを解説。

The Complete CSS Flex Box Tutorial by JavaScript Teacher

改めてCSSのFlex Boxのチュートリアル

これまでに数多くのチュートリアルが公開されてきたFlex Box。
しかし、きちん”理解”せずまま、なんとなくDevToolsで値をいじって求めている効果が出た組み合わせを正とする。という人も多いことだろう。
最終的にはDevToolsまかせな部分があるのも否めないが、きちんと理解しておくと確実性はあがるので、今さら聞けないカテゴリに入る前に是非。

The Science of Color Contrast by An Expert Designer’s Guide

色のコントラストをすこし学術的に解説。
単なる数字ではなく、ロジカルな色のコントラスト比を知るために。

Exploring CSS property definitions by W3C Blog

CSSのスペックをクロールし、パースして、解析、そしてWebIDLコンテンツの抜け漏れなどをレポートするツールReffyについて。

In Brief

• Better Collaboration By Bringing Designers Into The Code Review Process by Smashing Magazine: デザイナをコードレビューに参加させることでよりよいコラボレーションを生む
• How CSS works: Creating layers with z-index by LogRocket: z-index とレイヤーの関係性について
• How I learned to stop worrying and love CSPs by hiddedevries.nl: CSPともっと仲良くなるために知っておきたいこと
• Users Don’t Want Filters, They Want Better Content by Hopper: ユーザは絞り込むオプションを必要としているのではなく、単によいコンテンツが欲しいだけ
• Yes, Alan, There Is An ROI For UX Design by Noteworthy: Alan Cooper氏のUXのROIに関する記事へのJared M. Spoolによる返答記事
• Bidirectional Scrolling is here to save Responsive Design by UX Plant: 横スクロールはレスポンシブデザインを救うのか?
• The current state of modal dialog accessibility by The Paciello Group: モーダル・ウィンドウに関するアクセシビリティの現況