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

JavaScriptでテキストのフォントサイズを設定する方法【fontSizeプロパティの使い方】

JavaScriptでフォントサイズを設定するには、style.fontSizeプロパティを使用します。このプロパティに「px」「em」「%」などの値や「smaller」「larger」といったキーワードを指定することで、要素の文字サイズを動的に変更できます。

実装例

以下のコードでは、ボタンをクリックすると指定した段落（ID：myID）のフォントファミリーとフォントサイズが変更されます。

<!DOCTYPE html>
<html>
   <body>
      <h1>見出し1</h1>
      <p id = "myID">
         これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。
         これはデモ用のテキストです。これはデモ用のテキストです。
      </p>
      <button type = "button" onclick = "display()">フォントとサイズを変更する</button>
      
      <script>
         function display() {
            document.getElementById("myID").style.fontFamily = "verdana,sans-serif";
            document.getElementById("myID").style.fontSize = "smaller";
         }
      </script>
      
   </body>
</html>

コードのポイント


  • document.getElementById()：HTML内の特定のIDを持つ要素を取得します。
  • style.fontSize：取得した要素のフォントサイズを設定します。上記の例では相対値「smaller」を指定していますが、「20px」や「1.5em」など具体的な数値も使用可能です。
  • onclick属性：ボタンがクリックされたタイミングでdisplay()関数が呼び出され、スタイルが適用されます。

このように、JavaScriptのfontSizeプロパティを使えば、ユーザーの操作に応じてテキストサイズを柔軟に制御できます。

  1. JavaScriptでフォントスタイルを「通常」「イタリック」「オブリーク」に設定する方法

    JavaScriptでフォントのスタイルを変更するには、fontStyle プロパティを使用します。このプロパティに「normal（通常）」「italic（イタリック／斜体）」「oblique（オブリーク）」のいずれかの値を指定することで、テキストの表示スタイルを自由に切り替えられます。 fontStyleプロパティで使える値 normal … 標準の書体（既定値） italic … イタリック体。フォント自体が持つ斜めの書体デザインを適用します oblique … オブリーク体。通常の書体を単純に傾けて表示します サンプルコード 以下は、ボタンをクリックするとフォントファミリーとフォント

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

    テキストをスモールキャピタル（小型大文字）で表示したい場合は、JavaScriptの fontVariant プロパティを使用します。このプロパティに「small-caps」を設定することで、英字テキストが小型の大文字で表示されるようになります。スモールキャピタルとはスモールキャピタル（small-caps）とは、小文字の部分を通常より小さなサイズの大文字で表示する文字スタイルです。見出しや装飾的なテキストなど、デザインにアクセントを加えたい場面でよく利用されます。サンプルコード以下のコードを実行し、ボタンをクリックすると、指定した段落のフォントファミリーとスモールキャピタル表示が設定されます