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

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

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

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

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

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

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

写真の上の白い文字が読めない問題は、画像と文字のあいだに暗い層を1枚はさむとCSSだけで解決できます。全体を暗く・下だけ暗く・色を重ねる・文字の後ろに帯・ぼかして暗くの5種類を、見本とコピペ用のコードで紹介します。

質問を押すと答えが開く「アコーディオン」は、JavaScriptなしで、HTMLのdetailsとsummaryにCSSで見た目を付けるだけで作れます。矢印が回る・＋が−に変わる・Q&A・1つだけ開く・中身がふわっと出るの5種類を、自動で動く見本とコピペ用のコードで紹介します。

ブログの一覧などで見る、画像にマウスを乗せると枠の中で拡大する動きは、JavaScriptなしでCSSだけで作れます。ふわっと拡大・寄りから引きへ・拡大＋少し暗く・カード全体に乗せる・丸い画像の5種類を、自動で動く見本とコピペ用のコードで紹介します。