コンテナクエリ（@container）は、画面ではなく部品を置いた箱の幅で見た目を切りかえるCSSです。カード・見出し・ボタン・お知らせ一覧の4種類のコピペ用コードと、container-typeの付け方、@mediaとの使い分け、文字を大きくしたときの配慮、使う場面と使わない場面をまとめました。

写真2〜3枚をずらして重ねる並べ方を、CSSのグリッドだけで作る方法です。2枚をずらす・散らす・文字の箱を重ねる・丸い写真を添える4種類のコピペ用コード、重なる量や角度の比較、z-indexとHTMLの順番、スマホでの重ね方、KAKERUの使いどころをまとめました。

CSSの:has()は「中に条件に合うものを持つ要素」を選ぶ書き方です。画像の有無・チェックの状態・項目の数を見て外側の箱の見た目を変える4種類のコピペ用コードと、対応していないブラウザへの備え、キーボード操作と色の配慮、使う場面と使わない場面をまとめました。

端末の「動きを減らす」設定を、CSSのprefers-reduced-motionで受け取る方法です。飾りの動きを止める、大きな移動をフェードに置きかえる、ホバーの動きを設定がオフの人にだけ足す、JavaScriptの動きをmatchMedia()で合わせるの4つの型と、情報まで消さない注意点、使う場面をまとめました。

星の評価（★）をHTMLとCSSで作る方法です。background-clip: textとmaskで平均点を小数まで塗る形、ラジオボタンと:has()で押して選ぶ形など、コピペで使える4種類と、数字と件数を並べる理由、読み上げとキーボード操作の配慮、使う場面と使わない場面をまとめました。

画像の角をclip-pathで斜めに切る方法と、カードに付けるリボン3種類（斜めの帯・端から飛び出すリボン・しおり）をCSSだけで作る方法です。コピペ用コード、角を切る大きさや帯の文字の比較、リボンの色のコントラスト、文字をHTMLで書く理由、KAKERUの使いどころをまとめました。

進み具合のバー（プログレスバー）をHTMLのprogress要素とCSSで作る方法です。コピペで使える4種類と、::-webkit-progress-valueと::-moz-progress-barを分けて書く理由、:indeterminateの使い方、名前とコントラストの配慮、JavaScriptで進み具合を書きかえる応用、使う場面と使わない場面をまとめました。

SVGの線が、ペンで描くように引かれていくアニメーションをCSSで作る方法です。コピペで使える4種類と、pathLength=”1″の仕組み、描く時間の目安、動きを減らす設定への配慮、画面に入ってから描く応用、使う場面と使わない場面をまとめました。

マウスを乗せると小さな説明が出る「ツールチップ」を、CSSと短いJavaScriptで作る方法です。コピペで使える4種類と、出るまでの待ち時間・幅の目安、キーボードや読み上げへの配慮、スマホで見られない問題、使う場面と使わない場面をまとめました。

見出しの飾りを、画像を使わず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で形まで描く方法、スイッチの作り方と、大きさ・枠線・角の目安、読み上げやキーボード操作への配慮、使う場面と使わない場面をまとめました。