- ポップアップとアコーディオンUI
Popoverやdialog要素で作るポップアップ、detailsとsummaryタグで作るアコーディオンUIなど
- コンテナクエリ(@container)
コンテナ幅によってスタイルが適用するコンテナクエリ(@container)について
- width単位
設定で変わるwidth要素の比較、インナー幅を超えるネガディブマージンの設定方法、モバイル用UIの単位など。
- Tableレイアウト
レスポンシブ時におけるTableレイアウトをdisplay: gridで設定。
横スクロールの注意喚起を行うjsライブラリや重ならない枠線のサンプルなど。
- display: grid;
display: grid;のレイアウトの設定。
grid-auto-flowでの縦方向レイアウトやgrid-template-columnsの覚書ほか。
- メニュー
pure css、jsで作るタブ切替。
ハンバーガーやクリック時の背景変更やflexでのレイアウト、SNSボタンサンプルなど。
- ボタン諸々
制作時に多用するコピー用のborderやpolygon、clip-pathで作ったボタンのサンプル
- 設定:Font関連
フォント関連の設定。たくさんあるので分割で。
最初に設定しておいた方が良いリガチャ関連やモバイル版のサイズサンプルなど
- 設定:セレクター
セレクターの設定。擬似クラス関数 :has()、:nth-child()、:attr()など。
プログラミングの簡略版がcssでできるように
- 諸々最初に設定
cssを記述する際に最初に設定しておくと後々の設計がスムーズに進行できる。
ショートハンドやビューポートなど