白い文字に mix-blend-mode: difference を指定すると、文字の色が後ろの色を反転した色になり、白の上では黒、黒の上では白で表示されます。固定ヘッダーでの指定の場所、効かなくなる条件、灰色の背景で読めなくなる点を ...

英文に hyphens: auto を付け、lang 属性で英語だと伝えると、ブラウザーがハイフネーションの辞書をもとに単語を分け、行末にハイフンを入れて折り返します。日本語のページでの書き方、先頭が大文字の単語、ソフトハイフン、UR ...

Lighthouse で「Links do not have a discernible name」と出たときの直し方です。ロゴ画像やSNS・RSSのアイコンだけのリンクに alt や aria-label などで名前を付け、点数が8 ...

clip-path に shape() を書くと、波やアーチのような曲線を含む形に要素を切り抜けます。curve・smooth・arc の書き方、% と calc() で要素の大きさに合わせる方法、path() との違い、アニメーショ ...

ページ上部の大きな画像に loading=”lazy”（画像の遅延読み込み）を付けると、Core Web Vitals の LCP が遅れます。検証したページでは、外すだけで Lighthouse の LCP ...

flex アイテムの幅は、flex-basis でも width でも伸び縮みの結果はほぼ同じです。差が出るのは、中身が指定より長いときと縦並びのときでした。横並びのカードやサイドバーの幅を決める場面で、どちらを書けばよいかを、幅を測 ...

flex-direction: row-reverse や grid-template-areas で並べ替えると、Tab キーで移る順番が見た目とずれます。CSS の reading-flow で順番を見た目に合わせる方法を、Chr ...

CSS の sin() と cos() に角度を渡して半径を掛けると、要素を円の上に並べられます。真上から並べる角度、sibling-index() を使う書き方、半円への並べ方、回転のさせ方を Chromium で確かめました。

CSS の @view-transition を移る前と移った先の両方のページに書くと、同じオリジンのページへリンクで移るときに、画面がクロスフェードします。スライドへの変え方、写真が大きくなる動き、動きが付かない移り方を Chrom ...

CSS の ruby-position に under を書くとルビが文字の下に移り、ruby-align でルビの文字の並べ方を4通りに変えられます。縦書きでの位置、行の間隔への影響、ルビのほうが長いときの親文字の並び方、Chrom ...

CSS の attr() に型や単位を書くと、HTML の data- 属性の値を、幅や角度、色として使えます。書き方と、値が読めないときの代わりの値、カスタムプロパティに入れたときの落とし穴を Chromium で確かめました。

font-size に clamp(1rem, 0.75rem + 1.25vw, 1.5rem) のように書くと、文字の大きさが画面の幅に合わせて変わり、最小と最大の間に収まります。真ん中の式の求め方と、rem を混ぜるとブラウザの ...

表の数字の桁をそろえるには、font-variant-numeric: tabular-nums で数字を同じ幅にし、数字の列を右寄せにします。1 が細いフォントで桁がずれる様子や、小数点をそろえる方法も検証環境で確かめました。

入力欄に required を付け、ラベルと入力欄を包む要素に :has(:required) を当てると、必須の欄のラベルの後ろにだけ CSS で「*」を出せます。入力欄の ::after では表示されないことや、「*」を読み上げさ ...

背景のグラデーションは、background-size で要素より大きく描き、background-position を @keyframes で動かすと流れます。つまずきやすい点と、@property で色を変える方法を Chrom ...

CSS の animation-delay を要素ごとに少しずつずらすと、カードやリストを上から順にふわっと表示できます。fill-mode の both が要る理由、sibling-index() で番号を書かずに済ませる方法、待ち ...

文字を選択したときの色は、::selection に color と background-color を書いて変えます。片方だけ書くと標準の色が消えること、一部分だけ色を変えるときに ::selection ではなく :root:: ...

入力欄の中に虫めがねなどのアイコンを置くには、入力欄とアイコンを包む要素を基準に、アイコンを position: absolute で重ねます。文字と重ならない余白の取り方、アイコンを押しても入力できるようにする pointer-ev ...

アイコンの右上に件数の丸いバッジを付けるには、アイコンの箱に position: relative、バッジに position: absolute を付けます。1桁は丸、2桁以上は横長にする書き方、0件で隠す方法、ボタンの名前に件数を ...

写真に白い枠を付けて rotate で少しずつ傾け、負のマージンでとなりと重ねると、机に置いたプリント写真のように並びます。カーソルを乗せた写真を手前に出す方法のほか、rotate: none の写真が下に隠れることや、傾いた角で横ス ...

背景のストライプは repeating-linear-gradient()、水玉は radial-gradient() と background-size で、画像なしで描けます。縞をタイルで描くときの分け方や、ふちのギザギザの消し方 ...

border-radius に corner-shape: bevel を足すと角が斜めに切れ、scoop や notch ではへこみます。角ごとの指定、値札やチケットの形、枠線と影が形に沿うこと、clip-path との違いも確かめ ...

写真の暗い部分を1色、明るい部分をもう1色にして、その間をつなぐデュオトーンを CSS で作る方法です。指定した2色どおりになる SVG のフィルターと、CSS だけで書ける mix-blend-mode の重ね合わせを、色の数値を測 ...

小さなドット絵を img で拡大すると、境目がぼけます。image-rendering: pixelated を付けると、元のドットのまま拡大されます。crisp-edges との違い、整数倍でない大きさ、背景画像や canvas で ...

親要素に :has() と :nth-child() を組み合わせると、子の数に応じて列数などのレイアウトを CSS だけで切り替えられます。hidden の項目や項目の中の要素まで数えてしまう落とし穴、sibling-count() ...

Unix時間を打てば日時に、日時を選べばUnix時間に変わる入力欄を React で作りました。datetime-local の値をブラウザのタイムゾーンで読む方法、valueAsNumber の落とし穴、秒とミリ秒の取り違え、夏時間 ...

CSS の text-box-trim と text-box-edge を使うと、文字の上下にできる余白を、大文字の上端やベースラインの位置まで削れます。ボタンの文字を上下の中央に置く例や、日本語の文字で気をつけることを Chromi ...

:focus-visible に outline を書くと、Tab キーで選んだときだけ太い枠が出て、ボタンをマウスで押したときには出ません。暗い背景でも見える2色の枠、強制カラーモードで消えない書き方、枠が切れるときの直し方も確かめ ...

CSS の @scope を使うと、指定した要素の中だけにスタイルを効かせ、to で決めた要素から先は外せます。入れ子のテーマで近いほうが勝つ仕組みや、詳細度の数え方も Chromium で確かめました。

:invalid だと、開いた時点で必須の欄が赤くなります。:user-invalid に変えると、入力して欄を離れたときや送信しようとしたときに、間違っている欄だけが赤くなります。赤くなるタイミングも Chromium で確かめまし ...