池田 泰延

ウェブ制作会社ICS代表。筑波大学非常勤講師。HTML/CSS/JavaScriptを用いたユーザビリティーを意識したUI構築が専門で、3D表現・クリエイティブコーディングが得意。著書『フロントエンドの知識地図』など技術書14冊を執筆。趣味でタイムラプス撮影。

[池田 泰延 @clockmaker]

羽田空港の過密ダイヤをタイムラプスで撮影。

こんなに離着陸が規則正しいとは驚き。
パイロットすごい！

カメラ: SONY α7RⅢ
レンズ: SIGMA 135mm f1.8 Art
#タイムラプス #timelapse

[池田 泰延 @clockmaker]

新しめのCSSを使うと、UIを触りごこちをよく出来ます。

今日の発表で利用したHTML・CSSを使った写真ギャラリーです。
#vuefes

[池田 泰延 @clockmaker]

Vue Fes Japan 2026でのスライド資料『JSがこんなに減る！ HTML・CSS最新技術2026』を公開しました。
https://t.co/TrFBe0Mf3y

インタラクティブなプレゼン資料になっています。Chromeでご覧くださいませ。
#vuefes

[池田 泰延 @clockmaker]

セッション「HTML・CSS最新技術2026」は満席で立ち見がでるほどでした😭
聴講にいらした皆様、ありがとうございました🙇‍♂️

スライド資料は公開できるよう準備しています。
#vuefes #vuefes_cybozu

[池田 泰延 @clockmaker]

12:50からセッション「HTML・CSS最新技術2026」の資料チラ見せ。

モーションをものすごい量、入れていますので
会場で聴いていただけたら！

このあと、ぜひいらしてください〜
#vuefes #vuefes_cybozu

[池田 泰延 @clockmaker]

カラーピッカーを<select>タグで実現。
<option>をCSSで扇形に。

標準のselectタグでも、ここまで見た目を変えられます。
ChromeとSafariが対応済み。
https://t.co/SRAsIztVCB
#vuefes #vuefes_cybozu

[池田 泰延 @clockmaker]

モーダルを表示中なのに、Tabキーで背景のリンクへ移動してしまうことも。

dialogではなくdivタグで自作したときに起こりがちな問題。

キーボード操作や背景スクロールなど、モーダルでは考慮すべきことがたくさんあります。
https://t.co/UrJuFgRYlK
#vuefes #vuefes_cybozu

[池田 泰延 @clockmaker]

文字が1文字ずつ、時間差で出現するアニメーション。

CSSのsibling-index()で、要素の順番から遅延時間を計算可能。JSで連番を付けていた処理を減らせます。
https://t.co/36XZ7MPiJ7
#vuefes #vuefes_cybozu

[池田 泰延 @clockmaker]

JS無しで作る、カルーセルUI。
HTMLとCSSだけで実現。

::scroll-button()と::scroll-markerで、前後ボタンとインジケーターまで実装できます。
https://t.co/6USxoPVAz4
#vuefes #vuefes_cybozu

[池田 泰延 @clockmaker]

リンクにホバーすると、リンク先の記事をプレビュー。

HTMLのinterestfor属性で作れるUI。ICS MEDIAでも採用している機能。詳しくはこちらに。
https://t.co/gY3VtdjWKM
#vuefes #vuefes_cybozu

[池田 泰延 @clockmaker]

モーダルの開閉アニメーションに、starting-styleとallow-discrete。

入場前の見た目と、退場が終わるまでの待機をCSSで指定。ハンバーガーメニューの作例で解説。
https://t.co/mbf8SahGiH
#vuefes #vuefes_cybozu

[池田 泰延 @clockmaker]

#vuefes に来ました！
たくさん楽しんできます！

発表も頑張ります💪

[池田 泰延 @clockmaker]

iPhone Duo、
メールだと「お届け予定日： 2026/10/23」
サイトだと「到着 2026/12/09 - 2026/12/16」

さぁ、今日到着か、12月まで待ちか！

[池田 泰延 @clockmaker]

iPhone Duo注文完了！

21時ジャストの申し込みで、12月お届け予定でした。

[池田 泰延 @clockmaker]

Vue Fes Japan 2026の資料のチラ見せ。

明日10月24日(土)の登壇では、ライブで動くスライドで、新しいHTMLとCSSを解説します。
#vuefes

[池田 泰延 @clockmaker]

@satoshionoda メンションありがとうございます！
git hookまで使われているの面白いですね。私はあまり高度なことをせず、デザイン→素材画像にするとき、お手製AVIF保存でやってます…😅

[池田 泰延 @clockmaker]

@fumix ははは！　今はNext.jsもNuxt（やNuxt Content）なりもっと導入しやすいツールがあるので！

[池田 泰延 @clockmaker]

PHPやWordPressの問題で困っているようなら、静的サイト化がオススメ。

速い、安い、リスクが少ない（バックエンドプログラムがない）。

以前、私が書いた記事をどうぞ！
PHPとWordPressをやめ、静的サイトジェネレーターで高速化した話 - ICS MEDIA https://t.co/1rKj0CSlXc

[池田 泰延 @clockmaker]

品川駅あたりの港区の夜景。

10月下旬なのに夏がもう一度やってきたような暖かい秋の日でした。

カメラ：LUMIX S1R2
レンズ：SIGMA 65mm f2 DG I Series

[池田 泰延 @clockmaker]

今週10月24日(土)にVue Fes Japan 2026に登壇します。

CSSの進化をテーマに「使って気持ちよいUI」「楽になったUI実装」に焦点をあてて話します。

ぜひ聞きに来てくださいませ！ #vuefes

[Vue Fes Japan @vuefes]

／
📢 Vue Fes Japan 2026 セッション紹介です🎤
＼

「JSがこんなに減る! HTML・CSS最新技術2026」
サイボウズトラック
池田泰延 @clockmaker (株式会社ICS フロントエンドエンジニア)

詳細はこちら✅
👉https://t.co/qgLv5RCbkq

#vuefes

[池田 泰延 @clockmaker]

@takanyo 背景からサイトを想起できるほど、読者の記憶に残っているのはデザインの勝利ですね！？

[池田 泰延 @clockmaker]

とあるウェブ技術のブログサイトですが、アニメーション技術の解説で、「アニメを観る」という偽ボタン（広告）を本文に配置するのは、evilじゃないですかね！

[池田 泰延 @clockmaker]

@chaca21911 広告自体はサイト運営に必要だとは思うのですが、今の広告モジュールはやりたい放題ですね😅