フォームオブジェクトにふさわしい枠線を設定しましょう

10月 27, 2026 1 読了時間

適切に選択された枠線色は、フォームの理解を助け、より洗練された統一感のある外観を実現します。重要なフィールドを強調したい場合、オブジェクトのグループを区別したい場合、あるいは単にアプリケーションのビジュアルアイデンティティに合わせたい場合でも、枠線はUIデザインにおいて効果的な要素となります。

4D 21 R5 以降では、静的テキストや入力オブジェクトなど、テキストを含むオブジェクトについて、フォントの色とは独立して枠線の色を定義できるようになりました。また、サブフォームやスピナーなど、テキスト色を持たないオブジェクトに対しても枠線の色を指定できるため、より幅広いフォームオブジェクトにおいて枠線を統一的に制御できます。フォームエディタで設定したり、4Dコードで動的に更新したり、CSSを通じて適用したりすることができます。

フォームエディタでの枠線の色の設定

新しい「border color」プロパティにより、対応する各オブジェクトに専用の枠線が設定できるようになりました。オブジェクトを選択し、インスペクタの「Border」セクションで色を選択してください。

静的テキストや入力オブジェクトなど、文字色を持つオブジェクトについては、枠線を独立して定義できるようになりました。サブフォームやスピナーなど、文字色を持たないオブジェクトについては、このプロパティを使用することで枠線を直接制御できます。

このプロパティは、「実線」および「点線」の境界線スタイルで機能します。フォント色を持つオブジェクトの場合、デフォルト値は「フォントと同じ」です。テキスト色を持たないオブジェクトの場合、デフォルト値は「自動」です。これらのデフォルト設定により、既存のフォームの外観を維持しつつ、必要に応じて個別の枠線を定義することができます。

たとえば、テキストの色を際立たせたまま、より控えめなアウトラインを使用したり、入力フィールドのグループに共通のアクセントカラーを適用したり、他の視覚的プロパティを変更することなく、さまざまな種類のフォームオブジェクトに統一された枠線を適用したりすることができます。

実行時に枠線を更新する

アプリケーションの状態によって、オブジェクトの他の色とは独立して枠線の表示を変更できるようになりました。現在の入力項目を強調表示したり、検証上の問題を通知したり、アクションが必要なリストに注意を向けさせたりすることができます。この同じアプローチは、テキスト色を持たないオブジェクトに対しても使用できます。たとえば、特定の枠線を色付けしてサブフォームを視覚的に区別したり、注意が必要な際にスピナーを強調表示したりすることができます。

たとえば、ユーザーがフォームを検証する際、入力の枠線を変更し、その横に追加のメッセージを表示することで、無効な値を即座に指摘できます。

// Example called when the user validates the form.
If (Not(Is valid email(Form.email)))
    OBJECT SET BORDER STYLE(*; "email"; Border plain)
    OBJECT SET RGB COLORS(*; "email"; "#D34145"; ""; ""; "#F89794")
    OBJECT SET VISIBLE(*; "labelEmailError"; True)
Else
    // Restore the application's normal input border color.
    OBJECT SET BORDER STYLE(*; "email"; Border plain)
    OBJECT SET RGB COLORS(*; "email"; "#FFFFFF"; ""; ""; "#BEDAFF")
    OBJECT SET VISIBLE(*; "labelEmailError"; False)
End if

また、リストボックスの外枠と内部のグリッド線を枠線で統一することで、リスト全体に一貫した外観を作り出すこともできます。

// Set the list box's border color.
OBJECT SET BORDER STYLE(*; "ordersList"; Border dotted)
OBJECT SET RGB COLORS(*; "ordersList";""; ""; ""; "#336699")
// Use the same color for the inner grid lines.
LISTBOX SET GRID COLOR( *; "ordersList"; "#336699"; True; True)

また、フォームのロジックでオブジェクトの視覚的な状態を維持または再利用する必要がある場合、現在の枠線を取得することもできます。

// Read the current colors of a hierarchical list.
OBJECT GET RGB COLORS(*; "categories"; $fontColor; $backgroundColor; $alternateColor; $borderColor)

CSS を使用してスタイルの一貫性を保つ

プロジェクトですでにフォームのスタイリングに CSS クラスを使用している場合、「borderColor」も同じワークフローに組み込むことができます。枠線のスタイルと色をまとめて定義し、同じ視覚的表現を共有すべきオブジェクト間でそのクラスを再利用します。

input {
    borderStyle: plain;
    borderRadius: 4;
    borderColor: #0093F5;
}

.secondary-list {
    borderStyle: dotted;
    borderColor: #336699;
}

CSSを使用することで、各オブジェクトを個別に編集することなく、ライトとダークの表示ルールを維持したり、フォーム全体に一貫した視覚スタイルを適用したりすることが容易になります。

フォームのためのより明確な視覚的表現

新しい border-color プロパティを使用すると、フォームオブジェクトをより正確に制御できます。

必要に応じて、フォントの色とは独立して、フォームオブジェクト専用の境界線色を設定できます。
このプロパティは、フォームエディタまたはCSSを通じて設定できます。
「OBJECT SET RGB COLORS」および「OBJECT GET RGB COLORS」を使用して、実行時に境界線の色を読み取り、更新できます。
デフォルト値の「likeFont」および「automatic」を使用することで、既存のフォームの外観を維持できます。

フォームエディタで設定する場合、CSSで定義する場合、あるいはアプリケーションロジックによって動的に更新される場合を問わず、境界線をフォームの視覚的表現の意図的な要素として活用できるようになりました。