Title

text-transformとは

text-transform とは次の語句からなるCSSのプロパティです。

text

読み: テキスト
意味: 文字情報、本文、原文

transform

読み: トランスフォーム
意味: 一変させる、変換

目次に戻る

text-transformの概要

このプロパティは、テキストのキャラクターを指定条件にあわせたキャラクターに変換して、表示させることができます。 指定条件によって大文字、小文字、全角、の変換に対応しています。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター{text-transform: 設定値}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

サンプルにはテキストを内包したdiv要素を使っています。 このdiv要素に対してプロパティを適用していきます。 要素が二つ並んでいるものは、左の要素がプロパティ未適用であり、右のdiv要素が各キーワード適用後のサンプルとなっています。

初期値: none

初期値はnoneです。 このキーワード値では、キャラクターの変換は行われません。

div{text-transform: none;}

目次に戻る

キーワード値: capitalize

capitalizeキワードは、頭文字の小文字を大文字に変換します。

div{text-transform: capitalize;}

目次に戻る

キーワード値: uppercase

uppercaseキワードはキワードは大文字という意味であり、小文字を大文字に変換します。

div{text-transform: uppercase;}

目次に戻る

キーワード値: lowercase

lowercaseキワードは小文字という意味であり、大文字を小文字に変換します。

div{text-transform: lowercase;}

目次に戻る

キーワード値: full-width

full-widthキワードは、全幅という意味であり、全ての文字が全角で表示されます。 このキーワードはブラウザによっては機能しない場合があり、 2020年1月現在、Firefoxのみの対応となっています。

div{text-transform: full-width;}

目次に戻る

キーワード値: full-size-kana

full-size-kanaキワードは、全角サイズのカナという意味です。 一般的にはruby要素を使用した場合にフリガナの小文字を、大文字のに変換することで読みやすくするために用いられます。 このキーワードはブラウザによっては機能しない場合があり、 2020年1月現在、Firefoxのみの対応となっています。

div{text-transform: full-size-kana;}

目次に戻る

グローバル値

text-transformプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

• inheritは親要素の値の継承を促します。
• initialは値を初期値のnoneに戻します。
• unsetは継承の初期値に戻します。
  ※このプロパティは親要素の値を継承するのが基本なので、inheritと同じ働きをします。

セレクター{text-transform: グローバル値;}

目次に戻る

補足説明

• すべての要素に適用可能
• 親要素の値を継承する

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

text-transform: none;

text-transform: capitalize;

text-transform: uppercase;

text-transform: lowercase;

text-transform: full-width;

text-transform: full-size-kana;

目次に戻る