このページで解説するコードの実行結果。

jQuery
ルビ(jQuery)
jQuery
ルビ(jQuery)
jQuery
ルビ(jQuery)
jQuery
ルビ(jQuery)
jQuery
ルビ(jQuery)
jQuery
ルビ(jQuery)

なお、見た目のため、このページの実行結果には「下のCSSコードも」適用している。

CSS : デフォルトCSS
div {
    font-size:          2em;            /*  文字の大きさ */
    border:             2px solid blue; /*  境界線 */
    background-color:   #fef;           /*  背景色 */
    margin:             5px;            /*  外側の余白 */
    padding:            5px;            /*  内側の余白 */
}

text-transformの概要

大文字/小文字を変換する。

ただし「ブラウザ上の見た目のみ」であり、コピペすると元の大文字/小文字になっているので、ユーザが混乱する可能性がある。

(表) text-transformの設定値
設定値機能デフォルト
none変更なし
capitalize各単語の先頭1文字を大文字に。他は変更なし。
uppercase大文字
lowercase小文字
full-width全角文字
full-size-kana

まず、text-transformの設定が無い場合の結果。(デフォルト値のnoneと同じ結果)

HTML : 適用するHTML
<div class="sample">
    jQuery
</div>
<div>
    <ruby>ルビ<rp>(</rp><rt class="sample">jQuery</rt><rp>)</rp></ruby>
</div>
実行結果
jQuery
ルビ(jQuery)

none

CSS : none
.sample  {
    text-transform:   none;
}
実行結果
jQuery
ルビ(jQuery)

capitalize

CSS : capitalize
.sample  {
    text-transform:   capitalize;
}
実行結果
jQuery
ルビ(jQuery)

uppercase

CSS : uppercase
.sample  {
    text-transform:   uppercase;
}
実行結果
jQuery
ルビ(jQuery)

lowercase

CSS : lowercase
.sample  {
    text-transform:   lowercase;
}
実行結果
jQuery
ルビ(jQuery)

full-width

CSS : full-width
.sample  {
    text-transform:   full-width;
}
実行結果
jQuery
ルビ(jQuery)

full-size-kana

CSS : full-size-kana
.sample  {
    text-transform:   full-size-kana;
}
実行結果
jQuery
ルビ(jQuery)

Emmet : tt

記述Visual Studio Code
tttext-transform: uppercase;
ttltext-transform: lowercase;
ttctext-transform: capitalize;
ttntext-transform: none;