HTML DOM スタイルの fontVariant プロパティとは？使い方とサンプルコードを解説
fontVariant プロパティとは
HTML DOM の fontVariant プロパティは、フォントをスモールキャップ（小型大文字）に変換するかどうかを設定、または取得するために使用されるプロパティです。
スモールキャップとは、すべての小文字を「小文字と同じサイズの大文字」に変換して表示するスタイルのことです。もともと大文字だった文字はそのままの大きさで表示されるため、文章全体に統一感を持たせることができます。
構文
fontVariant プロパティを設定する場合の構文は以下の通りです。
object.style.fontVariant = "normal|small-caps|initial|inherit"
プロパティに指定できる値
| 値 | 説明 |
|---|---|
| normal | フォントを通常の形式に設定します。これがデフォルト値です。 |
| small-caps | テキストを小型大文字（スモールキャップ）で表示します。 |
| initial | このプロパティを初期値に設定します。 |
| inherit | 親要素のプロパティ値を継承します。 |
使用例
それでは、fontVariant プロパティを使ってテキストをスモールキャップに変更する具体的な例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
#demo2,#demo1 {
font-family: 'times new roman';
font-size: 25px;
}
</style>
<script>
function changeFontVariant() {
document.getElementById("demo1").style.fontVariant="small-caps";
document.getElementById("demo2").style.fontVariant="small-caps";
document.getElementById("Sample").innerHTML="フォントバリアントがスモールキャップに変更されました。";
}
</script>
</head>
<body>
<div id="demo1">これはデモテキストです</div>
<div id="demo2">これはデモテキストです</div>
<p>下のボタンをクリックすると、上のdiv内のテキストのフォントバリアントが変更されます</p>
<button onclick="changeFontVariant()">fontVariant を変更</button>
<p id="Sample"></p>
</body>
</html>
実行結果
ページを開いた直後の表示は以下のようになります。
「fontVariant を変更」ボタンをクリックすると、両方の div 要素のテキストがスモールキャップ表示に切り替わります。
まとめ
- fontVariant プロパティは、テキストをスモールキャップ（小型大文字）で表示するかどうかを制御できる
- デフォルト値は「normal」で、通常のフォント形式で表示される
- JavaScript から動的に値を変更することで、ユーザーの操作に応じたスタイルの切り替えが可能
-
HTML DOM スタイルの transformOrigin プロパティとは？使い方を徹底解説
HTML DOM のスタイルオブジェクトが持つ transformOrigin プロパティは、HTML ドキュメント内の要素に対して 2D または 3D 変換を行う際の「原点（基準点）」を取得・設定するためのプロパティです。要素を回転や拡大縮小させる transform プロパティと組み合わせて使うことで、変換の基準となる位置を自由にコントロールできます。構文（シンタックス）transformOrigin プロパティの基本的な構文は以下のとおりです。値の取得object.style.transformOrigin値の設定object.style.transformOrigin = 値指定できる
-
HTML DOM スタイルの quotes プロパティの使い方を徹底解説
HTML DOM の style オブジェクトの quotes プロパティは、HTML ドキュメント内で引用文を囲むために使用される引用符（クォーテーションマーク）の種類を取得・変更するためのプロパティです。主に <q> 要素や <blockquote> 要素など、引用を表す要素と組み合わせて利用されます。 構文 quotes プロパティの基本的な構文は以下のとおりです。 値の取得 object.style.quotes 値の設定 object.style.quotes = value 設定できる値 value には以下の値を指定できます。 値説明 inheri