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からのお問い合わせもお待ちしております。
:openはdialog、details、select、ピッカー付きのinputといった開閉できる要素が開いている間にマッチするCSS疑似クラスです。Baseline 2026で揃ったので、dialog[open]やdetails[open]といった要素別の属性セレクタを横断して一本化できます。
ToggleEvent.sourceはBaseline 2026で追加された、toggle / beforetoggleイベントに発火元の要素を載せて渡すプロパティです。同じポップオーバーを複数のボタンから開くケースで、どのボタンから開かれたかをリスナー側で素直に判定できます。
baseline-shiftはCSS Inline 3で定義されたCSSプロパティで、SVGテキスト要素のベースラインを親要素から相対的にずらすために使います。SVGの同名属性の後継として位置付けられ、Baseline 2026で主要ブラウザに揃いました。
