にしし ふぁくとりー(西村文宏 個人サイト)

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

ユーザが行間を自由に変更できるようにする方法 [装飾・内容変更]

JavaScriptで文章の行間サイズをユーザ自身が自由に変更できる機能を作ってみましょう。文字サイズはブラウザの機能で変更できますが、行間サイズは(たぶん)変更できません。ウェブページ側で閲覧者の好みに応じて行間を変更できるようにしておくと、長文が読みやすくなって便利かもしれません。

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

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

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

以下には6個の行間調整ボタンを掲載しています。どれでもボタンをクリックすると、このサンプル枠内に掲載されている文章の行間を変更できます。試しにクリックしてみて下さい。

※このサンプルで変わる行間は、この枠内に掲載されている本文だけが対象です。それ以外の文章の行間は変わりません。ウェブページ内のデザインを崩さないために、このサンプルでは適用範囲を枠内に限定しただけです。実際に活用する際には、「枠内の行間」だけでなく「任意の箇所の行間」を変更できますし、「ページ全体の行間」を一気に変更することもできます。

上記のサンプルでは、ボタンを使って行間を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ソース

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

HTMLソース

▼ボタン群:
<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関数を作るソースは下記の通りです。

JavaScriptソース

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

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

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

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---