文字を選択したときの色は、::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 で確かめまし ...

リストの先頭の黒丸は、list-style-type で四角や好きな文字に変えられます。色と大きさだけなら ::marker、①②③のような連番なら @counter-style を使います。記号の位置の違いも確かめました。互換性デー ...

文字の影は text-shadow で付けます。右下に少しずらしてぼかした半透明の影で、文字がふんわり浮いて見えます。影を重ねて厚みを付ける書き方、光らせる書き方、カーソルを乗せると浮く動き、overflow: hidden で影が切 ...

メニューに popover 属性を付けて画面の左端に固定し、transform で画面の外へずらしておくと、ボタンを押したときに端からすべり出ます。スマートフォン向けのページで、ハンバーガーメニューのボタンを押すとリンクの一覧が画面の ...

見出しを display: flex にして、::before と ::after に flex: 1 と border-top を付けると、文字の左右に、残りの幅いっぱいの線が引けます。線を短くする、片側だけにする、長い見出しが折り ...

img の幅と高さを同じにし、object-fit: cover と border-radius: 50% を付けると、横長の画像もゆがまずに丸くなり、border の枠も円に沿います。楕円になるときの直し方、すき間の空け方、グラデー ...

チェックボックスと文字を label で包み、input:checked + span に text-decoration: line-through を書くと、JavaScript なしで、チェックした項目にだけ取り消し線が付きます ...

body を画面の高さ以上の縦並びの flex にし、main に flex: 1 を付けると、中身が少ないページでもフッターが画面の下に来ます。多いときは本文の後ろに続きます。grid や、div で包んだページでの書き方も確かめま ...

数値の入力欄の上下ボタンは、::-webkit-inner-spin-button に -webkit-appearance: none を書くと消えます。個数や金額のような数値を入れる欄で、スピンボタンとも呼ばれるこの上下ボタンを見 ...

select の矢印を変えるには、appearance: none で既定の矢印を消し、背景の SVG か ::after で描きます。フォームのセレクトボックスを、プルダウンの矢印までサイトのデザインに合わせたいときに使える方法です ...

入力した文章を1文ずつに分けて文字数を数え、決めた文字数を超える文だけに色を付ける部品を React で作りました。Intl.Segmenter の文の区切りがかぎかっこで思わぬ位置になること、自分で区切るときの決め方、長い文章での速 ...

文字の上に「﹅」の傍点を付けるには、CSS の text-emphasis に sesame を指定します。形を省くと点が小さくなること、句読点に付かないこと、行の間隔、縦書きやルビとの組み合わせを、Chromium で測って確かめま ...

margin-inline や padding-block などの論理プロパティは、left・right の代わりに「行の始まり・終わり」で余白や線を指定します。右から左に書く言語や縦書きで、どの辺に変わるかを Chromium で測 ...

スクロールバーが出ると、中央寄せの中身がその幅の分だけ左へずれます。html に scrollbar-gutter: stable を指定して幅を空けておく方法と、overflow-y: scroll や both-edges との違 ...

印刷するときだけ使うスタイルは、@media print か、media=”print” を付けた link で読み込む CSS に書きます。メニューを消し、カードを2列にし、日ごとに改ページする例を、Chro ...

CSS の column-count や column-width で、文章を新聞のように複数の段に流す方法です。スマホで段が細くなりすぎない指定、段の間の線、段にまたがる見出し、引用を段の境目で割らない指定を Chromium で確 ...

スクロールバーの色は scrollbar-color、太さは scrollbar-width で変えられます。つまみを丸くするなら ::-webkit-scrollbar を使いますが、標準の2つのプロパティを指定した要素では無視され ...