WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

最新のCSSを理解する「State of CSS」


「State of CSS」とは、CSSの最新トレンドや開発者の利用状況を調査・発表する年次調査サイトのことです。
Web開発者向けにCSSの機能の認知度や利用率を調査し、トレンドを可視化しています。
開発者が最新のCSS機能を「知っているか」「使っているか」を把握し、どの機能が普及しているかを知るのに役立ちます。



2025.stateofcss.com



:hasを使ってみる

「特定の子孫要素を持つ親要素」や「特定の兄弟要素を持つ要素」など、要素の内部状態や周辺要素に基づいてスタイルを適用できる強力な疑似クラスです。これにより、従来JavaScriptが必要だった「子要素の状態を見て親要素のデザインを変える」「兄弟要素の有無でスタイルを変える」といったことが、CSSだけで実現可能になり、コードの簡略化と表現力向上に繋がります。

正しいホバーアニメーション


See the Pen
:hasを使ったホバーアニメーション
by yachin29 (@yachin29)
on CodePen.


picsum.photos


ics.media