右パネル上の[テキスト]タブで、テキストの配置やデザインに関する編集ができます。この記事では、色・フォント・サイズ・ウェイト・レイアウト設定、およびテキスト装飾について解説します。
テキストタブで行う編集内容は以下のとおりです。
テキスト自体の編集
テキストスタイルの適用
色の設定
フォント設定
サイズ・ウェイト（太さ）設定
テキストのレイアウト設定
行高
間隔
整列
方向（横書き・縦書き）
テキスト装飾の設定
シャドウ
下線・斜体
大文字・小文字
Tips: テキストスタイル機能を使うと、フォントに加え、サイズや文字間などのスタイルを一括管理できます。
テキストの編集箇所を開く
色の設定
色の設定にはカラーパレットを使用します。
設定方法の詳細は、カラーパレットで色を設定するをご覧ください。
注意点：テキストグラデーション設定時の注意点
テキストグラデーションと併用できない設定
グラデーションを設定しているテキストボックスでは、以下の設定はできません。
テキストボックスの背景色
下線
シャドウ設定
シャドウの設定は可能ですが、グラデーションカラーよりも前面にシャドウが表示されます。必要に応じて画像での表現などご検討ください。アニメーションの設定について
ブラウザの互換性
グラデーションにトランジション（時間、遅延、イージング）を設定するとなめらかな色の変化が表現できます。なおこの表現にはCCSの「@property」ルールを利用しており、一部ブラウザではサポートされていません。詳細は、以下のサイトをご覧ください。 "@property" | Can I use... Support tables
条件付きスタイルで「単色 → グラデーション」変化を設定した際、文字が一瞬消えてしまいます。
テキストグラデーション設定不可要素
フォームパーツの<input>, <textarea>, <select>には、テキストグラデーションは設定できません。
フォントの設定
フォントの設定方法は、以下のヘルプ記事を参照してください。
サイズ・ウェイト（太さ）設定
テキストサイズ
次の4種類の単位を用いて、テキストサイズを設定します。適切な単位を選択することで、レスポンシブなデザインや柔軟なレイアウトを実現できます。
Point：フォントサイズとレスポンシブデザイン
フォントサイズは、rem・vh・vwなどの相対単位での指定を推奨します。相対単位を使うと、画面サイズが変わっても文字サイズが自動で調整され、さまざまなデバイスで見やすさを保てます。
レスポンシブデザインの詳細は、レスポンシブデザインを設定するを参照してください。
px
rem
vh
vw
px（ピクセル）
画面サイズや親ボックスに依存しない固定値の単位です。画面サイズなどに影響されず、常に指定したサイズで表示されます。
rem（相対的な単位）
HTMLのルート要素のフォントサイズを基準にする相対的な単位です。閲覧ブラウザの文字サイズ（通常16px）がremの基準値として機能します。
サイズ指定は1remを基準に倍数で行います。たとえば、デフォルト設定の16pxでは、「1rem」は16px、「2.5rem」は40pxになります。閲覧者がブラウザでフォントサイズを変更した場合、rem単位で指定された要素も自動で調整されるため、アクセシビリティが向上します。
現在、基準となる1remのサイズを指定する機能は提供していません。
vh（ブラウザの縦幅が基準）
ブラウザの縦幅（表示領域）を基準にした単位です。画面の高さに応じてテキストのサイズを可変させることができます。
「5vh」を設定すると、ブラウザの高さ（ビューポート）の5%のサイズでテキストが表示されます。
vw（ブラウザの横幅が基準）
ブラウザの横幅（表示領域）を基準にした単位です。画面の横幅に応じてテキストのサイズを可変させることができます。レスポンシブデザインで、画面幅に合わせてテキストサイズを変更したい場合に適しています。
「5vw」と設定すると、ブラウザ（ビューポート）幅の5%のサイズでテキストが表示されます。
ウェイト（太さ）設定
フォントの種類により、ウェイト（太さ）の変更が可能です。
テキストのレイアウト設定
行高と間隔
「行高」は、テキスト１行あたりの縦幅を設定します。
「間隔」は文字の間隔を設定し、数字が大きくなると間隔が広くなります。
それぞれの単位は%です。
整列
テキストの配置を、左端揃え、中央揃え、右端揃え、両端揃えから選択できます。
テキストを両端揃えにすると、テキストの各行が均等に空白を含むように調整され、左右の端が揃えられます。
ただし、最終行の場合は左揃えになります。
方向
テキストの文字組み（横書き・縦書き）を変更します。
詳細は、テキストの文字組み（横書き・縦書き）を変更するをご覧ください。
テキスト装飾の設定
シャドウ
テキストの影が設定できます。プリセットされたシャドウから選択したり、自由に詳細を調整することもできます。
設定項目 | 効果 |
X | 左右にずらす |
Y | 上下にずらす |
Blur | ぼかし |
下線・斜体
テキストに斜体や下線の装飾ができます。
大文字・小文字
英字のテキストに対して設定できる機能で、入力した文字列は変えずに、表示（大文字・小文字）だけを切り替えます。
英字のテキストを、すべて大文字で見せたいときなどに使います。表示を変えたくなったときは、設定を切り替えるだけで済みます。
たとえば「About us」と入力したテキストボックスは、設定ごとに次のように表示されます。
設定 | 「About us」の表示 |
そのまま | About us |
大文字 | ABOUT US |
小文字 | about us |
先頭大文字 | About Us |
先頭大文字は、すべての単語の先頭を大文字にします。
ブレイクポイントごとに別の設定ができます。
テキストスタイルにも登録できます。ただし、テキストスタイルを適用しているテキストボックスでは、この項目は表示されません。テキストスタイル側で設定してください。
よくある質問
テキストに設定したデザインやレイアウトの設定を登録して、プロジェクト内で使い回すことはできますか？
テキストに設定したデザインやレイアウトの設定を登録して、プロジェクト内で使い回すことはできますか？
テキストスタイルの機能を使えば、デザインやレイアウトを登録して使い回すことが可能です。
全部大文字で入力するのと、「大文字・小文字」機能を使うのと何が違いますか？
全部大文字で入力するのと、「大文字・小文字」機能を使うのと何が違いますか？
「大文字・小文字」は、入力した文字列を変えずに表示だけを切り替えます。文字列そのものを大文字で入力すると、スクリーンリーダーで正しく読み上げられないことがあります。表示だけを変えれば、元の文字列がそのまま残ります。
テキストボックスを選んでも「大文字・小文字」が表示されないのはなぜですか？
テキストボックスを選んでも「大文字・小文字」が表示されないのはなぜですか？
「大文字・小文字」は、テキストスタイルを適用しているテキストボックスでは表示されません。この場合は、テキストスタイル側で設定してください。条件付きスタイルのスクロールエフェクトを編集しているときも表示されません。
align 縦書き 横書き 文字詰め