テキストスタイル

テキストのスタイルを編集する

Saika avatar
対応者:Saika
一週間前以上前にアップデートされました

テキストボックスを選択すると、スタイルバーに「テキスト」タブが表示されます。ここでテキストのスタイル編集ができます。

なお、テキストのサイズ、行高、文字間は、デザイン上でも調整できます。

サイズと太さ

フォントのサイズは、ピクセル単位で指定します。テキストのフォントによっては、太さ(ウェイト)も変更できます。

文字間と行高

「文字間」は、文字の間隔を設定します。単位は、「em」で、「1em」が標準の文字間です。数字が大きくなるほど文字同士の間隔が広くなります。

「行高」では、テキスト1行あたりの縦幅を設定します。

イタリックと下線

テキストに斜体や下線のスタイルをかけることができます。

テキストの色は、カラーパレットを開いて指定します。単色やグラデーションの設定が可能です。

テキストグラデーション設定時の注意点

  • テキストグラデーションと併用できない設定

    グラデーションを設定しているテキストボックスでは、以下の設定はできません。

    • テキストボックスの背景色

    • 下線

  • アニメーションの設定について

    • ブラウザの互換性
      グラデーションにトランジション(時間、遅延、イージング)を設定するとなめらかな色の変化が表現できます。なおこの表現にはCCSの「@property」ルールを利用しており、一部ブラウザではサポートされていません。詳細は、以下のサイトをご覧ください。 "@property" | Can I use... Support tables

    • 条件付きスタイルで「単色 → グラデーション」変化を設定した際、文字が一瞬消えてしまいます。

  • テキストグラデーション設定不可要素
    フォームパーツの<input>, <textarea>, <select>には、テキストグラデーションは設定できません。

配置と文字組み

テキストの配置を、左端揃え、中央揃え、右端揃え、両端揃えから選択できます。

テキストを両端揃えにすると、テキストの各行が均等に空白を含むように調整され、左右の端が揃えられます。ただし、最終行の場合は左揃えになります。

また、文字組みの方向は以下から選択できます。

設定

方向

横書き

通常の横書き

横書き(文字詰め有)

テキストの文字が詰められた横書き

縦書き

日本フォントの縦書き

縦書き(英文字縦)

英文字フォントの縦書き

シャドウ

テキストの影が設定できます。プリセットされたシャドウから選択したり、自由に詳細を調整することもできます。

設定項目

効果

X

左右にずらす

Y

上下にずらす

Blur

ぼかし

text style size weight align

縦書き 横書き 文字詰め

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