text-transform

text-transformプロパティはアルファベットのように大文字と小文字がある言語の場合に、小文字を大文字に、大文字を小文字に変換して表示します。この機能は音声出力環境へ配慮するために定義されました。見出しなどテキストを全て大文字で書いてしまうことがありますが、音声出力環境ではすべて大文字で書かれた単語を一文字ずつ読み上げてしまうことがあります。そこでソースでの記述に関わらず、単語の大文字・小文字の外見を制御できれば、制作者は大文字・小文字の見た目にこだわることなく、適切な音声で読み上げられる（表現される）ように配慮できます。

値

none
capitalize
uppercase
lowercase
inherit

初期値

none

適用対象

すべての要素

継承

する

メディア

visual

text-transformプロパティに指定できる値のキーワードはそれぞれ以下の意味を示します。

none: 効果なし
capitalize: 各単語の一文字目だけを大文字に変換して表示
uppercase: すべてを大文字に変化して表示
lowercase: すべてを小文字に変換して表示

なお、アルファベットであれば、半角英字・全角英字のどちらでも大文字・小文字に変換できます。大文字・小文字の区別がない言語に "capitalize", "uppercase", "lowercase" のいずれかが指定された場合、UA はその指定を "none" として認識し、無効化することになるでしょう。

text-transformプロパティの実装状況

Windows版Internet Explorer: ○
Firefox: ○
Opera: ○
Safari: ○
Macintosh版Internet Explorer 5: ○

サンプル

記述例

.none       { text-transform : none ; }
.capitalize { text-transform : capitalize ; }
.uppercase  { text-transform : uppercase ; }
.lowercase  { text-transform : lowercase ; }

表示例

現在位置

W3G
CSS
テキスト
text-transform

ナビゲーション

World Wide Web Guide

ステータス情報

作者: 上田遼
公開: 2007-02-02T17:42:41+09:00
更新: 2008-12-29T04:30:40+09:00
URI: http://w3g.jp/css/text/text-transform

検索

直近の制作実績等：大阪人間科学大学 New! / 大阪薫英女子短期大学 New! / セキスイハイムみんなのお国じまん New!