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

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

チラシでおなじみの袋文字は、WEBでも画像を作らずCSSだけで作れます。中が抜けた文字・袋文字・縁＋ずらした影・写真の上でも読める白文字・影を重ねて作る縁の5種類を、見本とコピペ用のコードで紹介します。

メニューの文字にマウスを乗せると下線が伸びる動きは、JavaScriptなしでCSSだけで作れます。左から伸びる・真ん中から広がる・右へ消える・マーカー・最初からある下線が動くの5種類を、自動で動く見本とコピペ用のコードで紹介します。

見出しの文字をグラデーションにする表現は、画像を使わずCSSだけで作れます。2色・3色ななめ・色が流れる・一部の言葉だけ・上下で塗り分けの5種類を、見本とコピペ用のコードで紹介します。

ボタンにマウスを乗せたときの動きは、JavaScriptなしでCSSだけで作れます。色が入れかわる・ふわっと浮く・ふくらむ・矢印が進む・左から色が塗られるの5種類を、自動で動く見本とコピペ用のコードで紹介します。

ページの読み込み中に出る「くるくる」は、JavaScriptなしでCSSだけで作れます。回る輪・跳ねる3つの点・伸び縮みする棒・形を変えながら回る四角・順番に色づく文字の5種類を、動く見本とコピペ用のコードで紹介します。