行間をユーザが自由に変更できるようにする方法

ウェブページ上に掲載されている文字サイズは、ブラウザの機能を使えばユーザが自由に変更できます。しかし、行間の調整はブラウザの機能では(たぶん)できません。
長文を読む際には、やや広めの行間が空いている方が読みやすいでしょう。しかし、どれくらいの行間がちょうど良いかは、ユーザによって異なりそうです。
であれば、行間もユーザ自身の好みに応じて自由に変更できる機能があれば、便利ではないでしょうか。

例えば、以下のボックスのようにです。

上記のサンプルでは、ボタンを使って行間を1.2文字分～2.2文字分の範囲で0.2文字分刻みで調整できます。
このような仕組みがあると、長文でも自分の好きな行間サイズで読めるので便利です。

行間をユーザが自由に変更できるようにするソース

CSSで行間を調整するには、line-heightプロパティを使います。
JavaScriptで行間を変更するには、lineHeightプロパティを使います。(※先頭の「line」の「l」は小文字で、続く「Height」の「H」は大文字です。間にハイフンはありません。)

このlineHeightプロパティに「行の高さ」を数値で代入すれば、そのようにスタイルが変更されます。

特定のid名を付加した要素に対して行間を調整するJavaScriptソース

特定のid名を割り振ったボックスを対象にして、その行間を調整する場合は、以下のようにJavaScriptを記述します。

document.getElementById('対象id名').style.lineHeight = 値;

getElementByIdメソッドを使って対象の要素(＝ここでは「行間サイズを調整したい対象のボックス」)を特定し、そのstyleプロパティのlineHeightプロパティに対して値を代入します。
値に「1.5」を代入すれば、行間サイズが「文字の高さの1.5倍」になります。この値はCSSのline-heightプロパティの値と同じです。

なお、特定のid名で範囲を限定したりせずに、単にページ全体の行間を対象にしたい場合は、以下のようにbodyを対象にして指定することもできます。

document.body.style.lineHeight = 値;

段組構造を採用していて、サイドバーなどにもいろいろ掲載しているようなページでは、このようにbody要素を対象にして一気に変更してしまうと不都合もありそうですが。(^_^;)
id名を指定して範囲を限定しておく方が無難でしょうね。

指定範囲の行間を調整するボタンを作るHTML＋JavaScriptソース

冒頭のサンプルのように、ボタンをクリックすることで指定範囲の行間を変更させるには、以下のように記述します。

▼ボタン群：
<input type="button" value="●行間 2.2" onclick="ChangeLineHeight(2.2);">
<input type="button" value="●行間 2.0" onclick="ChangeLineHeight(2.0);">
<input type="button" value="●行間 1.8" onclick="ChangeLineHeight(1.8);">
<input type="button" value="●行間 1.6" onclick="ChangeLineHeight(1.6);">
<input type="button" value="●行間 1.4" onclick="ChangeLineHeight(1.4);">
<input type="button" value="●行間 1.2" onclick="ChangeLineHeight(1.2);">
▼行間調整の対象ボックス：
<div id="LongSentenceBox">
	このボックスの中身が行間サイズ調整の対象です。
</div>

まず、input要素を使ってボタンを6つ作成しています。それぞれのボタンのonclick属性から、この後作成するChangeLineHeight関数を呼び出し、引数に設定値(＝行の高さ)を指定しています。
さらに、行間サイズを調整する対象のボックスにid名(ここでは「LongSentenceBox」)を割り振っています。このid名をJavaScriptから指定することで、この要素に対する行間を調整します。

JavaScriptでChangeLineHeight関数を作るソースは下記の通りです。

function ChangeLineHeight(num) {
	document.getElementById('LongSentenceBox').style.lineHeight = num;
}

上記の2行目で、id名がLongSentenceBoxである要素の行間サイズ(lineHeight)を、引数で指定された値に変更しています。
引数に与えられた値が、line-heightプロパティの値として有効かどうかはチェックしていませんから、ユーザに直接数値を入力させるような形は避けた方が良いでしょう。(^_^;)

こんな感じで、ページ全体または特定ボックス内の行間を、ユーザが自由に変更できるようになります。
ボタンをたくさん並べるとスペースを食うので、プルダウンメニューにした方がスマートかも知れません。

(更新日：2017年06月12日)