コンテナクエリ（@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種類と、出るまでの待ち時間・幅の目安、キーボードや読み上げへの配慮、スマホで見られない問題、使う場面と使わない場面をまとめました。