TOP ＞ スタイルシートで文字をデザイン ＞ 英単語の大文字小文字を決定する。
英単語の大文字小文字を決定する。
英単語を多く使用するWebページであれば、いちいち大文字や小文字を自分で入力するのが面倒くさいこともありますよね。 ところがスタイルシートを使えば、英単語の大文字小文字の変換を自動化できます。
文章中にある英単語の大文字・小文字を変換する処理は『text-transform』 プロパティを使用します。
変換方法はキーワードで指定します。キーワードの表は以下を参照してください。
大文字・小文字の変換方法
| キーワード | 変換の仕方 |
| none | 変換せずに入力のまま表示（デフォルト） |
| capitalize | 各英単語の先頭文字を大文字に変換する。その他の文字は小文字に変換。 |
| uppercase | 全部大文字に変換。 |
| lowercase | 全部小文字に変換。 |
英単語の大文字小文字を決定する。
【書き方】
text-transform : キーワード;
"英単語の大文字小文字を決定する"のサンプルはコチラをクリック
- サンプルページのコードは以下の通りです。
|
【スタイルシート】 .c1{text-transform: none; background-color: #99ff99;} .c2{text-transform: capitalize; background-color: #ff9999;} .c3{text-transform: uppercase; background-color: #9999ff;} .c4{text-transform: lowercase; background-color: #ffff99;} 【HTML本文】 <html> <head> <title>英単語の大文字小文字を決定するのサンプル</title> <meta http-equiv="content-type" content="text/html"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" href="http://www.1css.net/sample/221.css" type="text/css"> </head> <body bgcolor="silver"> <p>英単語の大文字・小文字をスタイルシートで変換します。</p> <p class="c1">キーワードnoneで設定。This is an apple.</p> <p class="c2">キーワードcapitalizeで設定。This is an apple.</p> <p class="c3">キーワードuppercaseで設定。This is an apple.</p> <p class="c4">キーワードlowercaseで設定。This is an apple.</p> </body> </html> |
[
スタイルシートで文字をデザイン ]
