Blogのデザイン変更した時のCSSのお話。
見てご覧の通りBlogのデザインを再び大幅に変えました。UXPやCEPと違って新しいCSSが使えるので自由度が飛躍的に高くなり別世界に近い環境下でCSS構築ができたので今回少しだけ触れます。今回完全バニラCSSでの構築で、今までブログ用にSassを使っていたのですが思い切って切り替えました。
CSSのネスト
SassではできましたがCSSのネスト化も全てのモダンブラウザーの対応も完了して今回実際に使ってみました。
親要素から子要素の入れ子をそのまま書けるのでかなり便利です、といっても勿論やり過ぎるとあまり良くないですが。みてわかる通りメディアクエリも入れ子にできるのでレスポンシブルの対応も楽になっています。メディアクエリの比較演算子も最近モダンブラウザに対応した機能でUXPとかCEPで使えるかどうか試してないですが怪しいですね。
CSS変数
CSS変数自体UXPでもCEPでも使えますが改めて使うとやはり便利ですね。カラーパターンの管理などJSでなくてもCSSだけでできるようになります。
detailsとsummaryタグ
今回古い記事の日付の一覧などそのまま表示すると冗長的になる要素を折りたたみ式のリストで作成しました。開閉時の動きはJSですがそれ開く、閉じるの要素自体はHTMLのみで実現できています。IEのサポート停止と共にdetailsとsummaryタグを取り上げる記事がいろんなサイトで増えてきました。
GridレイアウトとSubgrid
大きなレイアウト骨組みはGridレイアウトで行っています。CEPでは昔から使えますがUXPでは2025年4月現在未対応です（UXP….）メディアクエリーと組み合わせればレスポンシブル対応も楽なのでこれ無しではもうCSSは組めません。
またカード型のレイアウトでは早速Subgridを使っています。Subgridは最近対応したCSSなのでUXPもCEPも対応していません。今後カード型のレイアウトも楽に組めるようになるでしょう。
まだバニラCSSで不便なこと
メディクエリの数値に変数が使えない
まずメディクエリの数値に変数が使えないようでここは悩みました。今回直接打ちましたが規模が大きなるときついです。現状やり方とかあるのでしょうか。
カラー関数
Sassでいうところのlightenやdarkenのような関数が欲しいです。ベースのカラーを元に明度調整して配置することが多いので。color-mix関数を工夫すればいけるのでしょうか？
import
バニラCSSで一応import機能があるのですが読み込みに時間がかかるなどの話を聞くので使っていませんが実際はどうなのでしょうか。
最後に
Adobeの拡張機能関係の開発があまり進んでいなく、IE以後のモダンWeb環境との差が開く一方で正直UXPの開発などに没頭していると浦島太郎状態になるので定期的にAdobeのアプリケーションと無関係な開発は行いたいと思いました。またCEP上などで実現したいCSSなどを検索して実際コードを使ってみるとCEPやUXPのベースが古すぎて動かないという事案も今後飛躍的に増えてくるでしょう。
