2007年9月 4日(火) 18時43分25秒 [装飾・内容変更]
行間をユーザが変更できるようにする
ページの文字サイズは、ブラウザの機能で変更できます。しかし、行間の調整はブラウザの機能では（たぶん）できません。 そこで、行間をユーザの好みに応じて変更できる機能を設けておくと便利なのではないでしょうか。
※このサンプルで変わるのは、この枠内の本文だけ。それ以外のページ内の行間は変わりません。このサンプルでたまたま枠内に限定しただけで、実際に活用する際には枠内の行間だけでなく、任意の箇所の行間を変更できますし、ページ全体の行間を変更することもできます。
JavaScriptで行間を変更するには、以下のようにlineHeightプロパティを使います。lineHeightプロパティに「行の高さ」を代入すると、そのようにスタイルが変更されます。 （※「line」の先頭「l」は小文字・「Height」の「H」は大文字です。）
■ページ全体の行間の場合：
■特定のID（★★★）を振ったボックスの行間の場合：
冒頭のサンプルのように、ボタンをクリックすることで行間を変更させるには、以下のように記述します。
まずは、ボタンを作るHTML：
<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関数を作るソースを書きます。
function ChangeLineHeight(num) {
document.body.style.lineHeight = num; /* ページ全体の行間を変更 */
}
// --></script>
もし、対象がページ全体ではなく特定のボックス内だけなら、そのボックスに付加したID名を使って以下のように記述します。
※「SampleTargetName」の部分をID名に修正します。
こんな感じで、ページ全体または特定ボックス内の行間を、ユーザに変更させることができるようになります。 ボタンをたくさん並べるとスペースを食うので、プルダウンメニューにした方がスマートかも知れません。
※Opera 9 では、このlineHeightプロパティを使った行間変更は、対象がp要素の場合でないと機能しません。 div要素に対してや、ページ全体に対して指定しても、無視されるようです。 p要素を含むdiv要素に対して変更を行っても、p要素の行間は変化しません。 p要素に直接id名を振って直接そのlineHeightプロパティを修正しないといけないようです。
この日記へのコメントはお気軽に！ コメント数:0 トラックバック数:0
| « 入力欄に対応するラジオボタンに自動でチェックを入れる |
前後のエントリ < 旧 ／ 新 > | JavaScriptで正規表現を使う » |
JavaScript TIPS 主要なカテゴリ
現在、以下のカテゴリに区分してTIPSを公開しています。