00:06
はい、2月20日月曜日ですね。
時刻は朝9時14分まいりました。
すみません、前日寝坊して申し訳ないです。
はい、おはようございます。
mimeiのkeethかどくわはらです。
では、本日も朝活を始めていきたいと思います。
はい、今回もタイトーにあります通り、
The State of CSS 2022を読みながらですね、
タラタラ感想を述えるだけの回ですけども、
昨日がカラー図のショーですね、が全部終わりましたと。
カラー図で終わってしまったという感じですね。
で、今日はインタラクションのところですね、
から入っていきたいと思います。
少なくとも僕も案件で色々書いてきましたけど、
まあスクロールは普通にスクロール、
オーバーフローのスクロールぐらいか、
もしくはオートぐらいしかやったことないので、
あんまないのかなという気がしますね。
どんな形勢で使っているかはちょっと気になりますけどね。
はい、では続いていきましょう。
続いてはタッチアクションというプロパティです。
数字伸びがないんだろうなと思います。
まあ便利な機能だと思いますけど、
僕も確かにこれ使ったことないし、
そもそも僕知らなかったですね。
タッチアクションというのがあったというのは
そもそも知らなかったので。
続いて、スクロールビヘイビアという動きですね。
オーバースクロールビヘイビアってあったんですけど、
それと別のスクロールビヘイビアというのがあるそうですね。
こちらはCan I use…じゃないわ。
今回の調査でいくと、
2022年、前回の調査から始まってますと。
機能として新しいのか、
改めてカテゴライズされたかちょっと分からないですけど。
数字でいくと、全く知らないって人が20%、
知っているが19.2%、
使ったって人が60.9%、
実に3分の2ぐらいの人が使っていると。
これじゃあ多分結構皆さんそもそも
使っている機能かもしれないですね。
Can I use…も一応見てみますと、
i11以外が使えるというので、
基本的には使えるというものですね。
ちなみに、MDN見ましたけど、
やっぱりスクロールハイフォンビヘイビアというプロパティですね。
これ見たことあるけど、
僕あんまり使ったことない気がしますね。
意図的にですけど。
まあいいや、そういう機能がありましたということです。
60.9%ぐらい。
割と世界の人は使っているんですね。
しかし、うちの会社のメンバーも
普通に使っているかもしれないです。
もうちょっとスクロール系が続きますね。
次でラストか。
次でインタラクションはラストですけど、
今回はほぼほぼスクロール系のインタラクションで終わりましたね。
次で最後、スクロールバーガッターってやつですね。
この機能ですけど、
Can I use からまず見てみましょうか。
Can I use を見ますと、
Safariは基本全滅、
IEも全滅というところで、
ちょっとこの2つのブラウザが対応できていないとなると、
利用率は少ないかもしれないですし、
ちょっときついですね。
2022から始まっているということは、
機能自体が若いのか、
またまたサービスとして初めて出てきたのかわからないですけど、
ただデータを見る感じ、
全く知らないが72.2%で、
知っている17.6%で、
03:00
使ったっていう人が10.3%なので、
またまた新しい機能なんじゃないかと思ったりしますね。
知らないが72.2%、
これかなり多いので。
NDNのリンクも貼ってますし、
記事もありますので、
一回使い方を見てみたいと思います。
では以上、ZSのインタラクションのところの章は終わりです。
続いてタイポグラフィーですね。
タイポグラフィーの章です。
こちらはいくつかありますけど、
数が少ないのでサクサクいきたいと思いますが、
タイポグラフィー、
一つ目はフォントディスプレイですね。
キャナリウスからいきますけど、
CSSのフォントディスプレイというプロパティですが、
IEだけが死んでますね。
あとOpera Miniとかも置いといて、
主要なブラウザーの中でIEだけが使えないというものですね。
数字いきますと、
2020年から調査始まっていて、
全く知らないが44.9%。
だいたい半分くらいの人は全く知らないということですね。
知っているが17.3%、
使ったことがある人は38%。
4分の1近くの人は言うて使っているものですと。
半分近くの人が全く知らないというので、
知ってるけど使わないというケースがかなり少ないので、
知ったら使う人の方が多いような機能ですかね、
フォントディスプレイというものは。
残念だけど僕もこれ知りませんのランクに入っちゃいますね。
フォントディスプレイって、
フォントってサイズと太さとぐらいですかね、
あとラインハイドとかありますけどぐらいはやりますけど、
他フォントなんか、
そもそもフォントを指定するぐらいしか僕もやったことないので、
フォントディスプレイという機能は実は初めて知りましたね。
もうちょっと不勉強ですみませんけど。
では続いて、ラインクランプというプロパティですね。
ラインクランプですけど、またまたキャナユーズからいきますが、
ラインクランプは、
i2とOpera Miniが死んでいると、
それ以外は使えるというので、大体皆さん使えるそうですね。
サーベイ自体は2020から始まってますけど、
数字いきましょう。
2022年のサーベイでは、
全く知らないが50%、
知っているが18.5%、
使ったことが31.6%ということなので、
3分の1の人が使っているので、
そこそこ市民権を得ているような機能なんですね。
ラインクランプというものでした。
ただ全く知らないという人が50%、
まだまだ半分いるというところなので、
でも2020から調査自体は始まっているので、
割と古くあるプロパティな気はしますけど、
皆さんあまり使われていないという感じなんですかね。
3分の1で使っているから、
使っているっちゃ使っているけど、
でも半分以上知らないと言っているので、
どうなんでしょうね。
MDN見てみましたけど、
ウェブキットのところでの対応が多いですね。
逆に言うとウェブキットしかプロパティとしてない、
ということなので、
そんな使わないのかもしれないですね。
ブラウザーも対応が絞られてきていますので、
そういう意味では、
知っていて損はないけど、
そんな使わないかもって感じですね。
06:01
ChromeとかFirefoxユーザー向けのアプリケーションの時に
使うんだろうなという気はしました。
SafariとIEが使えない。
Safariも使えたか。
IEが使えないのは置いといて。
Safari使えるんだったら、
もう少し数字伸びていい気がしますけど、
これはでもちょっとずつですね。
2020年からいくと11.3%増えているので、
微量ながらも増え続けてはいるので、
次の2023年でもちょっとは増えるけど、
そんな変わらない気がしましたね。
では続いて、
便利かどうかもちょっと分からないですけど、
ウェブキット固定のプロパティってなると
ちょっとなって感じですね。
では続いて、
バリアブルフォンツっていう機能になります。
こちらもですね、
いかないユーズから見ますけど、
こちらはですね、
IEが死んでて、
Opera Miniも死んでて、
それ以外は使えるというものですね。
サーベイは2021から始まっているので、
ちょっと若い機能なのかな、これはですね。
数字でいくと、
全く知らないが34.5%、
知っているっていうのが36.4%ですね。
使ったことあるが29.2%なので、
少なくとも認知はされてますね。
3分の2以上が知っている以上にはいるので、
基本的には認知はされていますが、
使ったことがあるって人はそんなに多くないと。
あんま使うケースがない、
ちょっとリッチな、
ニッチなプロパティなのかもしれないですね。
バリアブルフォンツガイドっていうのがあって、
一応AMDにはちゃんとガイドライン的なものが
バーッと書かれてますね。
スタンダードフォンツホイホイみたいな、
バリアブルフォンツっていうのがあったりとか、
いろんなバリアンスの話もあったりしてですね。
かなりテキストがバーッとつながっていくので、
ちゃんと背景を理解した上で使うっていうような
機能っぽいですね、これは。
テクニカルなものをやりたいときに使うので、
テキスト自体をすごい装飾をしたいとか、
細かく細かく設定をしたいというときに、
こんなのがあるんだっていうのを見てもらうのが
いいのかもしれないですね。
というので、29.2%の人が使ってるけど、
これはこのまま3分の1ぐらいで着地する気はしますね、
数字的には。
では続いて、タイポグラフィーはこれでラストですね。
最後はフォントパレットっていう機能になります。
はい、こちらもです。
これは多分若い機能だと思うんですけど、
IE以外のゼンブラウザ対応していますが、
サーベイ自体は2022、今回からスタートですね。
で、数字いきましょう。
全く知らないっていう人が91.3%なので、
そもそも存在が知られてない機能ですと。
で、知っているが7.6%、
使ったことがあるが1.2%、
それとも1.2%いるんですね。
これはすげーな。
みんなよくこんな機能を知ってますね。
そういうアリアダプターの人たちがちゃんと調査して、
こんな新しいの出たんだって1回は使ってみたってことなんでしょうね。
全く知らないが90%超えていますので、
皆さんとりあえず存在を今回知って、
09:01
次回どうなるかっていうのはちょっと気になりますね。
MDNのリンクもないので、
まだ本当に出てきた新しいのと、
ページ自体をまだ作っている途中なんでしょうね。
今後の展開を待ちたい感じはします。
タイポグラフィーは以上で、
次はアクセシビリティですね。
アクセシビリティは結構項目が多いので、
一個一個見ていきましょう。
1つ目はPreferred Reduced Motionですね。
これはですね、まずCan I Useから見ましょうと。
僕もアクセシビリティ本当に情報がうといので、
ふーんとしか言えないかもしれないですけど。
一応Can I Useを見ると、Ie以外は対応していると。
Preferred Reduced Motion Media Queryだと言っているので、
Media Queryで制御するプロパティなんですね。
アクセシビリティに関してMedia Queryレベルで制御するものがあったんですね。
これはちょっと知りませんでした。
数字でいきますと、全く知らないが30.6%、
知っている34.5%、使ったことある35.1%なので、
70%以上の人は知ってはいるってものなんですね。
はぁはぁはぁはぁ。
であれば、わりともう市民権は得ているような気がしますね。
サーベイ時代は2020年から始まっていて、
その時は51%の人が知らないって言ってたので、
今はだいぶ増えてきたっていう感じはしますね。
とはいえ、使ったことあるでも35.1%なので、
アクセシビリティの観点は今後絶対に加速していくと思いますし、
日本でも、ちょっと主語が大きいですけど、
アクセシビリティをちゃんと対応するっていうウェブアプリケーションとか
ウェブサイトは増えていくと思いますので、
この辺の機能、今現時点でこれならばもうちょっと伸びるかもしれないですね。
ただ日本ユーザーが伸びたところで全世界どうかはちょっとわからないですけども。
というわけで、一旦こんなものでした。
一応MDNもざっと見てみますか。
Referred Reduced Motionっていうものがあるんですけど、
Request that the system minimize the amount of non-essential motion it uses
Non-essential motionの時に使うようなものですね。
ちょっとエッジケースな気はしますね、これを見る限り。
というのと、ちょっとワーニングが書かれていますので、
使う分に関してはちょっと気をつけなきゃいけないものがありそうですね。
というものでした。
では続いてPreferred Color Schemaですね。
こちらの機能ですけども、Can I use?見るとやっぱりIEが使えないと。
IE、Accessibilityも全然対応しないとなると、
今後そもそも使われないブラウザに多分なる気がしますね。
Windowsでもデフォルトで入ってますけど、
エッジに完全移行すると思うので、
どっかでもガツンとIEはそもそも新しいコンピューター、
パソコンの中には入らない気がしますね。
その方が多分いいと思います。
その進化において、やっぱりIEがストップかけてしまったのは、
本当にいろいろあったりするので、
止めてもらう分には構わないなという気はしました。
では、数字に行きましょう。
Preferred Color Schemaですけど、
数字、2012年の全く知らないという人が27.2%で、
12:00
知っている33.4%を使ったが39.5%ということで、
4分の1の違いの人が使っているんですけど、
これ数字ですね、サーベイ2020から始まってるんですけど、
順調に減ってきてますね。
減ってきてるのは知らないという人が減ってきてますということです。
20%近くの人が知らないという数字が減っているので、
認知はどんどんされてきてるって感じはしたんですけど、
認知自体は数字あんま変わってないんですよね。
純粋に使っている人がどんどん増えているということですね。
アクセシビリティで一番、
まず考慮されるのは色のイメージがありますね。
色弱な、僕の勝手なイメージですけど、
色弱のことをまずは真っ先に対応する。
対応しやすいというのもあるかもしれないですね。
リリーダーとか使わなくても対応できるものですからね。
少なくとも目が弱いだけで音とか聞こえているという方は多いと思うので、
どういう障害を持たれるかというか、
それがどの割合なのかちょっとすみません。
僕が全然分かってないんですけど。
少なくともカラースキーは色弱の方を対応するというものなので、
やることは結構目に見えていて、
分かりやすいというので結構利用している人が多いのかもしれないというのが
僕のちょっと邪推です。
実際にどういうデザインをするかとか色回りは結構大変ですからね。
僕ちょっと色彩学やったことないんですけど、
その辺はしっかりやらないと多分できない対応だと思いますので。
今後もこれが増えていくんでしょうね、この機能は。
使っているという人が少なくともサーベイスタートから倍増してますからね。
というものでした。
続いて、Preferred Reduced Dataという機能ですね。
気になるやつ見ましたら全部ブラウザー全滅ですね。
これ使えないんじゃない?
こんな真っ赤な気になるやつ初めて見ました。
これはメディアクエリの機能っぽいですね。
アットルールを見ますと、
アットメディアコロン、Preferred Reduced Dataというので指定するような機能だそうですね。
でもサーベイ自体2021から始まっているので、
機能自体はあるんじゃあるのかな?
でもブラウザ対応しないんだったらどうやってこれみんな使ってるんだろうな。
数字見ますと、60.3%が全く知らない。
知っているが34%。
使ったが一応5.8%の人がいるんですけど、
どうやって使ってるんだ?
開発者モードみたいなのもあったりしますしね、ブラウザにも。
その辺で使ってるのかなと思いますが、
5.8%。
しかも2021から若干数字増えてるんですね。
使ったことあるって人が。
3.9から5.8なので、
2%近いの人がどうやって知ったかつ、
どうやって使ってるのか気になりますね。
僕も全く知らない機能だったので、
ブラウザも対応してないというので、
今すぐ勉強する必要性に駆られないというのはもちろんあるんですけど。
どうなんでしょうねこれは。
では続いていきます。
次はカラーコントラストという関数ですね。
CSSの関数です。
Can I useを見てみますと、
こちらもですね。
カラータグですか。
MDNもありますので、一応ちゃんと機能としてはもう実装されるんだと思いますけどね。
MDNでページが用意されてるくらいですからね。
CSSバリアブルと一緒に使える機能かな。
15:03
単純に色を設定したりするからか。
変数も使えると言ってますね。
これもかなりテクニカルな機能なのと、
MDNのページ見たんですけど、
シンタックス、こういう書き方をしますだけしか書いてなくて、
例もなかったりするので、
ちょっとまだ若い機能なんだろうなという予測はします。
では続いていきますか。
でもわざわざこのサーベイに乗るってことは、
たぶん今後こういう機能が入ってくるよっていう、
ブラウザ対応するかわかんないけど便利なものがあるよっていうのを、
お知らせをしたいという意味で、
このサーベイのカテゴライズに入っているんだろうなという予想をしました。
では続いて。
カラーコントラストだとカラースキーマですね。
さっきはプリファーズカラースキーマってのがあったんですけど、
今度は単なるカラースキーマっていうものになります。
こちらもCan I Use見てみますと、
I以外が使えるというものになります。
数字でいきますと全く知らないが60.8%、
知っているが25%、
使ったことあるが14.4%というので、
一応サーベイは2021から始まっていますけど、
10%減で全く知らないという人が減っています。
知っているが3%増えていて、
使ったことあるが約倍増ですね。
7.4%から14.4%になっているので、
順調に増えてはいるというので、
これ今後も増えるんだろうなという気はしましたね。
色回りは結構制御できた方がいいですからね。
使い方はカラースキーマ、コロン、ノーマル、ライト、ダークってやつですね。
これはダークモード対応するという意味では結構使えるやつじゃないですかね。
問題はダークとかライトにしたときに、
CSS回りというよりもデザインがちゃんと
意図したダークモードの色になっているかというところが
肝になると思うので、
その辺を対応するときに使えるものでしょうね。
カラースキーマというものでした。
どのタグに使えるかとかが最終的には知りたいところではあるんですけどね。
一応カスタムタグとかにも使えるのかなこれ。
エレメントの中にある要素に対してカラースキーマを指定するので、
背景色とかじゃなくて、
基本的にはテキストに使うものじゃないのかなと思いますけどね。
MDNで回って読んでいたら時間がかかるので、
これはちょっと割愛しますけど、
一応要素的には使えるものはいっぱいありそうですね。
サンプルコードにはコロンルートで使われているので、
ルートに使えるなら基本的な要素に使える気はしますけどね。
というところでした。
ではですね、
時間がいい感じで30分を超えてきましたので、
時間はちょっと中途半端ですけど、
ここで区切りたいと思います。
というわけで、
今回はCSSのインタラクションとタイプグラフィックアクセシビリティの
途中まで見ていきました。
明日はですね、
プリファーズコントラストからまた見ていきたいと思いますけど、
基本的にはサーベイ2022から始まった若い機能ばかりな気がしています。
はい。
というところで、
これで終了したいと思います。
改めまして、
達也長さんご参加いただきありがとうございました。
ではまた今日からですね、
月曜日1週間頑張っていけたらなと思いますし、
もう2月も終わりに近づいているので、
18:01
また来月、3月に向けて色々頑張っていきたいなと思います。
では今日も頑張っていきましょう。
終了したいと思います。
お疲れ様でした。
