JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでフォントをスモールキャピタル（小型大文字）で表示する方法

テキストをスモールキャピタル（小型大文字）で表示したい場合は、JavaScriptの fontVariant プロパティを使用します。このプロパティに「small-caps」を設定することで、英字テキストが小型の大文字で表示されるようになります。

スモールキャピタルとは

スモールキャピタル（small-caps）とは、小文字の部分を通常より小さなサイズの大文字で表示する文字スタイルです。見出しや装飾的なテキストなど、デザインにアクセントを加えたい場面でよく利用されます。

サンプルコード

以下のコードを実行し、ボタンをクリックすると、指定した段落のフォントファミリーとスモールキャピタル表示が設定されます。

<!DOCTYPE html>
<html>
    <body>
        <h1>Heading 1</h1>
        <p id="myID">
            This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text.
            This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text.
        </p>
        <button type="button" onclick="display()">Set Font Family and Font Variant</button>
        <script>
            function display() {
                document.getElementById("myID").style.fontFamily = "verdana,sans-serif";
                document.getElementById("myID").style.fontVariant = "small-caps";
            }
        </script>
    </body>
</html>

コードの解説

ボタンがクリックされると display() 関数が実行され、idが「myID」の段落に対して以下の2つのスタイルが適用されます。

  • style.fontFamily：フォントを「verdana, sans-serif」に設定します。
  • style.fontVariant：「small-caps」を指定し、テキストをスモールキャピタルで表示します。

なお、CSS側であらかじめ font-variant: small-caps; を指定しておく方法もありますが、JavaScriptから動的にスタイルを変更したい場合は、このように fontVariant プロパティを利用すると便利です。

  1. JavaScriptでテキストの行間を設定する方法

    テキストの行間（行と行の距離）を設定するには、lineHeightプロパティを使用します。このプロパティは、要素内の各行の高さを制御し、値を大きくするほど行間が広がります。JavaScriptから操作する場合は、document.getElementById()などで対象の要素を取得し、style.lineHeightに値を代入します。値には数値（フォントサイズに対する倍率）のほか、「px」や「%」などの単位も指定できます。以下のサンプルコードを実行して、JavaScriptでテキストの行間を設定する方法を確認してみましょう。サンプルコード<!DOCTYPE html> <h

  2. JavaScriptでテキストの文字間隔（レタースペーシング）を設定する方法

    文字間隔の設定には「letterSpacing」プロパティを使うJavaScriptでテキストの文字と文字の間隔を調整するには、styleオブジェクトのletterSpacingプロパティを使用します。このプロパティはCSSのletter-spacingに対応しており、「px」や「em」、「pt」などの長さの単位で文字間のスペースを自由に指定できます。値には正の数値を指定すれば文字間が広くなり、負の数値を指定すれば狭くなります。また、「normal」を設定すればデフォルトの間隔に戻すことも可能です。サンプルコード以下のコードでは、ボタンをクリックするとdisplay()関数が呼び出され、idが