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

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

JavaScriptでフォントのスタイルを変更するには、fontStyle プロパティを使用します。このプロパティに「normal（通常）」「italic（イタリック／斜体）」「oblique（オブリーク）」のいずれかの値を指定することで、テキストの表示スタイルを自由に切り替えられます。

fontStyleプロパティで使える値

  • normal … 標準の書体（既定値）
  • italic … イタリック体。フォント自体が持つ斜めの書体デザインを適用します
  • oblique … オブリーク体。通常の書体を単純に傾けて表示します

サンプルコード

以下は、ボタンをクリックするとフォントファミリーとフォントスタイルを同時に変更する例です。style.fontFamily でフォントの種類を指定し、style.fontStyle でスタイルを「italic」に設定しています。

<!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.fontStyle = "italic";
         }
      </script>
   </body>
</html>

実行結果のポイント

上記のコードを実行してボタンをクリックすると、対象の段落（id="myID"）のフォントが Verdana 系のサンセリフ体に変わり、文字がイタリック（斜体）で表示されます。

もし「oblique」に変更したい場合は、スクリプト内の "italic" を "oblique" に置き換えるだけでOKです。同様に、元の標準スタイルへ戻す場合は "normal" を指定してください。

  1. JavaScriptでフォントの太さ（ウェイト）を設定する方法

    JavaScriptでフォントの太さを設定するには、fontWeightプロパティを使用します。このプロパティには「normal」「bold」「bolder」「lighter」などのキーワード、または100〜900までの数値（100刻み）を指定できます。数値が大きいほど文字が太く表示され、例えば「800」は非常に太いウェイトに相当します。サンプルコード以下のコードを実行すると、JavaScriptでフォントの太さを設定する動作を実際に確認できます。ボタンをクリックすると、指定した要素のフォントファミリーとフォントの太さが同時に変更されます。<!DOCTYPE html> <h

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

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