テキストボックスのスタイルでは、サイズや色、配置などを編集できます。この記事では、テキストスタイルの基本的な設定方法をご紹介します。

テキストのスタイル変更方法

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

サイズ

テキストのサイズ単位には、px、rem、vh、vwの4種類があります。適切な単位を選択することで、レスポンシブなデザインや柔軟なレイアウトを実現できます。

画面サイズや親ボックスに依存しない固定値の単位です。画面サイズなどに影響されず、常に指定したサイズで表示されます。

HTMLのルート要素のフォントサイズを基準にする相対的な単位です。閲覧ブラウザの文字サイズ（通常16px）がremの基準値として機能します。

サイズ指定は1remを基準に倍数で行います。たとえば、デフォルト設定の16pxでは、「1rem」は16px、「2.5rem」は40pxになります。閲覧者がブラウザでフォントサイズを変更した場合、rem単位で指定された要素も自動で調整されるため、アクセシビリティが向上します。

なお現在のところ、基準となる1remのサイズを指定する機能は提供していません。

ブラウザの縦幅（表示領域）を基準にした単位です。画面の高さに応じてテキストのサイズを可変させることができます。

「5vh」を設定すると、ブラウザの高さ（ビューポート）の5%のサイズでテキストが表示されます。

ブラウザの横幅（表示領域）を基準にした単位です。画面の横幅に応じてテキストのサイズを可変させることができます。レスポンシブデザインで、画面幅に合わせてテキストサイズを変更したい場合に適しています。

「5vw」と設定すると、ブラウザ（ビューポート）幅の5%のサイズでテキストが表示されます。

フォントの種類によっては、ウェイト（太さ）の変更が可能です。

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

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

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

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

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

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

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

テキストグラデーションと併用できない設定
グラデーションを設定しているテキストボックスでは、以下の設定はできません。
- テキストボックスの背景色
- 下線
アニメーションの設定について
- ブラウザの互換性
  グラデーションにトランジション（時間、遅延、イージング）を設定するとなめらかな色の変化が表現できます。なおこの表現にはCCSの「@property」ルールを利用しており、一部ブラウザではサポートされていません。詳細は、以下のサイトをご覧ください。 "@property" | Can I use... Support tables
- 条件付きスタイルで「単色 → グラデーション」変化を設定した際、文字が一瞬消えてしまいます。
テキストグラデーション設定不可要素
フォームパーツの<input>, <textarea>, <select>には、テキストグラデーションは設定できません。

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

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

align 縦書き 横書き 文字詰め