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からのお問い合わせもお待ちしております。
text-decoration-skip-ink: allは、underlineやoverlineがグリフを横切る箇所を必ず途切れさせるCSSの値です。CJKに対しては線を途切れさせない実装が多いautoとの挙動の差を、Baseline 2026で揃った3つ目の値allと合わせて見ていきます。
SharedWorkerは、同一オリジンの複数のタブやiframeから接続できるWorkerです。タブ間で永続接続や状態を共有でき、type: moduleでES Modulesも使えるようになりました。Baseline 2026で全モダンブラウザでサポートされたSharedWorkerの基本と使い分けを解説します。
Content Security Policyに違反するリソースの読み込みやスクリプトの実行は、CSP violation reportsとして収集できます。report-toディレクティブによるサーバー送信とsecuritypolicyviolationイベントによるクライアントサイド検知、2つの方法でCSPの違反を可視化する方法を解説します。
