CSSで、スクロールに合わせて要素をふわっと表示する方法
CSS の animation-timeline: view() を使うと、JavaScript なしで、画面に入ってくるカードをフェードインさせられます。範囲の指定、書く順番、親の overflow の注意点などを Chromium ...
CSSで、枠線が回りながら光るボタンを作る方法
枠線が回りながら光るボタンは、@property で角度を登録し、conic-gradient() の向きを @keyframes で回すと作れます。光は同じグラデーションをぼかした疑似要素です。回らない、光が消えるといったつまずきと ...
CSSで文字にグラデーションの色を付ける方法
文字のグラデーションは、背景にグラデーションを敷き、background-clip: text で文字の形に切り抜いて、文字の色を透明にすると作れます。見出しの幅、折り返した行、影の付け方でつまずく点と直し方を、画素の色を測って確かめ ...
CSSのclip-pathで、画像を好きな形に切り抜く方法
clip-path に circle() や polygon() を指定すると、画像を円や六角形に切り抜けます。横長の画像で円が欠ける理由、影の付け方、切り抜いた外側のクリック、形を変えるアニメーションの条件も確かめました。
CSSで、吹き出しの形を作る方法
角を丸めた箱に、幅と高さが 0 の ::after を重ね、border の1辺だけに色を付けると、吹き出しのしっぽになります。枠線のある吹き出しの作り方と、overflow: hidden や影でしっぽが消える・欠ける理由も確かめま ...
CSSで、オンとオフを切り替えるスイッチを作る方法
チェックボックスに role=”switch” を付けて見えなくし、後ろの span に描いたつまみを :checked で動かすと、CSS だけでスイッチになります。キーボードでの操作と、display: n ...
CSSのbackdrop-filterですりガラス風の背景を作る
半透明の背景色に backdrop-filter: blur() を組み合わせると、すりガラス風の背景になります。不透明だと効かないこと、blur の値の決め方、入れ子のすりガラスがぼけない理由と直し方を、画素を測って確かめました。
CSSで、要素を画面の真ん中に置く方法
ダイアログやお知らせを画面の中央寄せにしたいときは、親を display: grid にして place-items: center を付け、min-height: 100dvh で画面の高さに広げます。中身が画面より高く、上の端が切 ...
CSSで、リンクの下線を左から伸ばす方法
リンクの下線を ::after で描き、scaleX(0) から scaleX(1) へ変えて transform-origin を left にすると、左から伸びます。右へ抜けさせる書き方や、2行に折り返すリンクでの直し方も確かめま ...
CSSで、三本線のメニューアイコンを×に変える方法
ハンバーガーメニューを開いている間、三本線のボタンを×にするには、上下の線を真ん中まで動かして45度ずつ回し、真ん中の線を消します。transform の関数の順番を逆にすると×がずれる理由や、開閉の状態を aria-expanded ...
CSSで、マウスを乗せるとカードが浮き上がる動きを付ける方法
:hover のときに transform でカードを数px上げ、box-shadow の影を広げると、浮き上がって見えます。下の端でマウスを動かすと上下に揺れる理由と直し方、キーボードやタッチ、動きを減らす設定への合わせ方も確かめま ...
CSSで、読み込み中に回るアイコンを作る方法
丸くした枠線の上の1辺だけ色を変え、@keyframes で rotate(360deg) まで回し続けると、データの読み込み中に出すローディングスピナーになります。linear を書かないと1周ごとに止まりかける理由、span で作 ...
CSSで、押したときに沈むボタンを作る方法
ぼかしのない box-shadow で側面を描き、押している間（:active）だけ transform で下げると、沈むボタンになります。上の端を押すと click が届かないことがある理由と直し方、disabled やキーボードで ...
Reactで、時刻を選ぶ入力欄を作る方法
時刻を選ぶ入力欄を、input type=”time” と React の state で作りました。15分単位にする step、日付をまたぐ min と max、表示と value の形の違い、ピッカーに s ...
Reactで、親子のチェックボックスの「一部だけ選択」を表す方法
孫まで続くチェックボックスで、子が一部だけ選ばれた親に横線を出す書き方です。選べる項目を「すべて」で全選択する、絞り込みの一覧にも使えます。選んだ項目の id だけを state に持ち、親の表示は毎回数えて決めます。横線を出す in ...
Reactで、パスワードの表示と非表示を切り替える方法
パスワードの欄の横に目のアイコンのボタンを置き、押すたびに入力した文字を見せたり隠したりする部品を React で作りました。ボタンの type、aria-pressed の付け方、キーボードでの操作、フォーカスとカーソルの位置を、検 ...
Reactで、入力した文字数を数えて上限を知らせる方法
入力欄の下に「あと○文字」を出し、上限が近づいたら色を変え、超えたら送信を止める部品を React で作りました。絵文字を1文字と数える方法、maxLength で入力を止めたときに起きること、変換中の文字の扱いを、検証環境で確かめて ...
Reactで、開始日と終了日を選ぶ入力欄を作る方法
開始日と終了日を選ぶ入力欄を、input type=”date” を2つ並べて React で作りました。終了日の min に開始日を渡す書き方、開始日を後ろにずらしたときの扱い、送信される値、日数の計算での夏 ...
Reactで、星の数で評価する入力欄を作る方法
星をクリックして1〜5の評価を選ぶ入力欄を、React と radio ボタンで作りました。マウスを乗せたときの見え方、矢印キーでの操作、フォームで送られる値、必須にしたときの動きを、検証環境で確かめています。
Reactで、detailsとsummaryを使ってアコーディオンを作る方法
details と summary でアコーディオンを作ると、開閉とキーボード操作はブラウザに任せられます。React の state で開閉を持つときに onToggle が要る理由、name 属性で1つだけ開く作り、三角の消し方と ...