CSS の if() を使うと、カスタムプロパティの値や画面の幅、ブラウザーの対応状況に応じて、1つのプロパティの値をその場で切り替えられます。書き方と、else を書き忘れたときの落とし穴を Chromium で確かめ、対応していな ...

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

CSS の font-feature-settings: “palt” で、かなやかっこ、句読点が字形に合った幅になり、文字のあいだが詰まります。詰まる幅、効かないフォント、子要素で外れる書き方、縦書きの vp ...

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

CSS の font-size-adjust で、英字フォントの小文字の高さを日本語フォントに合わせられます。Chromium では、font-family に並べただけだと日本語も一緒に拡大されました。英字を別の要素に分ける書き方と ...

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

CSS の text-autospace: normal を書くと、漢字やかなと半角の英数字のあいだに、1/8文字分のすきまが入ります。ブラウザーの初期値ではすきまが入らないので、書く必要があります。入る場所と入らない場所、pre の ...

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

SVG の textPath で、円や曲線に沿って文字を並べるコンポーネントを React で作ります。円の下側の文字を逆さにしない向き、文字の中心を円に乗せる指定、1周に均等に広げる計算、曲線に収まらないときの警告を、Chromiu ...

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