Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:48.

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

ページの文字サイズは、ブラウザの機能で変更できます。しかし、行間の調整はブラウザの機能では(たぶん)できません。 そこで、行間をユーザの好みに応じて変更できる機能を設けておくと便利なのではないでしょうか。

例えば、以下のボタンをクリックすると、この枠内に掲載されている文章の行間を変更できます。
※このサンプルで変わるのは、この枠内の本文だけ。それ以外のページ内の行間は変わりません。このサンプルでたまたま枠内に限定しただけで、実際に活用する際には枠内の行間だけでなく、任意の箇所の行間を変更できますし、ページ全体の行間を変更することもできます。

JavaScriptで行間を変更するには、以下のようにlineHeightプロパティを使います。lineHeightプロパティに「行の高さ」を代入すると、そのようにスタイルが変更されます。 (※「line」の先頭「l」は小文字・「Height」の「H」は大文字です。)

■ページ全体の行間の場合:

document.body.style.lineHeight = 値;

■特定のID(★★★)を振ったボックスの行間の場合:

document.getElementById('★★★').style.lineHeight = 値;

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

まずは、ボタンを作るHTML:

<form>
   <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);" />
</form>

input要素を使ってボタンを5つ作成しています。それぞれのボタンから、ChangeLineHeight関数を呼び出し、引数に設定値(行の高さ)を指定しています。

そして、JavaScriptでChangeLineHeight関数を作るソースを書きます。

<script type="text/javascript"><!--
   function ChangeLineHeight(num) {
      document.body.style.lineHeight = num; /* ページ全体の行間を変更 */
   }
// --></script>

もし、対象がページ全体ではなく特定のボックス内だけなら、そのボックスに付加したID名を使って以下のように記述します。

document.getElementById('SampleTargetName').style.lineHeight = num;

※「SampleTargetName」の部分をID名に修正します。

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

※Opera 9 では、このlineHeightプロパティを使った行間変更は、対象がp要素の場合でないと機能しません。 div要素に対してや、ページ全体に対して指定しても、無視されるようです。 p要素を含むdiv要素に対して変更を行っても、p要素の行間は変化しません。 p要素に直接id名を振って直接そのlineHeightプロパティを修正しないといけないようです。

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど