概要へ移動

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

none
jQuery
ルビ(jQuery)
capitalize
jQuery
ルビ(jQuery)
uppercase
jQuery
ルビ(jQuery)
lowercase
jQuery
ルビ(jQuery)
full-width
jQuery
ルビ(jQuery)
full-size-kana
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各単語の先頭１文字を大文字に。他は変更なし。
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;