kbd 要素に枠線と角丸、下だけ太い枠線を付けると、キーボードのキーのような見た目になります。使い方の説明やヘルプのページで、文章の中のショートカットキーをキーの形で見せたいときに使えます。行の間が広がらない line-height ...

タブの数だけラジオボタンを置き、label をタブの見た目にして、:has() と :checked で選ばれたパネルだけを出すと、JavaScript なしでタブが切り替わります。矢印キーでの操作、ラジオボタンの隠し方、:targe ...

ボタンと吹き出しを1つの要素で包み、:hover で visibility と opacity を切り替えると、マウスを乗せたときだけ説明が出ます。出るまでの待ち時間、吹き出しへのマウスの移し方、キーボードと Esc キー、読み上げ用 ...

入力欄に重ねたラベルを、フォーカスしたときと文字が入っているときに上へ小さく動かす方法です。入力したあとも何の欄かが分かる「フローティングラベル」を、CSS だけで作りたいときに使えます。placeholder に空白を1つ入れて : ...

details の中身を包む ::details-content の高さを、0 から auto へ transition で動かすと、アコーディオンがなめらかに開閉します。閉じるときの指定や、details を使わない書き方も Chr ...

画像の上の白い文字は、文字の下だけをグラデーションで暗くするか、半透明の箱を敷くと読みやすくなります。ページの先頭に大きく置く画像、いわゆるメインビジュアルやヒーロー画像に、見出しと短い説明を重ねたい場面で使えます。text-shad ...

購入手続きなどの「今どの手順にいるか」を示すステップ表示を、ol と CSS で作ります。番号はカウンター、つなぐ線は疑似要素で描き、済んだステップは :has() で選ぶので、JavaScript は aria-current を付 ...

表計算ソフトのように、表のセルをドラッグして四角い範囲で選ぶ仕組みを、ライブラリを使わずに React で作りました。範囲は起点と端の2つのセルで持ちます。Shift と矢印キーでの選択、Ctrl+C でのタブ区切りのコピー、文字の選 ...

文字色と背景色を選ぶと、WCAG のコントラスト比と AA・AAA の判定を表示する React のコードです。表示は小数第2位で切り捨て、判定は計算したままの値で行います。カラーコードの入力欄と色の input を、入力途中の文字を ...

パンくずリストの各リンクを clip-path の polygon() で矢印の形に切り抜き、左へずらして前の矢印の先を次のくぼみに入れます。重なった部分のクリック、切れて見えなくなるフォーカスの枠、折り返したときのはみ出しも確かめま ...