【43】テキストを大文字・小文字に変換する text-transform

最終更新日:2018年11月01日  (初回投稿日:2018年11月01日)

text-transformプロパティは、テキストを大文字・小文字に変換できます。
このプロパティは欧文テキスト専用。日本語テキストは大文字小文字の区別無いから。

テキストをすべて大文字、または小文字で表示したり、単語の最初の文字だけ大文字にしたりできます。
「transform」は「変換」の意味です。

CSS 2 からあるプロパティで、ほとんどのブラウザが対応しています。
ただし、Text Module Level 3 の草案で「full-width」値(半角英数字を全角にする)が追加されましたが、この値は at-risk(リスクが有るので勧告候補で削除されるかも)扱いになっていて、対応しているのは Firefox だけです。

参考:
CSS Text Module Level 3 | W3C Working Draft
text-transform - CSS | MDN

text-transformプロパティの値

text-transformプロパティの値はすべてキーワードです 。

text-transformプロパティの値
キーワード noneがデフォルト値。
capitalize、uppercase、lowercase、full-width
グローバル値 text-transform: inherit; 親の値を継承(コレ書かなくても継承するけど)
text-transform: initial; 継承した親の値を解消しデフォルト値に戻す
text-transform: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 あり 適用できる要素 すべての要素

それぞれのキーワードは、以下の意味があります。

none
文字を変換させません。
capitalize
単語の最初の文字を大文字に変換させます。
単語の先頭に「句読点」や「記号」がある場合は無視する仕様です。
uppercase
すべての文字を大文字に変換させます。
lowercase
すべての文字を小文字に変換させます。
full-width
半角英数字を全角にします。
(*ただし、この値は W3C で at-risk(リスクが有るので勧告候補で削除されるかも)扱いになっています)

text-transformプロパティの使用サンプル

text-transformプロパティの値をぜんぶ使ってみます。
ほとんどのブラウザで実装していますが、「full-width」は Firefox くらいしか実装していないようです。(勧告時には無くなるかもね。需要がなさそうだし)

text-transform: 指定なし( = none) This property transforms text for styling purposes. 1234567890
(This) "is" [a] -short- *test*
text-transform: capitalize This property transforms text for styling purposes. 1234567890
(This) "is" [a] -short- *test*
text-transform: uppercase This property transforms text for styling purposes. 1234567890
(This) "is" [a] -short- *test*
text-transform: lowercase This property transforms text for styling purposes. 1234567890
(This) "is" [a] -short- *test*
text-transform: full-width This property transforms text for styling purposes. 1234567890
(This) "is" [a] -short- *test*

サンプルのソースコードはこちら。
text-transformプロパティは <div>要素に直接書いています。

<div class="mihon">
<b>text-transform: 指定なし( = none)</b>
This property transforms text for styling purposes.1234567890<br> 
(This) "is" [a] -short- *test*
</div>

<div class="mihon" style="text-transform:capitalize">
<b>text-transform: capitalize</b>
This property transforms text for styling purposes. 1234567890<br> 
(This) "is" [a] -short- *test*
</div>

<div class="mihon" style="text-transform:uppercase">
<b>text-transform: uppercase</b>
This property transforms text for styling purposes. 1234567890<br> 
(This) "is" [a] -short- *test*
</div>

<div class="mihon" style="text-transform:lowercase">
<b>text-transform: lowercase</b>
This property transforms text for styling purposes. 1234567890<br> 
(This) "is" [a] -short- *test*
</div>

<div class="mihon" style="text-transform:full-width">
<b>text-transform: full-width</b>
This property transforms text for styling purposes. 1234567890<br> 
(This) "is" [a] -short- *test*
</div>

<style>
.mihon {
	color:black;
	font-size:1rem;
	line-height:1.6;
	background:#ffc;
	margin:1em 0;
	border:solid 1px #ccc;
	padding:.6em}
.mihon b {
	display:block;
	color:#579961;
	text-transform:none}
</style>

次回予告

さて次回は、tab-sizeプロパティを使おう。
これは、文字通り「タブ(Tabキーを押してできるスペース)」の「幅」を指定できるプロパティです。

関連記事
このエントリーをはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーロリポップ!です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
02 | 2024/03 | 04
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31 - - - - - -
Archive
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.