博士

やっほー、ロボ子！今日のITニュースも盛りだくさんじゃぞ！

ロボ子

博士、こんにちは。今日も色々と教えてくださいね！

博士

まずは、JavaScriptなしで特定のフレーズにジャンプできるテキストフラグメントじゃ！`::target-text`でハイライトもできるらしいぞ。

ロボ子

それは便利ですね！長いドキュメントを読むときに役立ちそうです。

博士

`loading="lazy"`で画像の遅延読み込みもできるぞ。`width`と`height`を設定してCLSを回避、`fetchpriority="low"`で優先度を下げるのも忘れずに！

ロボ子

画像の遅延読み込みは、ページのロード時間を短縮するのに効果的ですよね。CLS対策も重要ですね。

博士

スティッキーヘッダーには`scroll-margin-top`か`scroll-padding-top`じゃ！スムーズスクロールには`scroll-behavior: smooth`も忘れずに設定するのじゃ。

ロボ子

アンカーリンクを使うときに、ヘッダーが邪魔になるのを防ぐんですね。スムーズスクロールもユーザー体験を向上させますね。

博士

`content: attr()`でHTML要素の属性値をCSSで表示できるぞ！疑似要素と組み合わせてツールチップも作れるらしい。

ロボ子

JavaScriptなしでツールチップが作れるなんて、すごいですね！

博士

`<dialog>`要素でアクセシブルなモーダルも作れるぞ！`::backdrop`で背景をスタイルして、`open`属性で表示を制御するのじゃ。

ロボ子

モーダルはウェブサイトでよく使うので、`<dialog>`要素で簡単に実装できるのは助かりますね。

博士

さらに！`[popover]`属性、`popovertarget`属性、`popovertargetaction`属性で、メニューやトースト、ライトオーバーレイも作れるらしいぞ！`::backdrop`と`:popover-open`も利用可能じゃ。

ロボ子

Popover API、初めて聞きました！色々なUIコンポーネントが簡単に作れるんですね。

博士

CSSアンカーポジショニングで、要素を別の要素に対して相対的に配置できるぞ！`anchor()`関数と`position: absolute`を組み合わせるのじゃ。

ロボ子

要素の配置がより柔軟になりますね。デザインの幅が広がりそうです。

博士

CSSスクロールスナップで軽量なカルーセルも作れるぞ！`scroll-snap-type`と`scroll-snap-align`でスナップ動作を制御するのじゃ。

ロボ子

カルーセルは実装が面倒なイメージがありましたが、CSSで簡単に作れるのは嬉しいです。

博士

`light-dark()`関数と`color-scheme`プロパティで、ライト/ダークテーマも実装できるぞ！`:has()`疑似クラスでテーマ切り替えトグルも作れるらしい。

ロボ子

ダークテーマは目に優しいので、実装したいと思っている人も多いはずです。JavaScriptなしで切り替えトグルが作れるのは画期的ですね。

博士

ふむふむ、今日のニュースも盛りだくさんじゃったな！

ロボ子

本当にそうですね！博士のおかげで、今日もたくさんのことを学ぶことができました。

博士

どういたしまして！最後に一つ、ロボ子。今日のニュースを全部覚えたら、私に美味しいプリンを作ってくれるかのじゃ？

ロボ子

ええと…それはまた別の話、ということで！