ウェブ制作会社ICS代表。筑波大学非常勤講師。HTML/CSS/JavaScriptを用いたユーザビリティーを意識したUI構築が専門で、3D表現・クリエイティブコーディングが得意。著書『フロントエンドの知識地図』など技術書14冊を執筆。趣味でタイムラプス撮影。
東京都品川区
- Tweets 31,869
- Following 1,027
- Followers 31,765
- Likes 26,212
新しめのCSSを使うと、UIを触りごこちをよく出来ます。
今日の発表で利用したHTML・CSSを使った写真ギャラリーです。
#vuefes
2
2
34
2,844
カラーピッカーを<select>タグで実現。
<option>をCSSで扇形に。
標準のselectタグでも、ここまで見た目を変えられます。
ChromeとSafariが対応済み。
ics.media/entry/250307/
#vuefes #vuefes_cybozu
1
11
58
3,377
12:50からセッション「HTML・CSS最新技術2026」の資料チラ見せ。
モーションをものすごい量、入れていますので
会場で聴いていただけたら！
このあと、ぜひいらしてください〜
#vuefes #vuefes_cybozu
1
15
51
3,425
Vue Fes Japan 2026の資料のチラ見せ。
明日10月24日(土)の登壇では、ライブで動くスライドで、新しいHTMLとCSSを解説します。
#vuefes
12
63
3,459
品川駅あたりの港区の夜景。
10月下旬なのに夏がもう一度やってきたような暖かい秋の日でした。
カメラ：LUMIX S1R2
レンズ：SIGMA 65mm f2 DG I Series
1
14
2,001
イベントの感想レポートより。
フロントエンドカンファレンス関西2026に参加してきました｜小泉岳人 note.com/rich_hyssop406/n/n9…
今回の発表では、スライドの動きをこだわったので、取り上げていただき嬉しい限りです！
#fec_kansai
1
4
1,397
YouTubeは英語音声（オートダビング）を有効にしました。
流暢な英語で発表していて、自分でもビックリします（笑） 自分はぜんぜん英語をしゃべれません。
英語で視聴したい海外の方々もどうぞご覧下さい。
piped.video/watch?v=CRnSDIaG…
1
4
906
発表動画も公開しました！
モーションの演出やブラウザの挙動など、画面で見た方が利点がわかりやすいので、YouTubeでの視聴がオススメです！
piped.video/watch?v=CRnSDIaG…
2
7
20
6,253
これホントそう！
入力フォームはmaxlength で実装するな、ということ。
ペーストしたとき、テキストが上限でちょん切られるから。
デジタル庁のデザインシステムで良い例が示されている。
エンジニアは楽してmaxlengthを使いがち。
#fec_kansai
39
296
19,904
生成AIの利用で、ウェブアクセシビリティの問題が増えている。
・WAI-ARIAを使っていないページより、使ってるページは平均エラー数が多い
・要因の一つに、Vibe coding があるのではないか
#fec_kansai
3
9
94
6,384
①HTML <canvas>タグだとfillText()メソッドぐらいしかなく、文字組を作るのは大変。
②CSSだと美しい文字組が簡単に作れる。
③HTML-in-Canvasなら、CSSの見た目を<canvas>タグに持ってこれる。
④つまり、Canvasの弱点を補える、という解説でした。
#fec_kansai #fec_kansai_ookini
1
11
1,996
HTML-in-Canvasを使えば、
Liquid Glass風エフェクトができます。
従来のCSSでは難しかったやつです。
#fec_kansai
20
165
8,044
明日10月12日(月)のフロントエンドカンファレンスの発表スライドを最終調整。
ウェブならではの、インタラクティブなスライドに挑戦しています。お楽しみに。
#fec_kansai
5
44
3,031
HTML-in-Canvasを使って、ウェブページを粉々に切り刻みました。
10/12(月)のフロントエンドカンファレンス関西に向けて準備しているデモ。
#fec_kansai
10
99
6,106
HTML-in-Canvasを使うと、HTMLページのリンク遷移にこんなエフェクトを加えられます。
10/12(月)登壇の、フロントエンドカンファレンス関西でのデモのチラ見せ！ たくさんのデモを持っていきます。
#fec_kansai
34
312
15,553
今日の夕焼けは見事でした。
都内から眺めた富士山や東京タワー。
カメラ：Panasonic LUMIX S1R2
レンズ：SIGMA 28-105mm f2.8 DG Art
レンズフィルタ：Nisi Gnd
23
1,867
Chrome 155がリリース。
次世代画像形式のJPEG XLに対応しました！
・JPEGのアップグレード版
・WebPよりも汎用性が高い
JPEG XLはSafariもFirefoxも対応済み。
1
25
72
4,612
東京は36日連続の雨でしたが、今日は一日快晴。
久々に、素晴らしい夕日を眺めることができました。
カメラ：LUMIX S1R2
レンズ：SIGMA 28-105mm f2.8 DG Art
1
1
31
2,471
モンサンミッシェル到着時は豪雨でしたが、屋内観光後に天気が急に回復。
風速30km/時の強風で、いっきに雲が流れたおかげです。それもあり、雲が流れるタイムラプスを撮影できました。
二枚目の場所にでて撮影。干潟は短時間に潮が満ちるので、気をつけながらの撮影でした。
日本では平安時代ごろに、フランスではこんな立派な教会を建てており、東西文化の進化の違いに想いを馳せていまし
た。
1
8
1,147
最近リリースされたReact 19.3で
<ViewTransition>コンポーネントが正式搭載。
画面間を連続的につなげた演出に役立ちます。
CSSとJSXで宣言的に書けるので、
生JavaScriptより簡単。
1
8
101
7,338
フロントエンドカンファレンス関西で登壇することになりました！
・10月12日 (月・祝)
・場所：グラングリーン大阪
私は「HTML-in-Canvas」をテーマに話します。
関西での登壇は久しぶり🐙
ぜひお申し込みくださいませ。
公式サイト→ 2026.frontend-conf.osaka.jp/
1
13
72
7,143
Three.jsカンファレンスの興奮も覚めやらぬうちに東京に戻ってきました。
多くの世界中のクリエイターとお話し刺激をもらったことを、明日からの日々の仕事に活かしていこうと思います。
#threejsconf #threejsparis
3
3
69
4,093
Three.js conf、セッション終わり！
クリエイティブ系のサイトが数多く、技術と創作を学べる素敵なカンファレンスでした！
#threejsconf #threejsparis
69
2,503
Three.js Journeyの
Bruno Simonさんの発表。
かつてのFlashサイトを紹介する文脈で城戸さん作のサイトが一瞬紹介されていました。
#threejsconf #threejsparis
3
853
JavaScriptライブラリー「math」、
良さそう！
・カメラをなめらかに追従させる
・地形の凹凸を作る
・計算速度も速い
React Three Fiberの人たちが作っている。
npm i mathでインストール可能。
#threejsconf #threejsparis
6
70
5,638
二日目、Renaud Rohlingerさんの発表「Performance and Tricks」が次元が高過ぎてヤバい感じでした。
パリまできた価値がありました…!!
#threejsconf #threejsparis
2
5
1,231
エッフェル塔とセーヌ川。
パリの夜景が美しすぎて、タイムラプス撮影が楽しいです！
カメラ：LUMIX S1R2
#threejsconf #threejsparis
2
49
2,877
mrdoob氏の発表は、開発の根底にあるようなお話しでした。デジタルとの関わりの始まりや、AIの急速な進化でできるようになったことなど。
深いインスピレーションを得ました。
#threejsconf #threejsparis
1
3
1,157
Anime.js の作者も登壇。
タイムライン編集でAnime.jsのコードを生成。
タイムラインのスタッガー（バラつき）指定もユニーク。
このツール、かなり良さそう！
#threejsconf #threejsparis
1
14
146
7,268
