背景
背景色
背景色を設定できるbackground-colorプロパティのユーティリティクラスが用意されています。su-bg-[COLOR_NAME]-[TONE]クラスを付与することで、カラー名およびトーンに応じた背景色を設定できます。サフィックスとなるカラー名およびトーンについては、Startify-UIのデザイントークンで採用されているカラースキームの配色に対応した色が用意されています。
なお、クラス名にトーンを含めず省略した場合には、指定した色味のトーン4の色で背景色が適用されます。
<div class="su-bg-yellow-3">トーン3のイエローの色で背景色が加わります。</div>クラス名の一覧
※下記リストはトーンのバリエーションを省略しています
| .su-bg-red-[TONE] | 指定したトーンに対応する、パレットカラーで定義されているレッドの色を背景色にします。 |
| .su-bg-orange-[TONE] | 指定したトーンに対応する、パレットカラーで定義されているオレンジの色を背景色にします。 |
| .su-bg-orange-yellow-[TONE] | 指定したトーンに対応する、パレットカラーで定義されているオレンジイエローの色を背景色にします。 |
| .su-bg-yellow-[TONE] | 指定したトーンに対応する、パレットカラーで定義されているイエローの色を背景色にします。 |
| .su-bg-yellow-green-[TONE] | 指定したトーンに対応する、パレットカラーで定義されているイエローグリーンの色を背景色にします。 |
| .su-bg-green-[TONE] | 指定したトーンに対応する、パレットカラーで定義されているグリーンの色を背景色にします。 |
| .su-bg-teal-[TONE] | 指定したトーンに対応する、パレットカラーで定義されているティールの色を背景色にします。 |
| .su-bg-cyan-[TONE] | 指定したトーンに対応する、パレットカラーで定義されているシアンの色を背景色にします。 |
| .su-bg-light-blue-[TONE] | 指定したトーンに対応する、パレットカラーで定義されているライトブルーの色を背景色にします。 |
| .su-bg-blue-[TONE] | 指定したトーンに対応する、パレットカラーで定義されているブルーの色を背景色にします。 |
| .su-bg-blue-violet-[TONE] | 指定したトーンに対応する、パレットカラーで定義されているブルーバイオレットの色を背景色にします。 |
| .su-bg-violet-[TONE] | 指定したトーンに対応する、パレットカラーで定義されているバイオレットの色を背景色にします。 |
| .su-bg-purple-[TONE] | 指定したトーンに対応する、パレットカラーで定義されているパープルの色を背景色にします。 |
| .su-bg-magenta-[TONE] | 指定したトーンに対応する、パレットカラーで定義されているマゼンタの色を背景色にします。 |
| .su-bg-pink-[TONE] | 指定したトーンに対応する、パレットカラーで定義されているピンクの色を背景色にします。 |
| .su-bg-pink-red-[TONE] | 指定したトーンに対応する、パレットカラーで定義されているピンクレッドの色を背景色にします。 |
| .su-bg-gray-cool-[TONE] | 指定したトーンに対応する、グレーカラーで定義されているクールの色を背景色にします。 |
| .su-bg-gray-warm-[TONE] | 指定したトーンに対応する、グレーカラーで定義されているウォームの色を背景色にします。 |
| .su-bg-gray-mono-[TONE] | 指定したトーンに対応する、グレーカラーで定義されているモノクロームの色を背景色にします。 |
| .su-bg-error-[TONE] | 指定したトーンに対応する、ステータスカラーで定義されているエラー・禁止の色を背景色にします。 |
| .su-bg-warning-[TONE] | 指定したトーンに対応する、ステータスカラーで定義されている注意・警告の色を背景色にします。 |
| .su-bg-success-[TONE] | 指定したトーンに対応する、ステータスカラーで定義されている成功・許可・完了の色を背景色にします。 |
| .su-bg-info-[TONE] | 指定したトーンに対応する、ステータスカラーで定義されている通知・進行中の色を背景色にします。 |
| .su-bg-negative-[TONE] | 指定したトーンに対応する、ステータスカラーで定義されている中止・終了の色を背景色にします。 |
| .su-bg-base-[TONE] | 指定したトーンに対応する、テーマカラーで定義されているベースカラーの色を背景色にします。 |
| .su-bg-primary-[TONE] | 指定したトーンに対応する、テーマカラーで定義されているプライマリーカラーの色を背景色にします。 |
| .su-bg-secondary-[TONE] | 指定したトーンに対応する、テーマカラーで定義されているセカンダリーカラーの色を背景色にします。 |
| .su-bg-accent-[TONE] | 指定したトーンに対応する、テーマカラーで定義されているアクセントカラーの色を背景色にします。 |
| .su-bg-white | 白（#FFFFFF）の色を背景色にします。トーンのバリエーションはありません。 |
| .su-bg-black | 黒（#000000）の色を背景色にします。トーンのバリエーションはありません。 |
背景画像の基準位置
背景画像の基準位置を設定できるbackground-positionプロパティのユーティリティクラスが用意されています。su-bg-position-[POSITION_X]-[POSITION_Y]クラスを付与することで、それぞれ対応する背景画像の基準位置が設定されます。
<div class="su-bg-position-right-top" style="background-image: url(./images/photo.jpg);">
要素の右上に背景画像が表示されます。
</div>クラス名の一覧
| .su-bg-position-left-top | 水平方向左側、垂直方向上側にを基準に背景画像が設定されます。 |
| .su-bg-position-left-center | 水平方向左側、垂直方向中央にを基準に背景画像が設定されます。 |
| .su-bg-position-left-bottom | 水平方向左側、垂直方向下側にを基準に背景画像が設定されます。 |
| .su-bg-position-center-top | 水平方向中央、垂直方向上側にを基準に背景画像が設定されます。 |
| .su-bg-position-center-center | 水平方向中央、垂直方向中央にを基準に背景画像が設定されます。 |
| .su-bg-position-center-bottom | 水平方向中央、垂直方向下側にを基準に背景画像が設定されます。 |
| .su-bg-position-right-top | 水平方向右側、垂直方向上側にを基準に背景画像が設定されます。 |
| .su-bg-position-right-center | 水平方向右側、垂直方向中央にを基準に背景画像が設定されます。 |
| .su-bg-position-right-bottom | 水平方向右側、垂直方向下側にを基準に背景画像が設定されます。 |
背景画像のサイズ・繰り返し・固定表示
背景画像のサイズ、繰り返しなどの設定ができるbackground-size、background-repeat、background-attachmentプロパティのユーティリティクラスが用意されています。
<div class="su-bg-cover su-bg-position-center-center" style="background-image: url(./images/photo.jpg);">
背景画像が要素サイズに合わせて全体に表示されます。
</div>クラス名の一覧
| .su-bg-cover | 背景画像を元の比率を保持したまま、要素全体に広がるように表示します。 |
| .su-bg-contain | 背景画像を元の比率を保持したまま、要素のサイズに合わせてトリミングせずに表示します。 |
| .su-bg-repeat | 背景画像を水平方向と垂直方向に繰り返して表示します。 |
| .su-bg-repeat-x | 背景画像を水平方向のみに繰り返して表示します。 |
| .su-bg-repeat-y | 背景画像を垂直方向のみに繰り返して表示します。 |
| .su-bg-repeat-none | 背景画像を繰り返さずに表示します。 |
| .su-bg-fixed | スクロール時に背景画像を固定して表示します。 |