テキストボックスを選択すると、スタイルバーに「テキスト」タブが表示されます。ここでテキストのスタイル編集ができます。
なお、テキストのサイズ、行高、文字間は、デザイン上でも調整できます。
サイズと太さ
フォントのサイズは、ピクセル単位で指定します。テキストのフォントによっては、太さ(ウェイト)も変更できます。
文字間と行高
「文字間」は、文字の間隔を設定します。単位は、「em」で、「1em」が標準の文字間です。数字が大きくなるほど文字同士の間隔が広くなります。
「行高」では、テキスト1行あたりの縦幅を設定します。
イタリックと下線
テキストに斜体や下線のスタイルをかけることができます。
色
テキストの色は、カラーパレットを開いて指定します。単色やグラデーションの設定が可能です。
テキストグラデーション設定時の注意点
テキストグラデーションと併用できない設定
グラデーションを設定しているテキストボックスでは、以下の設定はできません。
テキストボックスの背景色
下線
アニメーションの設定について
ブラウザの互換性
グラデーションにトランジション(時間、遅延、イージング)を設定するとなめらかな色の変化が表現できます。なおこの表現にはCCSの「@property」ルールを利用しており、一部ブラウザではサポートされていません。詳細は、以下のサイトをご覧ください。 "@property" | Can I use... Support tables
テキストグラデーション設定不可要素
フォームパーツの<input>, <textarea>, <select>には、テキストグラデーションは設定できません。
配置と文字組み
テキストの配置を、左端揃え、中央揃え、右端揃え、両端揃えから選択できます。
テキストを両端揃えにすると、テキストの各行が均等に空白を含むように調整され、左右の端が揃えられます。ただし、最終行の場合は左揃えになります。
また、文字組みの方向は以下から選択できます。
設定 | 方向 |
横書き | 通常の横書き |
横書き(文字詰め有) | テキストの文字が詰められた横書き |
縦書き | 日本フォントの縦書き |
縦書き(英文字縦) | 英文字フォントの縦書き |
シャドウ
テキストの影が設定できます。プリセットされたシャドウから選択したり、自由に詳細を調整することもできます。
設定項目 | 効果 |
X | 左右にずらす |
Y | 上下にずらす |
Blur | ぼかし |
text style
size
weight
align
縦書き
横書き
文字詰め