スマホのメニューボタン（ハンバーガーメニュー）の3本線を、押すと×に変えるCSSです。aria-expandedで開け閉めの状態を持たせる書き方、閉じたメニューをvisibilityで隠す理由、線の太さ・速さ・ボタンの大きさの目安、読み上げやキーボード操作への配慮、使う場面と使わない場面をまとめました。

フォームのチェックボックスとラジオボタンの見た目を、本物のinputを残したままCSSで変える方法です。accent-colorで色だけ変える方法、appearance:noneで形まで描く方法、スイッチの作り方と、大きさ・枠線・角の目安、読み上げやキーボード操作への配慮、使う場面と使わない場面をまとめました。

カードやボタンに付ける影を、CSSのbox-shadowとdrop-shadowで作る方法です。コピペで使える4種類と、ぼかし・濃さ・色の目安、2つの指定の使い分け、影が消える表示やキーボード操作への配慮、使う場面と使わない場面をまとめました。

うしろが透けて見えるすりガラスの背景を、CSSのbackdrop-filterだけで作る方法です。コピペで使える4種類と、ぼかしの強さ・白の濃さの目安、付けたのに効かないときの原因、効かないブラウザへの備え、使う場面と使わない場面をまとめました。

しっぽの付いた吹き出しを、画像を使わずCSSだけで作る方法です。コピペで使える4種類と、しっぽの作り方の仕組み、大きさの目安、影の付け方、スマホと読み上げソフトへの配慮、使う場面と使わない場面をまとめました。

背景のグラデーションをゆっくり動かす表現を、CSSだけで作る方法です。コピペで使える4種類と、速さの目安、上にのせる文字の読みやすさ、動きを減らす設定への配慮、見る人が止められるボタンまでまとめました。

文字を1文字ずつ出すタイピング風の動きを、CSSのアニメーションだけで作る方法です。コピペで使える3種類と、steps()の数の決め方、日本語と英数字の数え方の違い、短い一文に1か所だけ使う判断までまとめました。

ボタンを光らせる・脈打たせる動きを、CSSのアニメーションだけで作る方法です。コピペで使える4種類と、速さの目安、動きを減らす設定への配慮、1ページに1つ・回数を決めて止める判断までまとめました。

写真の高さがばらばらな一覧を、CSSのaspect-ratioとobject-fitでそろえる方法です。16:9のカード・正方形のサムネイル・残す場所の決め方・切らずに全体を見せる形と、値を変えたときの違い、切る・切らないの判断をまとめました。

ページの先頭へ戻るボタンを、リンク1つとCSSで作る方法です。スクロールしたら出す形・読んだ量の輪っか・ページの終わりの文字のリンクと、大きさの目安、キーボードと読み上げへの配慮までまとめました。

スクロールしてもヘッダーが上に残る形を、CSSのposition: stickyで作る方法です。見出し・表の見出し行・横の目次の固定、止まらないときに見直す3つの場所、スマホとキーボードでの配慮までまとめました。

横にスクロールすると1枚ずつピタッと止まるスライドを、CSSだけで作る方法です。scroll-snapの止め方の違い、1枚の幅の決め方、キーボードで動かせるようにする配慮、自動で切り替えない理由までまとめました。