メインコンテンツまでスキップ

Utility

ComponentとProjectレイヤーのObjectのモディファイアで解決することが難しい・適切では無い、わずかなスタイルの調整のための便利クラスなどを定義します。

Utilityは、Component、ProjectレイヤーのObjectを無尽蔵に増やしてしまうことを防いだり、またこれらのObject自体が持つべきではないmarginの代わりに.mbs { margin-bottom: 10px; }のようなUtility Objectを用いて、隣接するモジュールとの間隔をつくるといった役割を担います。

またclearfixテクニックのためのルールセットが定義されているヘルパークラスも、このレイヤーに含めます。

接頭辞は.u-を利用します。

代表的なUtilityクラス​

メモ

案件独自に追加・編集されている可能性がありますので参考程度にしてください。

.u-sp-only / .u-pc-only​

各ブレークポイントのレイアウトのみに表示させます。

クラス名<= 750px750px < and <= 1060px1060px <
.u-pc-only❌❌✅
.u-under-pc-only✅✅❌
.u-tb-only❌✅❌
.u-over-sp-only❌✅✅
.u-sp-only✅❌❌
補足

上記のブレークポイントは例です。プロジェクトに合わせてブレークポイントを変更してください。

メモ

以前は.sp、.pcというクラス名で利用していました。

.u-font-sans / .u-font-serif​

ゴシック体、明朝体のフォント指定を行います。

.u-anchor-tel​

電話リンクのスタイルを指定します。このクラスはPCデバイスで電話リンクをクリックできないようにするために使用されます。

And more...​

プロジェクトごとに使用されるUtilityクラスが多数あります。プロジェクトで使用されているUtilityクラスを確認してください。