スタイル (Style)

赤い四角がスタイルを設定する場所です。

スタイルとは、選択したウィジェットの文字フォント、色、サイズ、背景、上下の幅や余白、境界など、外見を装飾するものだと思っていただければいいです。

スタイルも上記のようにボタンウィジェットで説明します。

(1) タイポグラフィ

• ファミリー：文字フォントを指定します。

• サイズ：文字の大きさを指定します。

• ウェイト：文字の太さを指定します。

• トランスフォーム：大文字/小文字を指定します。

• スタイル：文字の斜体を指定します。

• デコレーション：文字に線を追加できます。

• 行の高さ：文字の上下の間隔を調整します。

• 文字間：文字単位の左右の幅を調整します。

• 単語間：単語単位で左右の幅を調整します。

文字間と単語間の違いが少し混乱するかもしれませんが、下の実際に適用したものを見れば理解しやすいでしょう。

(2) テキストシャドウ

私はあまり使用しない機能ですが、文字の背後に影の効果を入れることができます。下のボタンを参考にしてください。

設定によって異なりますが、確実な違いを示すために過剰にエフェクトを加えたことを前もって説明します。

(3) ノーマル / ホバー

ボタンにマウスを乗せると色が変わったり、このボタンが動作するんだなと思うことがよくありますよね？その機能を設定するものです。

ホバーは通常、マウスホバーを指しますが、ヘリコプターがその場で飛んでいることもホバリングと表現されます。マウスをボタンの上に置いた時をホバーと表現します。

ノーマルはボタンに触れていない時にどう表示するかの設定で、ホバーはボタンの上にマウスが乗った時にどう変わるかの設定です。

• テキストカラー：テキストの色を指定します。

• 背景タイプ：背景色を単色にするか、グラデーション効果を与えるかを指定します。

• カラー：背景を指定すると表示される設定欄で、背景の色を指定します。

• ボーダーカラー：境界（ボーダー）がある時、境界の色を指定します。

• ホバーアニメーション：ホバー時のエフェクトを指定します。

では、下に設定されたボタンを確認しながらどのような効果があるか確認してみましょう。

(4) ボーダー

ボーダーというのは、上で少し出てきましたが、簡単に言うとテーブルです。

該当ウィジェットのボーダーを設定するものです。難しくないですよ。

• ボーダータイプ：ボーダーをどう設置するか指定します。直線や点線など設定できます。

• 幅：ボーダーの厚さを指定します。

• ボーダー半径：ボーダーの角部分を丸くするか四角くするかの数値です。

• ボックスシャドウ：上で説明したシャドウ機能と似ています。

下の設定されたボタンたちで違いを確認してみてください。

(5) パディング

新しい概念が登場しましたね。パディングと言えば、冬に着る服を思い浮かべるかもしれませんが、パディングの意味は実際には詰め物ということを考えると、意味は同じです。

パディングはそのウィジェットのボーダーに余白を追加する機能だと考えればいいです。

後ろに出てくるマージンという設定があり、これと非常に似ているため、最初はしばしば混乱しました。こう説明すると必ずしも正しいわけではありませんが、私の場合、パディングはウィジェットのサイズを大きくする時に主に使い、マージンはウィジェットのサイズを小さくする時に主に使います。

さあ、それでは見てみましょう。

違いを感じますか？

数字の横にあるpxというのは、ピクセル単位で調整するのか、全体のサイズに対してパーセントで調整するのか設定する機能です。

チェーンの形をした機能は、簡単に言うと同期（SYNC）機能です。車のエアコンにも助手席と運転席を同期する機能がありますよね？そのボタンを有効にして修正すると、トップ、ボトム、右、左の修正値が同じ数字で設定され、調整されます。

これでボタンウィジェットのスタイル設定の説明は終了です。

高度な設定

-内容追加予定-