【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キーを押してできるスペース)」の「幅」を指定できるプロパティです。

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

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

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

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

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

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
10 | 2018/11 | 12
- - - - 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 -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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