CSS3: text-transform プロパティ - テキストの大文字表示・小文字表示の指定

■ 概要

項  目説  明
記述形式 セレクタ {text-transform: }
値 の形式 nonecapitalizeuppercaselowercasefull-width
初 期 値 none
対応ブラウザー C1+ / e6+ / N6+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+
適用可能な要素 すべての要素
継  承 する

■ 解説

text-transformプロパティ は,テキストの大文字表示・小文字表示を指定します。

指定できる値の形式は,以下のとおりです。

説  明
none 文字種変更を指定せずそのまま表示します。 (初期値)
capitalize 各単語の先頭文字を大文字で表示します。
uppercase すべて大文字で表示します。
lowercase すべて小文字で表示します。
full-width すべての文字を全幅で表示します。

■ 使用例( text-transform プロパティの利用)

HTMLソース
CSS
<head> ~ </head>
<style type="text/css">
<!--
   div.txttr1 { text-transform: none; }
   div.txttr2 { text-transform: capitalize; }
   div.txttr3 { text-transform: uppercase; }
   div.txttr4 { text-transform: lowercase; }
   div.txttr5 { text-transform: full-width; }
-->
</style>
HTML
<body> ~ </body>
<div class="txttr1">
   <b>none:</b> A method of optimization of the linear observations
   for the stationary Kalman filter
</div>
<div class="txttr2">
   <b>capitalize:</b> A method of optimization of the linear observations
   for the stationary Kalman filter
</div>
<div class="txttr3">
   <b>uppercase:</b> A method of optimization of the linear observations
   for the stationary Kalman filter
</div>
<div class="txttr4">
   <b>lowercase:</b> A method of optimization of the linearf observations
   for the stationary Kalman filter
</div>
<div class="txttr5">
   <b>full-width:</b> A method of optimization of the linear observations
   for the stationary Kalman filter
</div>

ブラウザー 表示例
none: A method of optimization of the linear observations for the stationary Kalman filter
capitalize: A method of optimization of the linear observations for the stationary Kalman filter
uppercase: A method of optimization of the linear observations for the stationary Kalman filter
lowercase: A method of optimization of the linearf observations for the stationary Kalman filter
full-width: A method of optimization of the linear observations for the stationary Kalman filter

■ 備考

【参考ページ】