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

HTML DOM StyleのlineHeightプロパティとは？使い方と設定例を解説

lineHeightプロパティとは

HTML DOMのStyleオブジェクトが持つlineHeightプロパティは、テキストの行間（行の高さ）を設定・取得するために使用されます。行間を適切に調整することで、文章の可読性を大幅に向上させることができます。

lineHeightプロパティの値を設定する構文

object.style.lineHeight = "normal|number|length|%|initial|inherit";

lineHeightプロパティの値を取得する構文

object.style.lineHeight;

指定できる値

  • normal： 通常の行間。デフォルト値です。
  • number（数値）： 現在のフォントサイズに対する倍率を数値で指定します。例えば「2」ならフォントサイズの2倍の行間になります。
  • length（長さ）： px、emなどの長さの単位で行間を指定します。
  • %（パーセント）： 現在のフォントサイズに対する割合（%）で行間を指定します。
  • initial： このプロパティをデフォルト値に戻します。
  • inherit： 親要素からこのプロパティの値を継承します。

lineHeightプロパティの実装例

それでは、DOM StyleのlineHeightプロパティを使った具体的なサンプルコードを見てみましょう。ボタンをクリックすると、div要素内のテキストの行間が「3」に変更される仕組みです。

サンプルコード

<!DOCTYPE html>
<html>
<body>
<h2>デモ見出し</h2>
<div id="myid">
ここにはデモ用のテキストが設定されています。ここにはデモ用のテキストが設定されています。
ここにはデモ用のテキストが設定されています。ここにはデモ用のテキストが設定されています。
</div>
<br>
<button type="button" onclick="display()">行間を広げる</button>
<script>
    function display() {
        document.getElementById("myid").style.lineHeight = "3";
    }
</script>
</body>
</html>

実行結果

初期状態では、テキストは通常の行間で表示されます。

その後、ボタンをクリックすると、以下のようにlineHeightプロパティによって行間が拡大され、テキストが読みやすく表示されます。

このように、JavaScriptから動的に行間を制御したい場面では、DOM StyleのlineHeightプロパティが非常に便利です。ユーザーの操作に応じて文字の読みやすさを調整する機能など、さまざまなUI改善に活用できます。

  1. HTML DOMスタイルのuserSelectプロパティとは？テキスト選択の制御方法を解説

    HTML DOMのuserSelectプロパティは、HTMLドキュメント内で要素のテキストがユーザーによって選択可能かどうかを取得・設定するためのプロパティです。このプロパティを活用することで、Webページ上のテキストのコピーやドラッグによる選択を柔軟に制御できます。構文userSelectプロパティの基本的な構文は以下のとおりです。userSelectの値を取得する場合object.style.userSelectuserSelectの値を設定する場合object.style.userSelect = value;設定できる値valueには以下のいずれかの値を指定できます。値説明autoブラ

  2. HTML DOMのstyle.directionプロパティとは？テキスト方向の指定方法を解説

    HTML DOMのstyle.directionプロパティは、要素内のテキストの流れる方向（文字方向）を取得・設定するために使用されるプロパティです。デフォルト値は「ltr」となっています。この記事では、directionプロパティの基本的な使い方から、設定できる値、実際に動作するコード例までをわかりやすく解説します。directionプロパティの構文directionプロパティをJavaScriptで設定する場合、以下のような構文を使用します。object.style.direction = ltr|rtl|initial|inherit;設定できる値の一覧directionプロパティには、