HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


HTMLタグボードトップ >> 今すぐ使える!便利ツール >> スタイルシート(CSS)辞典 >> テキストフォント >> アルファベットの大文字/小文字の表示方法を指定する

アルファベットの大文字/小文字の表示方法を指定する

CSSの書き方

text-transform:値 ;

CSSの詳細情報
プロパティ名 text-transform 読み方 テキスト・トランスフォーム
初期値 none 意味 大文字小文字の表示制御
none/capitalize/uppercase/lowercase
対象 すべての要素
CSSレベル CSSレベル1 対応ブラウザ Windows MAC
継承 する IE 5.0以上/FF1.0/NS7.1/OP8.0 SF/IE5.0

解説

「text-transform」プロパティは、単語ごとのアルファベットの文字列(英単語)の表示方法を指定するスタイルシートです。日本語などの文字列は対象となりません。値には、以下の表の4つを入力することができます。

設定できる値 表示の仕方
none(初期値) 文字は変更されず、通常の表示
capitalize 単語の先頭文字だけ大文字に変換
uppercase すべての文字列を大文字に変換
lowercase すべての文字列を小文字に変換

capitalizeの補足

「text-transform」プロパティの値「capitalize」は、単語の先頭の文字を大文字に変換しますが、残りの文字についてはそのままです。残りの文字が強制的に小文字になるわけではありません。従って、例えば「tRansForm」という文字を「capitalize」で変換すると「TRansForm」と表示されます。

CSS/HTMLサンプル

p.cap { text-transform:capitalize; }
p.up { text-transform:uppercase; }
p.low { text-transform:lowercase; }

段落要素に含まれる英単語の表記を変換する サンプル