見出しの飾りを、画像を使わずCSSだけで作る方法です。コピペで使える5種類と、線の太さ・マーカーの高さの目安、スマホで崩れやすいところ、見出しのタグの正しい使い方、使う場面と使わない場面をまとめました。

スマホやパソコンのダークモードに合わせて、CSSでサイトの色を切りかえる方法です。コピペで使える4種類と、背景・文字・リンクの色の目安、ロゴや影の扱い、切りかえボタンの読み上げへの配慮、使う場面と使わない場面をまとめました。

入力欄を選んだときに「いまここに入力している」が分かる見た目を、CSSで作る方法です。:focusで枠と輪を変える基本形、下線が伸びる形、見出しが上に動く形、:focus-withinで箱ごと変える検索欄の4種類と、数値の目安、キーボード操作や強制カラーモードへの配慮、使う場面と使わない場面をまとめました。

会社案内などの「120社」「創業25年」といった数字を、0から数え上げて見せるカウンターです。CSSだけで作る方法と短いJSで作る方法、桁区切りの付け方、画面に入ったら1回だけ数える書き方、数える時間の目安、aria-liveを付けない理由、使う場面と使わない場面をまとめました。

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

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

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

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

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