メインコンテンツにスキップ

フォームのスタイルを整える(未)

Hanasaki avatar
対応者:Hanasaki
今日アップデートされました

こんにちは。Hanasakiです。

フォームのスタイルを調整します。

ご承知のように、dpdpはデザイナーのみなさんの創作活動に

予断を与えるようなプリセットのパーツは極力置かない方針です。

フォームについても同じ考えで、フォームとして機能する条件だけを満たした、

本当に基本的なセットが1つ用意されているだけです。

という訳で、ここから先はみなさんの専門領域です。

自由にカスタマイズしてみましょう。

詳細なカスタマイズについては次の記事に譲るとして、

この記事では、スタイルを整える方法を簡単に紹介します。

では、行きます。

スタイル調整の基本

❶ 背景色を調整する

フォームの背景色は、初期状態では白(#FFFFFF)に設定されています。

そのため、違う背景色や画像の上に置くと、このようになります。

フォームの背景色を変えてみましょう。

白の背景色が設定されているのは、「フォームの整列板」です。

レイヤツリーで「フォームの整列板」を選択して、背景色を「塗りなし」に変更します。

すると、フォームの背景が透過されて、こうなります。

ポイント:白背景に置く時以外は、「フォームの整列板」の背景色を調整しましょう。

❷ テキストのスタイルを調整する

テキストのスタイルは、デザイン画面上部の

スタイルパネルで普通のテキストと同じように調整するだけです。

それとは別に、初期状態のフォームに入っているテキストについて少し説明しておきます。

これらのテキストは、各記入フォームに見出しを付けたい方のために入れてます。

無くてもフォームの動作にはまったく影響はありません。

見出しは必要ない、という方は、下のようにすべて削除してもOKです。

※ フォームからテキストレイヤ(赤枠部分)を削除すると右のミニマムなスタイルになります。

❸ フォームの形を調整する

▶ レイヤとレイヤの間隔を調整する

レイヤツリーで「フォームの整列板」を選択し、プロパティパネルで「隙間」の数値を変更すると、

右のフォームのようにレイヤ間隔が変わります。

▶ すべてのレイヤを左揃え(右揃え)にする

レイヤツリーで「フォームの整列板」を選択し、プロパティパネルの「位置揃え」で左揃え(右揃え)にすると、右のフォームのようにすべてのレイヤが左付きになります。

※ 見出しのテキストが最初から左揃えになっているように見えるのは、中央揃えでも左に付いた状態に

 するため、テキストの横幅をautoではなく、親大して100%にしているからです。

▶ フォームパーツのサイズを変える

こちらの回答で解決しましたか?