WebフロントエンドとTypeScriptが好きで、Baselineを追いながらWeb標準の進化を楽しんでいます。 デザインシステムの構築を通じて、デザインとフロントエンドの交差点を探っています。
考えたことや作ったものを形にして公開する場。
Webフロントエンドを中心に、日々のことも書いています。
過去の登壇テーマや資料へのリンクをまとめています。
ブログ記事や興味のある技術の試作品を集めています。
dotfilesやskills、自作ツールなどの制作物をまとめています。
気になっている記事を集めて、あとから探せるようにしています。
Web Platform Baselineのステータスを追跡します。
k8o.meのデザインシステム。コンポーネントやトークンを確認できます。
日々の作業や日常で役立つちょっとしたツール群。
テキストの文字数をリアルタイムに数えます。
日本語の文章を解析し、誤字脱字や文法ミスを指摘します。
テキストやURLからQRコードを生成してダウンロードできます。
2進数・8進数・10進数・16進数を相互に変換します。
2色のコントラスト比を計算し、WCAGの基準で評価します。
HEX・RGB・HSLの色表現を相互に変換します。
色からHexコードを当てたり、Hexコードから色を選ぶクイズです。
border-radiusを視覚的に操作してCSSを生成します。
テーブル名・カラム・制約を入力してCREATE TABLE文を生成します。
2つのテキストを文字単位で比較して差分を表示します。
255文字以内で入力してください
GitHub Issueからのお問い合わせもお待ちしております。
SharedWorkerは、同一オリジンの複数のタブやiframeから接続できるWorkerです。タブ間で永続接続や状態を共有でき、type: moduleでES Modulesも使えるようになりました。Baseline 2026で全モダンブラウザでサポートされたSharedWorkerの基本と使い分けを解説します。
Content Security Policyに違反するリソースの読み込みやスクリプトの実行は、CSP violation reportsとして収集できます。report-toディレクティブによるサーバー送信とsecuritypolicyviolationイベントによるクライアントサイド検知、2つの方法でCSPの違反を可視化する方法を解説します。
contrast-color()は背景色に対してコントラストの高い色（黒または白）を返すCSS関数です。Baseline 2026に到達し、テーマカラーやユーザー入力で背景色が動的に変わる場面でも、文字色をCSS側で導出して読みやすさを担保できます。
