最新のユニバーサル・テーマのリファレンスは、以下より参照できます。
ユニバーサル・テーマのリファレンスは、APEXアプリケーションです。このAPEXアプリケーションはサンプル・アプリケーションとして提供されているため、ギャラリよりローカルの環境にインストールすることもできます。
apex.oracle.com上のユニバーサル・テーマのリファレンスでは、Theme Versionより過去のユニバーサル・テーマのリファレンスを参照することができます。
サンプル・アプリケーションに含まれるユニバーサル・テーマのリファレンス・アプリケーションには、そのOracle APEXのバージョンと同じバージョンのユニバーサル・テーマのリファレンスだけが含まれます。
最初にChange Logを確認します。
Change Logに記載されている、新しいユーティリティ・クラスが本記事の紹介範囲です。
ユニバーサル・テーマの（CSS）ユーティリティ・クラスの説明は、Referenceに含まれています。
Color, Status, and Style ModifiersとしてShadow Utility Classが追加されています。
リージョンに影をつけるクラスです。
Layout Modifiersとして、フレックス・ボックス内での表示順序を決めるクラスが追加されています。
順序を指定するu-order-0, u-order-1といったクラスは、以前のバージョンでもありました。ユニバーサル・テーマ24.2では、viewportのサイズ（つまり画面の横幅）に依存して表示順序を指定するクラスが追加されています。
Marginを指定するクラスに変更および追加があります。
ユニバーサル・テーマ24.2以前では、マージンを指定するCSSクラス名はmarginで始まっていました。このCSSクラス名はu-marginで始まるように変わります。ユニバーサル・テーマ24.2でもmarginで始まるCSSクラスは使えるようですが、できるだけu-marginで始まるクラス名を使うべきです。
その他に以下の変更があります。
- Directionにblockとinlineが追加されました。
- Spacingにxlが追加されました。
- クラスとしてu-margin-xlが追加されました。
- margin-autoのクラス名がu-margin-inline-autoに変更されました。
Content Modifiersとして沢山のクラスが追加されました。
Headingsを指定するクラスが追加されました。
CSSクラス名はu-text-headingで始まるか、u-text-titleまたはu-text-subtitleで始まります。
CSSクラス名はu-text-bodyで始まるか、u-text-titleまたはu-text-captionで始まります。
Text Transformのクラスが追加されました。
u-textUpperと同じ効果のu-text-uppercase、u-textLowerと同じ効果のu-text-lowercaseです。
u-textStart、u-textCenter、u-textEnd、u-textInitCapについては、u-text-で始まるクラス名を割り当てていないため、u-textUpperやu-textLowerがAlignmentと混同されるのを嫌ったように思われます。
Text Styleを指定するクラスが追加されました。
一般に英字を対象とした文字スタイルを日本語の文章に適用しても、英字ほどスタイルに違いが出ません。実際に確認すると、以下のようなスタイルで文章が表示されました。
Line Clamp, Truncate & Hyphenateを指定するクラスが追加されました。
u-lineclamp-1などのクラスは以前のバージョンでもありました。今回の追加は、u-hyphenate（u-hyphen）とu-truncateになります。
u-hypheateではCSSのhyphens属性としてautoが設定されています。これは日本語の文章には効きません。u-truncateでは-webkit-line-clamp属性を使わず、単一行の省略を適用します。
Colorsを指定するクラスが追加されました。
色については、もともと英文でも微妙な違いしかなかったので、日本語も同様でした。
ユニバーサル・テーマのCSS変数のリファレンスとして、以下のページが参照できます。Oracle APEXのインストール・メディアに含まれているファイルなので、CDN上のファイルを参照するときは、パスにパッチ番号が入ります。
CoreおよびTheme StyleごとのCSS変数を確認できます。
今回の記事は以上になります。
完
