CSS

@starting-styleはcssのみでアニメーションからdisplay:nonenにできる。ショートハンドが似ているanimationも

コンテンツ内のヘッダー、バナーの固定方法。ヘッダー高さ変更時の自動調整、スクロールでの非表示など

要素の高さを揃える方法。display : gridが一番使い勝手が良いが、プラグイン対応でgridレイアウトが使えない場合、js対応方法など

Popoverやdialog要素で作るポップアップ、detailsとsummaryタグで作るアコーディオンUIなど

コンテナ幅によってスタイルが適用するコンテナクエリ（@container）について

設定で変わるwidth要素の比較、インナー幅を超えるネガディブマージンの設定方法、モバイル用UIの単位など。

レスポンシブ時におけるTableレイアウトをdisplay: gridで設定。 横スクロールの注意喚起を行うjsライブラリや重ならない枠線のサンプルなど。

display: grid;のレイアウトの設定。 grid-auto-flowでの縦方向レイアウトやgrid-template-columnsの覚書ほか。

pure css、jsで作るタブ切替。 ハンバーガーやクリック時の背景変更やflexでのレイアウト、SNSボタンサンプルなど。

制作時に多用するコピー用のborderやpolygon、clip-pathで作ったボタンのサンプル

フォント関連の設定。たくさんあるので分割で。 最初に設定しておいた方が良いリガチャ関連やモバイル版のサイズサンプルなど

セレクターの設定。擬似クラス関数 :has()、:nth-child()、:attr()など。 プログラミングの簡略版がcssでできるように

cssを記述する際に最初に設定しておくと後々の設計がスムーズに進行できる。 ショートハンドやビューポートなど