2012年11月21日

line-heightプロパティ 行の高さを指定

スポンサード リンク

行ボックスの高さ(行の高さ)を指定
javascriptで行間を変更

 このボックス(p要素)は、line-heightプロパティの値を "1.5em"、
font-sizeプロパティの値を"16px"、で指定しています。
上記セレクトボックスで値を変更すると、
このボックスの文章の行間を変更することができます。
line-height は、一行の高さを指定するプロパティです。
たとえば line-height: 1.5em; font-size: 16px;の場合
行の高さがフォントサイズの1.5倍(24px)になるので24px-16px=8px:
"8px"が行と行の間として、上下均等に"4px"ずつ分けられます。
このスタイルを設定すると、文章の行間を適度に空けることができ、
文章を読みやすくすることができます。
日本語の文章の場合最適なline-heightプロパティの値は1.3em〜1.7em 程度でしょう。
※ 行の高さがフォントサイズより小さな値の場合には、 行が重なって表示されます。
マイナス値は指定することはできません。

heteml
【ちょ〜簡単設置】初心者でもすぐ使える、無料アクセス解析の決定版!
ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ

サンプルソース

<html>
 <head>
<title>line-heightプロパティ</title>
 <style type="text/css">
 <!--
   #smp{
     line-height: 1.5em;
     font-size: 16px;
     border: 1px solid blue;
     padding-left: 10px;
        }
-->
</style>

<script type="text/javascript">
function Selc(num){  //選択された項目の値を取得。
 var lineH=num.options[num.selectedIndex].value; 
 document.getElementById("smp").style.lineHeight = lineH;
    }
</script>

</head>
<body>
<form> <!--セレクトボックス-->
<select name="slc" onchange="Selc(this)">
  <option value="*" selected>line-heightプロパティ値を選択</option>
  <option value="normal">normal</option>
  <option value="0.8em">0.8em</option>
  <option value="1.0em">1.0em</option>
  <option value="1.1em">1.1em</option>
  <option value="1.2em">1.2em</option>
  <option value="1.3em">1.3em</option>
  <option value="1.4em">1.4em</option>
  <option value="1.5em">1.5em</option>
  <option value="1.6em">1.6em</option>
  <option value="1.7em">1.7em</option>
  <option value="1.8em">1.8em</option>
  <option value="1.9em">1.9em</option>
  <option value="2.0">2.0em</option>
</select>
</form>
<p id="smp">
 このボックス(p要素)は、<br>
line-heightプロパティの値を "1.5em"、<br>
font-sizeプロパティの値を"16px"、で指定しています。<br>
上記セレクトボックスで値を変更すると、<br>
このボックスの文章の行間を変更することができます。<br>
line-heightは、行の高さを指定するプロパティです。<br>
たとえば line-height: 1.5em; font-size: 16px;の場合<br>
以下省略・・・・・・・ </p> </body> </html>
line-height プロパティ
一行の高さを指定するプロパティです。
マイナス値は指定することはできません。
適用対象は全ての要素 です。
書式
p { line-height: 値; }
値の指定
line-height: normal;
   ブラウザの標準の行の高さ(1.0から1.2倍)になります。
   数値に [px]、[em]、などの単位をつけます。
line-height: パーセンテージ値(%);}
   適用要素のフォントサイズに対するパーセンテージ値(%)。
line-height: 実数値; //小数点一桁まで
   適用要素のフォントサイズに対する倍数。// "1.5"ならフォントサイズの
  "1.5"倍という事になります。
lineHeight プロパティ
javascriptでline-height プロパティを操作するには
obj.style.lineHeight="値" と記述します。上記サンプルでは
document.getElementById("smp").style.lineHeight = lineH;
となります。lineHにはセレクトボックスで選択した"値"が入ります。

heteml
ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ
セレクトメニューの設置 値の取得 onchangeイベント
javascript 文字、文字列
指定した範囲内の文字を抜き出します。substring()メソッド
右から指定した文字数を取り出す substr()メソッド
左から指定した文字数を取り出します substr()メソッド
文字列から1文字取り出します。charAt()メソッド
正規表現による文字列置換 String.replace();
文字列の長さ(文字数)を取り出す。 length プロパティ
一致する文字列の有無を調べます。indexOf()メソッド
文字列の単語間のスペース word-spacingプロパティ
javascript文字 点滅

posted by javaScript at 20:46 | 大阪 ☁ | 文字、文字列 | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。