カードやボタンに付ける影を、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枚の幅の決め方、キーボードで動かせるようにする配慮、自動で切り替えない理由までまとめました。

カードを横に並べて、入りきらない分を自動で次の行へ折り返すCSSグリッドの作り方です。auto-fillとauto-fitの違いを並べて比べ、ボタンの位置をそろえるカード、狭い画面でもはみ出さない書き方、列の数を自分で決めるべき場所までまとめました。

画像を加工せずに、丸・角丸・葉っぱの形・六角形・ふちがふんわり消える丸に切り抜くCSSの作り方です。横長の写真でもつぶれない円の作り方、形を変えたときのaltや影の注意、どんな画像に使い、どんな画像には使わないかまでまとめました。

ホームページの区切りの境目を、斜めや波の形にするCSSの作り方です。下が斜め・上下とも斜めの帯・波・丸いカーブ・少しだけ動く波の5種類を、見本とコピペ用のコードで紹介し、スマホでの見え方や動きへの配慮、使う場所の判断までまとめました。

スクロールして画面に入った要素を、ふわっと表示する動きの作り方です。下から・横から・拡大・順番に・CSSだけの5種類を、自動でスクロールする見本とコピペ用のコードで紹介し、JavaScriptが止まったときや動きを減らす設定への配慮、使う場所の判断までまとめました。

CSSのclamp()を使うと、画面の幅に合わせて、決めた範囲の中で文字や余白の大きさをなめらかに変えられます。キャッチコピー・見出し・余白・カードのすき間の4種類を、幅が変わり続ける見本とコピペ用のコードで紹介し、式の作り方と配慮の注意点もまとめました。

お知らせの文字が流れる帯は、同じ並びを2回置いてCSSで半分だけ動かすと、JavaScriptなしでつなぎ目なく作れます。お知らせバー・大きな文字の帯・写真が流れる・2段で逆向き・止めるボタン付きの5種類を、見本とコピペ用のコードで紹介します。

押すと中身が切り替わるタブは、見えなくしたラジオボタンとCSSの:has()で、JavaScriptなしで作れます。下線が伸びる・見出しタブ・ボタン型・ふわっと出る・横にスクロールの5種類を、見本とコピペ用のコードで紹介します。