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

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

テキストの行間（行と行の距離）を設定するには、lineHeightプロパティを使用します。このプロパティは、要素内の各行の高さを制御し、値を大きくするほど行間が広がります。

JavaScriptから操作する場合は、document.getElementById()などで対象の要素を取得し、style.lineHeightに値を代入します。値には数値（フォントサイズに対する倍率）のほか、「px」や「%」などの単位も指定できます。

以下のサンプルコードを実行して、JavaScriptでテキストの行間を設定する方法を確認してみましょう。

サンプルコード

<!DOCTYPE html>
<html>
    <body>
        <h1>見出し1</h1>
        <p id="myID">これはデモ用のテキストです。<br>これはデモ用のテキストです<br>これはデモ用のテキストです</p>
        <button type="button" onclick="display()">行間を設定する</button>
        <script>
            function display() {
                document.getElementById("myID").style.lineHeight = "2";
            }
        </script>
    </body>
</html>

コードの解説

  • lineHeight = "2"：フォントサイズの2倍の高さを行間として設定します。数値のみを指定した場合、その値は倍率として扱われます。
  • ボタンをクリックするとdisplay()関数が実行され、id属性が「myID」の段落（<p>要素）の行間が動的に変更されます。

行間指定のバリエーション

lineHeightプロパティには、以下のようなさまざまな指定方法があります。

  • element.style.lineHeight = "1.5"; … フォントサイズの1.5倍（推奨される読みやすい行間です）
  • element.style.lineHeight = "24px"; … 行の高さを24ピクセルに固定
  • element.style.lineHeight = "150%"; … フォントサイズの150%の高さを指定

用途に応じて適切な単位を選ぶことで、可読性の高いテキスト表示を実現できます。

  1. JavaScriptで要素を水平方向に配置する方法【cssFloatプロパティの使い方】

    要素を水平方向に配置（フロート）させるには、JavaScriptのcssFloatプロパティを使用します。cssFloatプロパティは、CSSのfloatプロパティに対応するもので、「left」「right」「none」の値を設定することで、画像やテキストなどの要素を左右どちらかに回り込ませることができます。例えば「right」を指定すると、要素は右側に配置され、その周囲に他のコンテンツが回り込みます。サンプルコード以下のコードを実行すると、ボタンをクリックしたときに画像が右側に水平配置されます。ぜひ試してみてください。<!DOCTYPE html> <html> &n

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

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